Merge branch 'remove-new-sidebar-stuff' into 'master'

Clean up `new-sidebar`

See merge request gitlab-org/gitlab-ce!14978

app/assets/javascripts/new_sidebar.js → app/assets/javascripts/contextual_sidebar.js

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie';
 import _ from 'underscore';
 import bp from './breakpoints';
 
-export default class NewNavSidebar {
+export default class ContextualSidebar {
   constructor() {
     this.initDomElements();
     this.render();
@@ -55,7 +55,7 @@ export default class NewNavSidebar {
       this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
     }
-    NewNavSidebar.setCollapsedCookie(collapsed);
+    ContextualSidebar.setCollapsedCookie(collapsed);
 
     this.toggleSidebarOverflow();
   }

app/assets/javascripts/layout_nav.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import NewNavSidebar from './new_sidebar';
+import ContextualSidebar from './contextual_sidebar';
 import initFlyOutNav from './fly_out_nav';
 
 (function() {
@@ -51,8 +51,8 @@ import initFlyOutNav from './fly_out_nav';
   });
 
   $(() => {
-    const newNavSidebar = new NewNavSidebar();
-    newNavSidebar.bindEvents();
+    const contextualSidebar = new ContextualSidebar();
+    contextualSidebar.bindEvents();
 
     initFlyOutNav();
   });

app/assets/stylesheets/framework.scss

@@ -37,7 +37,7 @@
 @import "framework/secondary-navigation-elements";
 @import "framework/selects";
 @import "framework/sidebar";
-@import "framework/new-sidebar";
+@import "framework/contextual-sidebar";
 @import "framework/tables";
 @import "framework/notes";
 @import "framework/tabs";

app/assets/stylesheets/framework/new-sidebar.scss → app/assets/stylesheets/framework/contextual-sidebar.scss

-@import "framework/variables";
-@import 'framework/tw_bootstrap_variables';
-@import "bootstrap/variables";
-
-$active-background: rgba(0, 0, 0, .04);
-$active-hover-background: $active-background;
-$active-hover-color: $gl-text-color;
-$inactive-badge-background: rgba(0, 0, 0, .08);
-$hover-background: rgba(0, 0, 0, .06);
-$hover-color: $gl-text-color;
-$inactive-color: $gl-text-color-secondary;
-$new-sidebar-width: 220px;
-$new-sidebar-collapsed-width: 50px;
-
-.page-with-new-sidebar {
+.page-with-contextual-sidebar {
   @media (min-width: $screen-md-min) {
-    padding-left: $new-sidebar-collapsed-width;
+    padding-left: $contextual-sidebar-collapsed-width;
   }
 
   @media (min-width: $screen-lg-min) {
-    padding-left: $new-sidebar-width;
+    padding-left: $contextual-sidebar-width;
   }
 
   // Override position: absolute
@@ -34,7 +20,7 @@ $new-sidebar-collapsed-width: 50px;
 
 .page-with-icon-sidebar {
   @media (min-width: $screen-sm-min) {
-    padding-left: $new-sidebar-collapsed-width;
+    padding-left: $contextual-sidebar-collapsed-width;
   }
 }
 
@@ -52,12 +38,12 @@ $new-sidebar-collapsed-width: 50px;
 
   &:hover,
   a:hover {
-    background-color: $hover-background;
-    color: $hover-color;
+    background-color: $link-hover-background;
+    color: $gl-text-color;
 
     .settings-avatar {
       svg {
-        fill: $hover-color;
+        fill: $gl-text-color;
       }
     }
   }
@@ -85,7 +71,7 @@ $new-sidebar-collapsed-width: 50px;
 .nav-sidebar {
   position: fixed;
   z-index: 400;
-  width: $new-sidebar-width;
+  width: $contextual-sidebar-width;
   transition: left $sidebar-transition-duration;
   top: $header-height;
   bottom: 0;
@@ -103,7 +89,7 @@ $new-sidebar-collapsed-width: 50px;
 
   &.sidebar-icons-only {
     width: auto;
-    min-width: $new-sidebar-collapsed-width;
+    min-width: $contextual-sidebar-collapsed-width;
 
     .nav-sidebar-inner-scroll {
       overflow-x: hidden;
@@ -149,11 +135,11 @@ $new-sidebar-collapsed-width: 50px;
       display: flex;
       align-items: center;
       padding: 12px 16px;
-      color: $inactive-color;
+      color: $gl-text-color-secondary;
     }
 
     svg {
-      fill: $inactive-color;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -168,7 +154,7 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   @media (max-width: $screen-xs-max) {
-    left: (-$new-sidebar-width);
+    left: (-$contextual-sidebar-width);
   }
 
   .nav-icon-container {
@@ -210,8 +196,8 @@ $new-sidebar-collapsed-width: 50px;
 
       &:hover,
       &:focus {
-        background: $active-hover-background;
-        color: $active-hover-color;
+        background: $link-active-background;
+        color: $gl-text-color;
       }
     }
 
@@ -220,7 +206,7 @@ $new-sidebar-collapsed-width: 50px;
         &,
         &:hover,
         &:focus {
-          background: $active-background;
+          background: $link-active-background;
         }
       }
     }
@@ -308,11 +294,11 @@ $new-sidebar-collapsed-width: 50px;
 
     .badge {
       background-color: $inactive-badge-background;
-      color: $inactive-color;
+      color: $gl-text-color-secondary;
     }
 
     &.active {
-      background: $active-background;
+      background: $link-active-background;
 
       > a {
         margin-left: 4px;
@@ -330,7 +316,7 @@ $new-sidebar-collapsed-width: 50px;
 
     &.active > a:hover,
     &.is-over > a {
-      background-color: $hover-background;
+      background-color: $link-hover-background;
     }
   }
 }
@@ -340,7 +326,7 @@ $new-sidebar-collapsed-width: 50px;
 
 .toggle-sidebar-button,
 .close-nav-button {
-  width: $new-sidebar-width - 2px;
+  width: $contextual-sidebar-width - 2px;
   position: fixed;
   bottom: 0;
   padding: 16px;
@@ -407,7 +393,7 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   .toggle-sidebar-button {
-    width: $new-sidebar-collapsed-width - 2px;
+    width: $contextual-sidebar-collapsed-width - 2px;
     padding: 16px;
 
     .collapse-text,

app/assets/stylesheets/framework/variables.scss

@@ -9,6 +9,8 @@ $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: .15s;
 $right-sidebar-transition-duration: .3s;
+$contextual-sidebar-width: 220px;
+$contextual-sidebar-collapsed-width: 50px;
 
 /*
  * Color schema
@@ -358,6 +360,13 @@ $dropdown-item-hover-bg: $gray-darker;
 $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
 $dropdown-hover-color: $blue-400;
 
+/*
+* Contextual Sidebar
+*/
+$link-active-background: rgba(0, 0, 0, .04);
+$link-hover-background: rgba(0, 0, 0, .06);
+$inactive-badge-background: rgba(0, 0, 0, .08);
+
 /*
 * Buttons
 */
@@ -404,7 +413,6 @@ $note-targe3-inside: #ffffd3;
 $note-line2-border: #ddd;
 $note-icon-gutter-width: 55px;
 
-
 /*
 * Zen
 */

app/assets/stylesheets/pages/boards.scss

@@ -414,7 +414,7 @@
   margin: 5px;
 }
 
-.page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
+.page-with-contextual-sidebar.page-with-sidebar .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;
   }

app/helpers/nav_helper.rb

 module NavHelper
   def page_with_sidebar_class
     class_name = page_gutter_class
-    class_name << 'page-with-new-sidebar' if defined?(@left_sidebar) && @left_sidebar
+    class_name << 'page-with-contextual-sidebar' if defined?(@left_sidebar) && @left_sidebar
     class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @left_sidebar
 
     class_name