Merge pull request #2357 from mlorb/ml-sci-4130

Sidebar redesign [SCI-4130]

app/assets/javascripts/sidebar.js

@@ -90,6 +90,12 @@
    * Setup the sidebar collapsing & expanding functionality.
    */
   global.setupSidebarTree = function() {
+    $('.tree a').click(function() {
+      var url = new URL($(this).attr('href'));
+      url.searchParams.set('scroll', $('.tree').scrollTop());
+      $(this).attr('href', url.toString());
+    });
+
     function toggleLi(el, collapse, animate) {
       var children = el.find(' > ul > li');
 
@@ -265,12 +271,7 @@
   }
 
   function scrollToSelectedItem() {
-    var offset;
-    if ($('#slide-panel .active').length) {
-      offset = $('#slide-panel .active').offset().top - 50;
-      if (offset < 0) offset = 0;
-      $('#slide-panel .tree').scrollTo(offset, 10);
-    }
+    $('#slide-panel .tree').scrollTo($('.tree').data('scroll'));
   }
 
   // Initialize click listeners

app/assets/stylesheets/partials/_sidebar.scss

@@ -4,25 +4,23 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-@import 'constants';
+@import "constants";
 @import "mixins";
 
-$wrapper-width: 280px;
-$toggle-btn-size: 50px;
+:root {
+  --wrapper-width: 280px;
+}
 
 @mixin sidebar-shown {
   // This rule is always overriden (show()) in JS
   // after document is loaded
   display: none;
-  padding-left: $wrapper-width;
+  padding-left: var(--wrapper-width);
   padding-right: 0;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
+  transition: .4s $timing-function-sharp;
 
   #sidebar-arrow {
-    background-color: $brand-default;
+    background-color: $color-concrete;
     border-bottom-right-radius: 10px;
     border-top-right-radius: 10px;
     bottom: 50%;
@@ -53,20 +51,17 @@ $toggle-btn-size: 50px;
   }
 
   #sidebar-wrapper {
-    background-color: $color-white;
-    box-shadow: $flyout-shadow;
+    background-color: $color-concrete;
     height: 100%;
-    margin-left: -$wrapper-width;
+    left: 83px;
     position: fixed;
-    -moz-transition: 0.4s $timing-function-sharp;
-    -o-transition: 0.4s $timing-function-sharp;
-    -webkit-transition: 0.4s $timing-function-sharp;
-    transition: 0.4s $timing-function-sharp;
-    width: $wrapper-width;
+    transition: .4s $timing-function-sharp;
+    width: var(--wrapper-width);
     z-index: 999;
 
     #slide-panel {
       height: 100%;
+      overflow: hidden;
 
       .disabled {
         opacity: 1;
@@ -81,9 +76,9 @@ $toggle-btn-size: 50px;
         opacity: 1;
         overflow-y: auto;
         padding: 20px 0;
-
-        // Animations
-        @include transition(opacity 0.5s ease);
+        position: absolute;
+        right: 0;
+        width: var(--wrapper-width);
       }
     }
   }
@@ -93,14 +88,11 @@ $toggle-btn-size: 50px;
   padding-left: 0;
 
   #sidebar-wrapper {
-    margin-left: 0;
-    width: 0;
+    left: calc(83px - var(--wrapper-width));
 
     #slide-panel {
       .tree {
-        opacity: 0;
-
-        @include transition(opacity 0.5s ease);
+        @include transition(opacity .5s ease);
       }
     }
   }
@@ -110,9 +102,9 @@ $toggle-btn-size: 50px;
   border-left: 1px dotted $color-emperor;
   bottom: 20px;
   content: "";
+  left: 34px;
   position: absolute;
   top: 25px;
-  left: 34px;
 }
 
 #wrapper {

app/assets/stylesheets/partials/_tree_view.scss

@@ -13,18 +13,12 @@
     margin-bottom: 0;
   }
 
-  .no-indent {
-    background-color: $color-white;
-  }
-
   .first-indent {
-    background-color: $color-concrete;
-    padding-left: 30px;
+    margin-left: 30px;
   }
 
   .second-indent {
-    background-color: $color-concrete;
-    padding-left: 60px;
+    margin-left: 60px;
   }
 
   li {
@@ -49,8 +43,8 @@
     }
 
     &.active > span {
-      background-color: $brand-primary;
-      color: $color-white;
+      background-color: $color-white;
+      color: $brand-primary;
       font-weight: bold;
 
       &.first-indent > span,
@@ -77,22 +71,17 @@
 
     // Links are recolored
     a {
-      color: $color-emperor;
+      color: $color-volcano;
       position: relative;
 
       &.disabled {
-        color: $color-white;
+        color: $brand-primary;
       }
 
       &:hover {
-        color: $brand-primary;
+        color: $color-volcano;
       }
     }
-
-    .border-custom {
-      box-shadow: 0 -.25px 0 .25px $color-alto;
-      margin: 0 15px;
-    }
   }
 
   .tree-link {
@@ -121,7 +110,7 @@
     }
 
     .first-indent {
-      padding-left: 45px;
+      padding-left: 15px;
     }
   }
 }
@@ -136,7 +125,7 @@
 
   .active {
     .fas-custom {
-      fill: $color-white;
+      fill: $brand-primary;
     }
   }
 }

app/assets/stylesheets/repositories.scss

@@ -8,27 +8,25 @@
 }
 
 .repository-show {
-  animation-timing-function: $timing-function-sharp;
   height: calc(100vh - 66px);
   left: var(--repository-sidebar-margin);
   margin: 0;
   padding: 0 32px;
   position: absolute;
   top: 51px;
-  transition: .4s;
+  transition: .4s $timing-function-sharp;
   width: calc(100vw - var(--repository-sidebar-margin));
 
 
   #repository-toolbar {
     align-items: center;
-    animation-timing-function: $timing-function-sharp;
     background-color: $color-white;
     display: flex;
     height: 75px;
     left: var(--repository-sidebar-margin);
     padding: 35px 32px 20px;
     position: fixed;
-    transition: .4s;
+    transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
     z-index: 100;
 
@@ -93,7 +91,6 @@
 
   .main-actions {
     align-items: center;
-    animation-timing-function: $timing-function-sharp;
     background-color: $color-white;
     display: flex;
     flex-grow: 1;
@@ -102,7 +99,7 @@
     padding: 0 32px;
     position: fixed;
     top: 126px;
-    transition: .4s;
+    transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
     z-index: 90;
 
@@ -126,9 +123,8 @@
       z-index: 90;
 
       .table.dataTable {
-        animation-timing-function: $timing-function-sharp;
         margin-top: 0 !important;
-        transition: .4s;
+        transition: .4s $timing-function-sharp;
 
         th {
           transition: width .2s;
@@ -145,7 +141,6 @@
 
   .pagination-row {
     align-items: center;
-    animation-timing-function: $timing-function-sharp;
     background-color: $color-white;
     bottom: 0;
     display: flex;
@@ -153,7 +148,7 @@
     left: var(--repository-sidebar-margin);
     padding: 0 142px 0 32px;
     position: fixed;
-    transition: .4s;
+    transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
     z-index: 90;
 
@@ -186,14 +181,6 @@
   }
 }
 
-
-
-
-
-
-
-
-
 .repositories-dropdown-menu {
   border: 1px solid $color-gainsboro;
   border-top: 0;

app/assets/stylesheets/themes/menu_bar.scss

@@ -86,5 +86,5 @@
 }
 
 .all-teams-navigation-link {
-  color: $color-white !important;
+  color: $brand-primary !important;
 }

app/assets/stylesheets/themes/scinote.scss

@@ -297,7 +297,6 @@ a[data-toggle="tooltip"] {
 }
 
 .navbar-secondary {
-  background: $color-concrete !important;
   margin-left: -280px;
   padding-left: 280px;
   padding-right: 82px;
@@ -406,19 +405,13 @@ a[data-toggle="tooltip"] {
 }
 
 .navbar-secondary {
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
+  transition: .4s $timing-function-sharp;
 }
 
 .navbar-without-sidebar{
   margin-left: 0px;
   padding-left: 0;
-  -o-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -webkit-transition: all 0.5s ease;
-  transition: all 0.5s ease;
+  transition: .4s $timing-function-sharp;
 }
 
 /** Chat bubble */

app/views/shared/_sidebar.html.erb

@@ -9,7 +9,7 @@
        data-current-project="<%= current_project&.id %>"
        data-current-experiment="<%= current_experiment&.id %>"
        data-current-task="<%= current_task&.id %>">
-    <div class="tree">
+    <div class="tree perfect-scrollbar" data-scroll="<%= params[:scroll] %>">
       <ul>
         <% cache [action_name, current_user, current_team] do %>
           <%= render partial: 'shared/sidebar/projects' %>