From c9dd8b356a984001c82f2fa6c160cecae5ebb83b Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Wed, 4 Jul 2018 13:43:45 +0200
Subject: [PATCH] fixes locale, fixes custom file upload style

---
 .../forms/repository_item_edit.js             | 16 ++++----
 .../repositories/repository_datatable.js.erb  | 18 +++++++--
 .../stylesheets/themes/repositories.scss      | 37 +++++++++++++++++--
 config/locales/en.yml                         |  1 +
 4 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/repositories/forms/repository_item_edit.js b/app/assets/javascripts/repositories/forms/repository_item_edit.js
index b65dcaffe..9eb8eef06 100644
--- a/app/assets/javascripts/repositories/forms/repository_item_edit.js
+++ b/app/assets/javascripts/repositories/forms/repository_item_edit.js
@@ -185,21 +185,22 @@
    */
   function changeToInputFileField(object, name, value, id) {
     var fileName    = (value.file_file_name) ? value.file_file_name : "";
-    var buttonLabel = "Choose File";
+    var buttonLabel = I18n.t('general.file.choose');
     var html        = "<div class='repository-input-file-field'>" +
-      "<div class='form-group'><input type='file' name='" + name + "' id='" +
+      "<div class='form-group'><div><input type='file' name='" + name + "' id='" +
       id + "' style='display:none' /><button class='btn btn-default' " +
       "data-object='" + object + "' name='" + name + "' value='" + value +
       "' data-id='" + id + "'>" + buttonLabel +
-      "</button>&nbsp;<i class='file-name-label'>" + fileName + "</o></div>";
+      "</button></div><div><p class='file-name-label'>" + fileName +
+      "</p></div>";
     if(fileName.length > 0) {
-      html += "<a data-action='removeAsset' ";
+      html += "<div><a data-action='removeAsset' ";
       html += "onClick='clearFileInput(this)'><i class='fas fa-times'></i></a>";
     } else {
-      html += "<a data-action='removeAsset' onClick='clearFileInput(this)' ";
+      html += "<div><a data-action='removeAsset' onClick='clearFileInput(this)' ";
       html += "style='display:none'><i class='fas fa-times'></i></a>";
     }
-    html += "</div>";
+    html += "</div></div></div>";
 
     return html;
   }
@@ -306,7 +307,8 @@
   function initFileHandler($inputField) {
     $inputField.on('change', function() {
       var input = $(this);
-      var $label = $($(this).parent().find('.file-name-label')[0]);
+      var $label = $($(this).closest('.repository-input-file-field')
+                            .find('.file-name-label')[0]);
       var file   = this.files[0];
       if (file) {
         $label.text(file.name);
diff --git a/app/assets/javascripts/repositories/repository_datatable.js.erb b/app/assets/javascripts/repositories/repository_datatable.js.erb
index 218ee93d9..c01caf36e 100644
--- a/app/assets/javascripts/repositories/repository_datatable.js.erb
+++ b/app/assets/javascripts/repositories/repository_datatable.js.erb
@@ -812,9 +812,18 @@ var RepositoryDatatable = (function(global) {
               var input = $(selectedRecord).find('input[name=' + key + ']');
               if (input) {
                 var message = Array.isArray(val.data) ? val.data[0] : val.data;
-                input.closest('.form-group').addClass('has-error');
-                input.parent().append("<span class='help-block'>" +
-                                      message + '<br /></span>');
+                // handle custom input field
+                if(input.attr('type') === 'file') {
+                  var container = input.closest('.repository-input-file-field');
+                  $(container.find('.form-group')[0]).addClass('has-error');
+                  container.addClass('has-error');
+                  container.append("<span class='help-block'>" +
+                                   message + '<br /></span>');
+                } else {
+                  input.closest('.form-group').addClass('has-error');
+                  input.parent().append("<span class='help-block'>" +
+                                        message + '<br /></span>');
+                }
               }
             });
           });
@@ -1086,6 +1095,9 @@ var RepositoryDatatable = (function(global) {
     $(input).attr('remove', true);
     // clear fileName
     $(parent.find('.file-name-label')[0]).text('');
+    $(parent.find('.form-group')[0]).removeClass('has-error');
+    parent.removeClass('has-error');
+    $(parent.find('.help-block')[0]).remove();
   }
 
   // Takes an object and creates custom html element
diff --git a/app/assets/stylesheets/themes/repositories.scss b/app/assets/stylesheets/themes/repositories.scss
index 6a3be1072..848231401 100644
--- a/app/assets/stylesheets/themes/repositories.scss
+++ b/app/assets/stylesheets/themes/repositories.scss
@@ -40,10 +40,39 @@
 }
 
 .repository-input-file-field {
-  border: 1px solid $color-alto;
-  border-radius: 5px;
-  display: inline-flex;
-  padding: 2px;
+  .form-group {
+    align-items: baseline;
+    border: 1px solid $color-alto;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .form-group.has-error {
+    border-color: $state-danger-border;
+  }
+
+  button {
+    height: 22px;
+    margin: 5px;
+    padding: 2px 10px;
+  }
+
+  i.fas {
+    margin-top: 10px;
+    padding-right: 5px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .file-name-label {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-bottom: 0px;
+  }
 
   a {
     color: $brand-danger;
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4a22f9ecd..66b1f9505 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1914,6 +1914,7 @@ en:
     private: "private"
     search: "Search"
     file:
+      choose: "Choose File"
       processing: "File is still being processed and cannot be downloaded yet."
       total_size: "You can upload max %{size} MB of files at one time. Please remove one or more files and try to submit again."
       size_exceeded: "File size must be less than %{file_size} MB."