From 8b10d49118990caf197aa99e1bed547780111b9c Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 15 Jun 2020 13:49:44 +0200 Subject: [PATCH 1/4] Clean up CSS --- app/assets/stylesheets/repositories.scss | 32 +++++++++++-------- .../repository/repository_table.scss | 2 -- app/assets/stylesheets/shared/datatable.scss | 1 + .../stylesheets/themes/main_navigation.scss | 4 +++ app/views/repositories/show.html.erb | 12 ++++++- 5 files changed, 34 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 478e9e526..6ed95597a 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -8,12 +8,12 @@ } .repository-show { - height: calc(100vh - 66px); + height: calc(100vh - var(--navbar-height)); left: var(--repository-sidebar-margin); margin: 0; - padding: 0 32px; + padding: 0 2em; position: absolute; - top: 51px; + top: var(--navbar-height); transition: .4s $timing-function-sharp; width: calc(100vw - var(--repository-sidebar-margin)); @@ -21,10 +21,10 @@ #repository-toolbar { align-items: center; background-color: $color-white; + border: 0; display: flex; - height: 75px; left: var(--repository-sidebar-margin); - padding: 35px 32px 20px; + padding: 0 2em; position: fixed; transition: .4s $timing-function-sharp; width: calc(100% - var(--repository-sidebar-margin)); @@ -34,7 +34,7 @@ border-bottom: $border-tertiary; bottom: 0; position: absolute; - width: calc(100% - 64px); + width: calc(100% - 4em); } .repository-share-icon { @@ -92,6 +92,10 @@ .manage-repo-column-index { margin-left: 4px; } + + .view-switch { + margin-left: 4px; + } } } @@ -100,11 +104,11 @@ background-color: $color-white; display: flex; flex-grow: 1; - height: 68px; + height: 5em; left: var(--repository-sidebar-margin); - padding: 0 32px; + padding: 0 2em; position: fixed; - top: 126px; + top: calc(5em + var(--navbar-height)); transition: .4s $timing-function-sharp; width: calc(100% - var(--repository-sidebar-margin)); z-index: 90; @@ -123,13 +127,13 @@ } .dataTables_scroll { - padding-bottom: 68px; - padding-top: 123px; + padding-bottom: 5em; + padding-top: 10em; .dataTables_scrollHead { position: -webkit-sticky !important; position: sticky !important; - top: 194px; + top: calc(10em + var(--navbar-height)); z-index: 90; .table.dataTable { @@ -154,9 +158,9 @@ background-color: $color-white; bottom: 0; display: flex; - height: 68px; + height: 5em; left: var(--repository-sidebar-margin); - padding: 0 142px 0 32px; + padding: 0 10em 0 2em; position: fixed; transition: .4s $timing-function-sharp; width: calc(100% - var(--repository-sidebar-margin)); diff --git a/app/assets/stylesheets/repository/repository_table.scss b/app/assets/stylesheets/repository/repository_table.scss index 4247e003c..2ea3dff3a 100644 --- a/app/assets/stylesheets/repository/repository_table.scss +++ b/app/assets/stylesheets/repository/repository_table.scss @@ -4,8 +4,6 @@ @import "constants"; .repository-table { - margin-top: 20px; - .dataTables_filter { float: right; } diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss index 13eb58be2..9ff35e26b 100644 --- a/app/assets/stylesheets/shared/datatable.scss +++ b/app/assets/stylesheets/shared/datatable.scss @@ -4,6 +4,7 @@ .dataTables_wrapper { .main-actions { + align-items: center; display: flex; flex-wrap: wrap; padding: 1em 0; diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss index b1eaaf331..f3c406d97 100644 --- a/app/assets/stylesheets/themes/main_navigation.scss +++ b/app/assets/stylesheets/themes/main_navigation.scss @@ -1,6 +1,10 @@ @import 'constants'; @import "mixins"; +:root { + --navbar-height: 51px; +} + #main-nav { box-shadow: $flyout-shadow; margin-bottom: 0; diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb index fef8d686a..16d8aacd1 100644 --- a/app/views/repositories/show.html.erb +++ b/app/views/repositories/show.html.erb @@ -10,7 +10,7 @@
-
+

<% if @inline_editable_title_config.present? %> @@ -99,6 +99,16 @@ <% end %>

+ <%= render layout: "shared/view_switch" do %> +
  • + + Show archived items +
  • +
  • + + Show active items +
  • + <% end %>
    From e9830ebfee3c2cac63433b586ad5ac0413023255 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 15 Jun 2020 15:52:50 +0200 Subject: [PATCH 2/4] Add view switcher --- .../repositories/repository_datatable.js | 2 +- app/assets/javascripts/repositories/show.js | 11 ++++++++++ app/assets/stylesheets/repositories.scss | 22 ++++++++++++++++++- .../repositories/_toolbar_buttons.html.erb | 12 +++++----- app/views/repositories/show.html.erb | 21 ++++++++++-------- 5 files changed, 51 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js index 3d0318299..7759c746e 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js +++ b/app/assets/javascripts/repositories/repository_datatable.js @@ -467,7 +467,7 @@ var RepositoryDatatable = (function(global) { if (!row.recordEditable) { icon = ``; } else if (EDITABLE) { - icon = ''; + icon = ''; } else { icon = ''; } diff --git a/app/assets/javascripts/repositories/show.js b/app/assets/javascripts/repositories/show.js index f1f206721..5ea4cc9c1 100644 --- a/app/assets/javascripts/repositories/show.js +++ b/app/assets/javascripts/repositories/show.js @@ -147,6 +147,16 @@ }); } + function initRepositoryViewSwitcher() { + var viewSwitch = $('.view-switch'); + viewSwitch.on('click', '.view-switch-archived', function() { + $('.repository-show').toggleClass('archived active'); + }); + viewSwitch.on('click', '.view-switch-active', function() { + $('.repository-show').toggleClass('archived active'); + }); + } + $('#shareRepoBtn').on('ajax:success', function() { initShareModal(); }); @@ -154,4 +164,5 @@ $('.create-new-repository').initializeModal('#create-repo-modal'); initImportRecordsModal(); initTable(); + initRepositoryViewSwitcher(); }(window)); diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 6ed95597a..af34f3743 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -17,6 +17,18 @@ transition: .4s $timing-function-sharp; width: calc(100vw - var(--repository-sidebar-margin)); + &.active { + [data-view-mode="archived"] { + display: none !important; + } + } + + &.archived { + [data-view-mode="active"] { + display: none !important; + } + } + #repository-toolbar { align-items: center; @@ -47,10 +59,10 @@ } .repository-title-name { + @include font-h2; display: flex; flex-direction: column; flex-grow: 1; - font-size: 18px; line-height: 32px; margin-right: 20px; overflow: hidden; @@ -79,6 +91,14 @@ } } + .repository-archived-title-name { + @include font-h2; + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .repository-subtitle { color: $color-silver-chalice; font-size: 12px; diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb index 511cda35c..b640c2a85 100644 --- a/app/views/repositories/_toolbar_buttons.html.erb +++ b/app/views/repositories/_toolbar_buttons.html.erb @@ -7,7 +7,7 @@ <% end %> <% if can_create_repository_rows?(@repository) %> - @@ -16,7 +16,7 @@ <% if can_manage_repository_rows?(@repository) %>