diff --git a/app/assets/javascripts/my_modules/repositories.js b/app/assets/javascripts/my_modules/repositories.js index 1d3855493..71c8648de 100644 --- a/app/assets/javascripts/my_modules/repositories.js +++ b/app/assets/javascripts/my_modules/repositories.js @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -/* global DataTableHelpers PerfectScrollbar */ +/* global DataTableHelpers PerfectScrollbar FilePreviewModal */ var MyModuleRepositories = (function() { var SIMPLE_TABLE; @@ -70,6 +70,7 @@ var MyModuleRepositories = (function() { FULL_VIEW_TABLE = $(tableContainer).DataTable({ dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>", processing: true, + stateSave: true, serverSide: true, order: $(tableContainer).data('default-order'), pageLength: 25, @@ -119,6 +120,7 @@ var MyModuleRepositories = (function() { drawCallback: function() { FULL_VIEW_TABLE.columns.adjust(); + FilePreviewModal.init(); if (FULL_VIEW_TABLE_SCROLLBAR) { FULL_VIEW_TABLE_SCROLLBAR.update(); } else { @@ -130,6 +132,12 @@ var MyModuleRepositories = (function() { } ); } + }, + stateLoadCallback: function(settings, callback) { + var loadStateUrl = $(tableContainer).data('load-state-url'); + $.post(loadStateUrl, function(json) { + callback(json.state); + }); } }); } @@ -147,6 +155,11 @@ var MyModuleRepositories = (function() { function initRepositoryFullView() { $('#assigned-items-container').on('click', '.action-buttons .full-screen', function(e) { var fullViewModal = $('#my-module-repository-full-view-modal'); + var repositoryNameObject = $(this).closest('.assigned-repository-caret') + .find('.assigned-repository-title') + .clone(); + + fullViewModal.find('.repository-name').html(repositoryNameObject); fullViewModal.modal('show'); $.get($(this).data('table-url'), (data) => { fullViewModal.find('.modal-body').html(data.html); diff --git a/app/assets/stylesheets/my_modules/repositories.scss b/app/assets/stylesheets/my_modules/repositories.scss index e2ad27ac1..e0ac69f13 100644 --- a/app/assets/stylesheets/my_modules/repositories.scss +++ b/app/assets/stylesheets/my_modules/repositories.scss @@ -1,6 +1,27 @@ // scss-lint:disable SelectorDepth SelectorFormat QualifyingElement // scss-lint:disable NestingDepth ImportantRule +@mixin my-module-repository-title { + @include font-h3; + line-height: 22px; + overflow: hidden; + padding-right: 55px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + + &::after { + color: $color-alto; + content: attr(data-rows-count); + display: inline-block; + line-height: 22px; + padding-left: 5px; + position: absolute; + right: 0; + width: 55px; + } +} + .my-module-inventories { .main-actions { @@ -89,10 +110,10 @@ padding: 0 18px; text-decoration: none; - &:hover, - &:active { - text-decoration: none; + &.collapsed:hover, + &.collapsed:active { background: $color-concrete; + text-decoration: none; } &:not(.collapsed) .fa-caret-right { @@ -105,23 +126,7 @@ } .assigned-repository-title { - @include font-h3; - overflow: hidden; - padding-right: 55px; - position: relative; - text-overflow: ellipsis; - white-space: nowrap; - - &::after { - color: $color-alto; - content: attr(data-rows-count); - display: inline-block; - line-height: 22px; - padding-left: 5px; - position: absolute; - right: 0; - width: 55px; - } + @include my-module-repository-title; } .action-buttons { @@ -177,22 +182,76 @@ flex-direction: column; height: inherit; + .modal-header { + align-items: center; + display: flex; + height: 55px; + padding: 10px 24px; + + .close { + flex-shrink: 0; + } + + .header-container { + flex-grow: 1; + + .assigned-repository-title { + @include my-module-repository-title; + @include font-h2; + } + + .breadcrumbs { + @include font-small; + align-items: center; + color: $color-silver-chalice; + display: flex; + height: 20px; + width: 100%; + + .my-module, + .project, + .experiment { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .slash { + flex-basis: 20px; + text-align: center; + } + } + } + } + .modal-body { flex-grow: 1; + padding: 0; } .dataTables_wrapper { - height: calc(100% - 30px); + height: 100%; position: absolute; - width: calc(100% - 30px); + width: 100%; .dataTables_scroll { - height: calc(100% - 104px); + height: calc(100% - 146px); + padding: 0 24px; .dataTables_scrollBody { height: calc(100% - 44px); } } + + .main-actions { + padding: 16px 24px 10px; + } + + .pagination-row { + border-top: $border-default; + height: 84px; + padding: 0 24px; + } } } } diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index eed294987..385618052 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/app/views/my_modules/protocols.html.erb @@ -86,3 +86,4 @@ <%= stylesheet_link_tag 'datatables' %> <%= javascript_include_tag("my_modules/protocols") %> +<%= javascript_pack_tag 'emoji_button' %> diff --git a/app/views/my_modules/repositories/_full_view_modal.html.erb b/app/views/my_modules/repositories/_full_view_modal.html.erb index d9787aace..f22a5f20e 100644 --- a/app/views/my_modules/repositories/_full_view_modal.html.erb +++ b/app/views/my_modules/repositories/_full_view_modal.html.erb @@ -2,6 +2,17 @@