From b938c6ce357269b62d29a3047d05b42d4adf8bdc Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Tue, 28 Jan 2020 11:32:48 +0100 Subject: [PATCH 1/4] Fix css for icons for repository file type --- app/assets/stylesheets/repositories.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 946c89f8f..63838c028 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -246,6 +246,7 @@ } .image-icon { + height: 18px; width: 18px; } @@ -284,7 +285,9 @@ .icon { display: inline-block; + position: relative; text-align: center; + top: -12px; width: 34px; } @@ -470,4 +473,3 @@ color: $color-silver-chalice; } } - From a22fe28d248f3ac2e967bf5531bed3300eca7c12 Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Thu, 6 Feb 2020 14:43:17 +0100 Subject: [PATCH 2/4] Refactor new and edit renderer for file cell --- .../repositories/renderers/columns/asset.js | 31 +++++++++- .../repositories/renderers/edit_renderers.js | 23 +------ .../repositories/renderers/new_renderers.js | 20 +----- .../javascripts/repositories/row_editor.js | 15 +++-- app/assets/stylesheets/repositories.scss | 62 +++++++++++-------- 5 files changed, 78 insertions(+), 73 deletions(-) diff --git a/app/assets/javascripts/repositories/renderers/columns/asset.js b/app/assets/javascripts/repositories/renderers/columns/asset.js index cec7fba48..ead76188b 100644 --- a/app/assets/javascripts/repositories/renderers/columns/asset.js +++ b/app/assets/javascripts/repositories/renderers/columns/asset.js @@ -1,9 +1,9 @@ /* - global ActiveStorage Promise + global ActiveStorage Promise I18n GLOBAL_CONSTANTS */ /* eslint-disable no-unused-vars */ -var Asset = (function() { +var AssetColumnHelper = (function() { function uploadFiles($fileInputs, directUploadUrl) { let filesToUploadCntr = 0; let filesUploadedCntr = 0; @@ -48,7 +48,32 @@ var Asset = (function() { }); } + function renderCell($cell, formId, columnId) { + let empty = $cell.is(':empty'); + let fileName = $cell.find('a.file-preview-link').text(); + let placeholder = I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB }); + + $cell.html(` +
+ + +
+ + + +
+
`); + } + return { - uploadFiles: uploadFiles + uploadFiles: uploadFiles, + renderCell: renderCell }; }()); diff --git a/app/assets/javascripts/repositories/renderers/edit_renderers.js b/app/assets/javascripts/repositories/renderers/edit_renderers.js index 1874c3c39..70b177dea 100644 --- a/app/assets/javascripts/repositories/renderers/edit_renderers.js +++ b/app/assets/javascripts/repositories/renderers/edit_renderers.js @@ -1,6 +1,6 @@ /* global ListColumnHelper ChecklistColumnHelper StatusColumnHelper SmartAnnotation I18n -GLOBAL_CONSTANTS DateTimeHelper +DateTimeHelper AssetColumnHelper */ $.fn.dataTable.render.editRowName = function(formId, cell) { @@ -22,26 +22,7 @@ $.fn.dataTable.render.editRowName = function(formId, cell) { $.fn.dataTable.render.editRepositoryAssetValue = function(formId, columnId, cell) { let $cell = $(cell.node()); - let empty = $cell.is(':empty'); - let fileName = $cell.find('a.file-preview-link').text(); - - $cell.html(` -
- - -
- - ${fileName} - -
-
`); + AssetColumnHelper.renderCell($cell, formId, columnId); }; $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell) { diff --git a/app/assets/javascripts/repositories/renderers/new_renderers.js b/app/assets/javascripts/repositories/renderers/new_renderers.js index e8d9f60d9..879420c31 100644 --- a/app/assets/javascripts/repositories/renderers/new_renderers.js +++ b/app/assets/javascripts/repositories/renderers/new_renderers.js @@ -1,6 +1,6 @@ /* global ListColumnHelper ChecklistColumnHelper StatusColumnHelper SmartAnnotation I18n -GLOBAL_CONSTANTS DateTimeHelper +AssetColumnHelper DateTimeHelper */ $.fn.dataTable.render.newRowName = function(formId, $cell) { @@ -18,23 +18,7 @@ $.fn.dataTable.render.newRowName = function(formId, $cell) { }; $.fn.dataTable.render.newRepositoryAssetValue = function(formId, columnId, $cell) { - $cell.html(` -
- - -
- - - -
-
`); + AssetColumnHelper.renderCell($cell, formId, columnId); }; $.fn.dataTable.render.newRepositoryTextValue = function(formId, columnId, $cell) { diff --git a/app/assets/javascripts/repositories/row_editor.js b/app/assets/javascripts/repositories/row_editor.js index 276476ad3..44c0ce610 100644 --- a/app/assets/javascripts/repositories/row_editor.js +++ b/app/assets/javascripts/repositories/row_editor.js @@ -40,7 +40,7 @@ var RepositoryDatatableRowEditor = (function() { animateSpinner($table, true); // DirectUpload here - let uploadPromise = Asset.uploadFiles($files, directUrl); + let uploadPromise = AssetColumnHelper.uploadFiles($files, directUrl); // Submission here uploadPromise @@ -62,10 +62,15 @@ var RepositoryDatatableRowEditor = (function() { fileInputs.on('change', function() { let $input = $(this); let $fileBtn = $input.next('.file-upload-button'); - let $label = $fileBtn.find('.label-asset'); + let $label = $fileBtn.find('label'); - $label.text($input[0].files[0].name); - $fileBtn.removeClass('new-file'); + if ($input[0].files[0]) { + $label.text($input[0].files[0].name); + $fileBtn.removeClass('new-file'); + } else { + $label.text(''); + $fileBtn.addClass('new-file'); + } $fileBtn.removeClass('error'); }); @@ -73,7 +78,7 @@ var RepositoryDatatableRowEditor = (function() { deleteButtons.on('click', function() { let $fileBtn = $(this).parent(); let $input = $fileBtn.prev('input[type=file]'); - let $label = $fileBtn.find('.label-asset'); + let $label = $fileBtn.find('label'); $fileBtn.addClass('new-file'); $label.text(''); diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 63838c028..b4801553a 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -259,10 +259,38 @@ .file-editing { width: 200px; + input[type=file] { + display: none; + } + + label { + cursor: pointer; + flex-grow: 1; + font-weight: normal; + height: 100%; + margin-bottom: 0; + margin-right: 5px; + overflow: hidden; + padding-left: 34px; + text-overflow: ellipsis; + white-space: nowrap; + z-index: 2; + + &:empty::before { + content: attr(data-placeholder); + margin-left: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .file-upload-button { + align-items: center; background-color: $color-white; border: solid 1px; border-radius: 3px; + display: flex; height: 34px; line-height: 32px; position: relative; @@ -272,33 +300,27 @@ display: none; } - label { - display: inline-block; - } - &:hover { .fa-trash { display: none; } } + + label { + padding-left: 0; + } } .icon { display: inline-block; - position: relative; + left: 0; + line-height: 32px; + position: absolute; text-align: center; - top: -12px; + top: 0; width: 34px; } - .label-asset { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 44px); - } - .fa-trash { background-color: $color-white; cursor: pointer; @@ -348,18 +370,6 @@ } } } - - - - input[type=file] { - display: none; - } - - label { - display: none; - font-weight: normal; - margin-left: 10px; - } } .toolbarButtonsDatatable { From 769089b555f423c775b73dc53718a6184f8a5b7e Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Thu, 6 Feb 2020 14:44:58 +0100 Subject: [PATCH 3/4] Fix hound --- app/assets/javascripts/repositories/row_editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/repositories/row_editor.js b/app/assets/javascripts/repositories/row_editor.js index 44c0ce610..81a35fc0c 100644 --- a/app/assets/javascripts/repositories/row_editor.js +++ b/app/assets/javascripts/repositories/row_editor.js @@ -1,5 +1,5 @@ /* - globals HelperModule animateSpinner SmartAnnotation Asset + globals HelperModule animateSpinner SmartAnnotation AssetColumnHelper */ /* eslint-disable no-unused-vars */ From e41df37a2eb2bef318922ee247ca981fec153c9c Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Fri, 7 Feb 2020 12:20:09 +0100 Subject: [PATCH 4/4] Small css fix after merging --- app/assets/stylesheets/repositories.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 6ff220777..e5be1dcf2 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -243,6 +243,7 @@ } .file-preview-link { + display: inline-block; min-width: 140px; padding-left: 5px; } @@ -300,6 +301,7 @@ } label { + color: $color-silver-chalice; padding-left: 0; } }