Commit 2d00ad48 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '35724-animate-sidebar' into 'master'

Animate contextual sidebar; change class names for easier readability

Closes #35724

See merge request gitlab-org/gitlab-ce!15797
parents 86ae677e e0172564
......@@ -28,7 +28,7 @@ export default class ContextualSidebar {
this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
this.$overlay.on('click', () => this.toggleSidebarNav(false));
this.$sidebarToggle.on('click', () => {
const value = !this.$sidebar.hasClass('sidebar-icons-only');
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
this.toggleCollapsedSidebar(value);
});
......@@ -43,16 +43,16 @@ export default class ContextualSidebar {
}
toggleSidebarNav(show) {
this.$sidebar.toggleClass('nav-sidebar-expanded', show);
this.$sidebar.toggleClass('sidebar-expanded-mobile', show);
this.$overlay.toggleClass('mobile-nav-open', show);
this.$sidebar.removeClass('sidebar-icons-only');
this.$sidebar.removeClass('sidebar-collapsed-desktop');
}
toggleCollapsedSidebar(collapsed) {
const breakpoint = bp.getBreakpointSize();
if (this.$sidebar.length) {
this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
}
ContextualSidebar.setCollapsedCookie(collapsed);
......
......@@ -21,7 +21,7 @@ let headerHeight = 50;
export const getHeaderHeight = () => headerHeight;
export const isSidebarCollapsed = () => sidebar && sidebar.classList.contains('sidebar-icons-only');
export const isSidebarCollapsed = () => sidebar && sidebar.classList.contains('sidebar-collapsed-desktop');
export const canShowActiveSubItems = (el) => {
if (el.classList.contains('active') && !isSidebarCollapsed()) {
......
.page-with-contextual-sidebar {
transition: padding-left $sidebar-transition-duration;
@media (min-width: $screen-md-min) {
padding-left: $contextual-sidebar-collapsed-width;
}
......@@ -27,8 +29,10 @@
.context-header {
position: relative;
margin-right: 2px;
width: $contextual-sidebar-width;
a {
transition: padding $sidebar-transition-duration;
font-weight: $gl-font-weight-bold;
display: flex;
align-items: center;
......@@ -63,10 +67,10 @@
}
.nav-sidebar {
transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
position: fixed;
z-index: 400;
width: $contextual-sidebar-width;
transition: left $sidebar-transition-duration;
top: $header-height;
bottom: 0;
left: 0;
......@@ -74,16 +78,15 @@
box-shadow: inset -2px 0 0 $border-color;
transform: translate3d(0, 0, 0);
&:not(.sidebar-icons-only) {
&:not(.sidebar-collapsed-desktop) {
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
box-shadow: inset -2px 0 0 $border-color,
2px 1px 3px $dropdown-shadow-color;
}
}
&.sidebar-icons-only {
width: auto;
min-width: $contextual-sidebar-collapsed-width;
&.sidebar-collapsed-desktop {
width: $contextual-sidebar-collapsed-width;
.nav-sidebar-inner-scroll {
overflow-x: hidden;
......@@ -108,12 +111,11 @@
}
}
&.nav-sidebar-expanded {
&.sidebar-expanded-mobile {
left: 0;
}
a {
transition: none;
text-decoration: none;
}
......@@ -126,9 +128,10 @@
white-space: nowrap;
a {
transition: padding $sidebar-transition-duration;
display: flex;
align-items: center;
padding: 12px 16px;
padding: 12px 15px;
color: $gl-text-color-secondary;
}
......@@ -288,7 +291,8 @@
> a {
margin-left: 4px;
padding-left: 12px;
// Subtract width of left border on active element
padding-left: 11px;
}
.badge {
......@@ -313,6 +317,7 @@
.toggle-sidebar-button,
.close-nav-button {
width: $contextual-sidebar-width - 2px;
transition: width $sidebar-transition-duration;
position: fixed;
bottom: 0;
padding: 16px;
......@@ -343,20 +348,21 @@
}
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-icons-only {
.sidebar-collapsed-desktop {
.context-header {
height: 61px;
height: 60px;
width: $contextual-sidebar-collapsed-width;
a {
padding: 10px 4px;
}
}
li a {
padding: 12px 15px;
}
.sidebar-top-level-items > li {
&.active a {
padding-left: 12px;
......@@ -374,8 +380,8 @@
}
.toggle-sidebar-button {
width: $contextual-sidebar-collapsed-width - 2px;
padding: 16px;
width: $contextual-sidebar-collapsed-width - 2px;
.collapse-text,
.icon-angle-double-left {
......
......@@ -5,10 +5,9 @@ $grid-size: 8px;
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
$gutter_inner_width: 250px;
$sidebar-transition-duration: .15s;
$sidebar-transition-duration: .3s;
$sidebar-breakpoint: 1024px;
$default-transition-duration: .15s;
$right-sidebar-transition-duration: .3s;
$contextual-sidebar-width: 220px;
$contextual-sidebar-collapsed-width: 50px;
......
......@@ -57,7 +57,7 @@
position: relative;
@media (min-width: $screen-sm-min) {
transition: width $right-sidebar-transition-duration;
transition: width $sidebar-transition-duration;
width: 100%;
&.is-compact {
......@@ -453,8 +453,8 @@
.right-sidebar.right-sidebar-expanded {
&.boards-sidebar-slide-enter-active,
&.boards-sidebar-slide-leave-active {
transition: width $right-sidebar-transition-duration,
padding $right-sidebar-transition-duration;
transition: width $sidebar-transition-duration,
padding $sidebar-transition-duration;
}
&.boards-sidebar-slide-enter,
......
......@@ -126,7 +126,7 @@
top: $header-height;
bottom: 0;
right: 0;
transition: width $right-sidebar-transition-duration;
transition: width $sidebar-transition-duration;
background: $gray-light;
z-index: 200;
overflow: hidden;
......
.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to admin_root_path, title: 'Admin Overview' do
......
- issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
- merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened', non_archived: true).execute
.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to group_path(@group), title: @group.name do
......
.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to profile_path, title: 'Profile Settings' do
......
.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
- can_edit = can?(current_user, :admin_project, @project)
.context-header
......
---
title: Animate contextual sidebar on collapse/expand
merge_request:
author:
type: changed
......@@ -253,7 +253,7 @@ describe('Fly out sidebar navigation', () => {
it('shows collapsed only sub-items if icon only sidebar', () => {
const subItems = el.querySelector('.sidebar-sub-level-items');
const sidebar = document.createElement('div');
sidebar.classList.add('sidebar-icons-only');
sidebar.classList.add('sidebar-collapsed-desktop');
subItems.classList.add('is-fly-out-only');
setSidebar(sidebar);
......@@ -343,7 +343,7 @@ describe('Fly out sidebar navigation', () => {
it('returns true when active & collapsed sidebar', () => {
const sidebar = document.createElement('div');
sidebar.classList.add('sidebar-icons-only');
sidebar.classList.add('sidebar-collapsed-desktop');
el.classList.add('active');
setSidebar(sidebar);
......
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