Commit 7444e8a1 authored by Phil Hughes's avatar Phil Hughes

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

Clean up `new-sidebar`

See merge request gitlab-org/gitlab-ce!14978
parents a811704c 58af2647
......@@ -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();
}
......
/* 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();
});
......
......@@ -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";
......
@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,
......
......@@ -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
*/
......
......@@ -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;
}
......
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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment