diff options
author | Phil Hughes <me@iamphill.com> | 2017-10-24 08:33:16 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-10-24 08:33:16 +0000 |
commit | 7444e8a1342e0b3e361b6973754eb3da20130e49 (patch) | |
tree | 3f623fd2a5a4bb0a0505900b57008911eac6d176 | |
parent | a811704c115118fff76046c9307224d41901185a (diff) | |
parent | 58af2647dc6a5bd7805e703a32fe45190d62c7d3 (diff) | |
download | gitlab-ce-7444e8a1342e0b3e361b6973754eb3da20130e49.tar.gz |
Merge branch 'remove-new-sidebar-stuff' into 'master'
Clean up `new-sidebar`
See merge request gitlab-org/gitlab-ce!14978
-rw-r--r-- | app/assets/javascripts/contextual_sidebar.js (renamed from app/assets/javascripts/new_sidebar.js) | 4 | ||||
-rw-r--r-- | app/assets/javascripts/layout_nav.js | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/framework.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/contextual-sidebar.scss (renamed from app/assets/stylesheets/framework/new-sidebar.scss) | 54 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 2 | ||||
-rw-r--r-- | app/helpers/nav_helper.rb | 2 |
7 files changed, 37 insertions, 43 deletions
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index 997550b37fb..46b68ebe158 100644 --- a/app/assets/javascripts/new_sidebar.js +++ b/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(); } diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index d064a2c0024..a6f82b247e2 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -1,7 +1,7 @@ /* 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(); }); diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index a0bb9e61436..7b1ef003bb2 100644 --- a/app/assets/stylesheets/framework.scss +++ b/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"; diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss index 7a309f2c8a1..fa5d3833f3e 100644 --- a/app/assets/stylesheets/framework/new-sidebar.scss +++ b/app/assets/stylesheets/framework/contextual-sidebar.scss @@ -1,24 +1,10 @@ -@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, diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index d5ca23ff870..8ab48e4844f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/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 @@ -359,6 +361,13 @@ $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 */ $btn-active-gray: #ececec; @@ -404,7 +413,6 @@ $note-targe3-inside: #ffffd3; $note-line2-border: #ddd; $note-icon-gutter-width: 55px; - /* * Zen */ diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index ca61f7a30c3..91296b354a7 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/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; } diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index a23a43c9f43..5a74511afa7 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -1,7 +1,7 @@ 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 |