From b116c3720c836df399192db067d91d717774ef7e Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 15 Jan 2020 16:46:01 +0100 Subject: [PATCH 1/5] Fix general css issue for repositories --- .../repositories/renderers/edit_renderers.js | 12 ++-- .../repositories/renderers/new_renderers.js | 12 ++-- .../repositories/repository_datatable.js | 33 ++++++++- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/extend/datatable.scss | 2 +- .../stylesheets/my_modules/repositories.scss | 69 +++++++++++++++++++ app/assets/stylesheets/repositories.scss | 7 +- .../repository/repository_table.scss | 6 ++ .../shared_styles/elements/input_fields.scss | 1 + app/assets/stylesheets/themes/scinote.scss | 8 --- app/views/my_modules/repository.html.erb | 2 +- config/locales/en.yml | 2 + 12 files changed, 130 insertions(+), 25 deletions(-) create mode 100644 app/assets/stylesheets/my_modules/repositories.scss diff --git a/app/assets/javascripts/repositories/renderers/edit_renderers.js b/app/assets/javascripts/repositories/renderers/edit_renderers.js index a76104108..5e4b61883 100644 --- a/app/assets/javascripts/repositories/renderers/edit_renderers.js +++ b/app/assets/javascripts/repositories/renderers/edit_renderers.js @@ -8,8 +8,8 @@ $.fn.dataTable.render.editRowName = function(formId, cell) { let text = $cell.find('a').first().text(); $cell.html(` -
- + - + - + - + - + - + <'filter-container'f>>t<'pagination-row'<'pagination-info'li><'pagination-actions'p>>", + dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>", stateSave: true, processing: true, serverSide: true, @@ -516,6 +516,8 @@ var RepositoryDatatable = (function(global) { }); }, fnInitComplete: function() { + var tableLengthSelect = $('.dataTables_length select') + var tableFilterInput = $('.dataTables_filter input') initRowSelection(); bindExportActions(); disableCheckboxToggleOnAssetDownload(); @@ -537,7 +539,34 @@ var RepositoryDatatable = (function(global) { initCancelButton(); } - $('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', ''); + if ($('.repository-show').length) { + $('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', ''); + } + + if (tableLengthSelect.val() == null) { + tableLengthSelect.val(10).change(); + } + $.each(tableLengthSelect.find('option'), (i, option) => { + option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value }); + }) + $('.dataTables_length').append(tableLengthSelect).find('label').remove(); + dropdownSelector.init(tableLengthSelect, { + noEmptyOption: true, + singleSelect: true, + closeOnSelect: true, + selectAppearance: 'simple' + }) + + tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory')) + .addClass('sci-input-field') + .css('margin', 0); + $('.dataTables_filter').append(` +
+ +
`).find('.sci-input-container').prepend(tableFilterInput) + $('.dataTables_filter').find('label').remove(); + + $('.main-actions, .pagination-row').removeClass('hidden'); } }); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 974d7675e..b656a286a 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -28,6 +28,7 @@ @import "partials/*"; @import "my_modules/protocols/*"; @import "my_modules/results/*"; +@import "my_modules/*"; @import "protocols/*"; @import "repository/*"; @import "repository_columns/*"; diff --git a/app/assets/stylesheets/extend/datatable.scss b/app/assets/stylesheets/extend/datatable.scss index e4ebdc6e0..5c4082aad 100644 --- a/app/assets/stylesheets/extend/datatable.scss +++ b/app/assets/stylesheets/extend/datatable.scss @@ -12,7 +12,7 @@ tr { th { - border-bottom-width: 0; + border-bottom: 2px solid $color-white; border-left: 2px solid $color-white; font-weight: bold; diff --git a/app/assets/stylesheets/my_modules/repositories.scss b/app/assets/stylesheets/my_modules/repositories.scss new file mode 100644 index 000000000..a2c0bd294 --- /dev/null +++ b/app/assets/stylesheets/my_modules/repositories.scss @@ -0,0 +1,69 @@ +// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement +// scss-lint:disable NestingDepth ImportantRule + +.my-module-inventories { + + .main-actions { + align-items: center; + display: flex; + + .filter-container { + flex-grow: 1; + } + } + + .dataTables_scroll { + .dataTables_scrollBody { + thead { + opacity: 0; + } + } + } + + tbody { + tr:hover { + + .assigned-column { + .repository-row-edit-icon { + display: none !important; + } + + .circle-icon { + margin-left: 30px !important; + } + } + } + } + + .pagination-row { + align-items: center; + display: flex; + + .pagination-info, + .pagination-actions { + flex-grow: 1; + } + + .pagination-info { + align-items: center; + display: flex; + + .dataTables_info { + padding-top: 0; + } + + .dataTables_length { + margin-right: 24px; + width: 170px; + + .dropdown-selector-container { + width: inherit; + } + + label { + margin-bottom: 0; + } + } + } + } +} diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index b9965aadf..a50fb6801 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -166,7 +166,12 @@ } .dataTables_length { - margin-right: 10px; + margin-right: 24px; + width: 170px; + + .dropdown-selector-container { + width: inherit; + } label { margin-bottom: 0; diff --git a/app/assets/stylesheets/repository/repository_table.scss b/app/assets/stylesheets/repository/repository_table.scss index 96e5ca7e4..37367443e 100644 --- a/app/assets/stylesheets/repository/repository_table.scss +++ b/app/assets/stylesheets/repository/repository_table.scss @@ -80,6 +80,12 @@ } } + // Text and Number field + + .text-field.sci-input-container { + min-width: 150px; + } + // DateTime .datetime-container { display: flex; diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss index 334c3d462..253c27477 100644 --- a/app/assets/stylesheets/shared_styles/elements/input_fields.scss +++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss @@ -16,6 +16,7 @@ animation-timing-function: $timing-function-sharp; border: $border-default; border-radius: $border-radius-default; + box-shadow: none; height: 36px; outline: 0; padding: 0 0 0 10px; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index e464dd90d..f5566a4e3 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -516,14 +516,6 @@ a[data-toggle="tooltip"] { .dataTables_wrapper { margin-top: 15px; clear: both; - - .dataTables_length { - float: left; - } - - .dataTables_filter { - float: right; - } } table { diff --git a/app/views/my_modules/repository.html.erb b/app/views/my_modules/repository.html.erb index 23f8d140f..e4413cec9 100644 --- a/app/views/my_modules/repository.html.erb +++ b/app/views/my_modules/repository.html.erb @@ -44,7 +44,7 @@ <% end %>
-
<%= render partial: "repositories/repository_table", locals: { diff --git a/config/locales/en.yml b/config/locales/en.yml index 3ed075a7a..3565cdb5c 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1007,6 +1007,8 @@ en: edit_inventory: "Edit Inventory" share_inventory: "Share" view_only_permission_label: "You have veiw-only permission" + show_per_page: "Show %{number} per page" + filter_inventory: "Filter inventory" options_dropdown: import_items: 'Import items' From 96e1d4a7d0c2679fb3a1cc6bb1ba51f70e6d7dc3 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 16 Jan 2020 10:51:37 +0100 Subject: [PATCH 2/5] Add new error handling --- .../javascripts/sitewide/form_errors.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/sitewide/form_errors.js b/app/assets/javascripts/sitewide/form_errors.js index e62972481..2db026ef3 100644 --- a/app/assets/javascripts/sitewide/form_errors.js +++ b/app/assets/javascripts/sitewide/form_errors.js @@ -25,12 +25,6 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) { $form.clearFormErrors(); } - // Mark error form group - var $formGroup = $(input).closest('.form-group'); - if (!$formGroup.hasClass('has-error')) { - $formGroup.addClass('has-error'); - } - // Add error message/s var errorText = ($.makeArray(errMsgs).map(function(m) { if( m instanceof Array ) { @@ -40,6 +34,19 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) { } })).join('
'); + + if ($(input).hasClass('sci-input-field')) { + $(input).closest('.sci-input-container').addClass('error'); + $(input).closest('.sci-input-container').attr('data-error-text', errorText); + return; + } + + // Mark error form group + var $formGroup = $(input).closest('.form-group'); + if (!$formGroup.hasClass('has-error')) { + $formGroup.addClass('has-error'); + } + var $errSpan = "' + errorText + ''; $(input).after($errSpan); From 2cb167ba7ae14b2ab2c6a28e191b175372c3879d Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 16 Jan 2020 10:54:18 +0100 Subject: [PATCH 3/5] Fix markup --- .../javascripts/repositories/repository_datatable.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js index 40fced2a1..e41c6d92b 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js +++ b/app/assets/javascripts/repositories/repository_datatable.js @@ -1,5 +1,5 @@ /* - globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise + globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise dropdownSelector HelperModule animateLoading hideAssignUnasignModal RepositoryDatatableRowEditor */ @@ -516,8 +516,8 @@ var RepositoryDatatable = (function(global) { }); }, fnInitComplete: function() { - var tableLengthSelect = $('.dataTables_length select') - var tableFilterInput = $('.dataTables_filter input') + var tableLengthSelect = $('.dataTables_length select'); + var tableFilterInput = $('.dataTables_filter input'); initRowSelection(); bindExportActions(); disableCheckboxToggleOnAssetDownload(); @@ -548,14 +548,14 @@ var RepositoryDatatable = (function(global) { } $.each(tableLengthSelect.find('option'), (i, option) => { option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value }); - }) + }); $('.dataTables_length').append(tableLengthSelect).find('label').remove(); dropdownSelector.init(tableLengthSelect, { noEmptyOption: true, singleSelect: true, closeOnSelect: true, selectAppearance: 'simple' - }) + }); tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory')) .addClass('sci-input-field') @@ -563,7 +563,7 @@ var RepositoryDatatable = (function(global) { $('.dataTables_filter').append(`
-
`).find('.sci-input-container').prepend(tableFilterInput) +
`).find('.sci-input-container').prepend(tableFilterInput); $('.dataTables_filter').find('label').remove(); $('.main-actions, .pagination-row').removeClass('hidden'); From cafc10f569016bcde1817bdc36099dd53a5c4168 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 16 Jan 2020 11:10:51 +0100 Subject: [PATCH 4/5] Fix datetime picker --- app/assets/stylesheets/extend/bootstrap.scss | 7 +++++++ app/assets/stylesheets/repositories.scss | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/extend/bootstrap.scss b/app/assets/stylesheets/extend/bootstrap.scss index 7941ffea7..1efd6f5ed 100644 --- a/app/assets/stylesheets/extend/bootstrap.scss +++ b/app/assets/stylesheets/extend/bootstrap.scss @@ -143,3 +143,10 @@ } } } + + +.bootstrap-datetimepicker-widget { + .dow { + @include font-button; + } +} diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index a50fb6801..bc803e681 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -132,7 +132,7 @@ } .dataTables_scrollBody { - thead { + thead th#checkbox { opacity: 0; } } From 509451daae0babac4eade2348b226fe54e9c2f17 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 16 Jan 2020 11:26:23 +0100 Subject: [PATCH 5/5] Fix table header size --- app/assets/stylesheets/extend/datatable.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/extend/datatable.scss b/app/assets/stylesheets/extend/datatable.scss index 5c4082aad..c8dcea143 100644 --- a/app/assets/stylesheets/extend/datatable.scss +++ b/app/assets/stylesheets/extend/datatable.scss @@ -15,6 +15,12 @@ border-bottom: 2px solid $color-white; border-left: 2px solid $color-white; font-weight: bold; + white-space: nowrap; + + .modal-tooltiptext { + margin-left: -10px; + margin-top: 10px; + } &::after { color: $color-silver-chalice;