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'