kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Fix flyout nav on small viewports

Browse source 
Decouples sidebar collapsed style from
behavior.
This commit is contained in:
Luke Bennett 2019-03-11 18:19:34 +00:00 committed by Luke Bennett
parent b02fca9684
commit 0705acd66c
No known key found for this signature in database
GPG key ID: 402ED51FB5D306C2
4 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/contextual_sidebar.js
View file

@ -8,6 +8,8 @@ import { parseBoolean } from '~/lib/utils/common_utils';
// https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24555#note_134136110 // https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24555#note_134136110
const NAV_SIDEBAR_BREAKPOINT = 1200; const NAV_SIDEBAR_BREAKPOINT = 1200;
export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
export default class ContextualSidebar { export default class ContextualSidebar {
constructor() { constructor() {
this.initDomElements(); this.initDomElements();
@ -62,6 +64,7 @@ export default class ContextualSidebar {
const breakpoint = bp.getBreakpointSize(); const breakpoint = bp.getBreakpointSize();
const dbp = ContextualSidebar.isDesktopBreakpoint(); const dbp = ContextualSidebar.isDesktopBreakpoint();
this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false); this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
this.$overlay.toggleClass( this.$overlay.toggleClass(
'mobile-nav-open', 'mobile-nav-open',

3
app/assets/javascripts/fly_out_nav.js
View file

@ -1,4 +1,5 @@
import bp from './breakpoints'; import bp from './breakpoints';
import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
const HIDE_INTERVAL_TIMEOUT = 300; const HIDE_INTERVAL_TIMEOUT = 300;
const IS_OVER_CLASS = 'is-over'; const IS_OVER_CLASS = 'is-over';
@ -29,7 +30,7 @@ const setHeaderHeight = () => {
}; };
export const isSidebarCollapsed = () => export const isSidebarCollapsed = () =>
sidebar && sidebar.classList.contains('sidebar-collapsed-desktop'); sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
export const canShowActiveSubItems = el => { export const canShowActiveSubItems = el => {
if (el.classList.contains('active') && !isSidebarCollapsed()) { if (el.classList.contains('active') && !isSidebarCollapsed()) {

5
changelogs/unreleased/ce-quick-fix-58727-collapsed-sidebar-flyout-menu-items-don-t-appear-in-1200px-screen-size.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Fix flyout nav on small viewports
merge_request: 25998
author:
type: fixed

5
spec/javascripts/fly_out_nav_spec.js
View file

@ -14,6 +14,7 @@ import {
setSidebar, setSidebar,
subItemsMouseLeave, subItemsMouseLeave,
} from '~/fly_out_nav'; } from '~/fly_out_nav';
import { SIDEBAR_COLLAPSED_CLASS } from '~/contextual_sidebar';
import bp from '~/breakpoints'; import bp from '~/breakpoints';
describe('Fly out sidebar navigation', () => { describe('Fly out sidebar navigation', () => {
@ -219,7 +220,7 @@ describe('Fly out sidebar navigation', () => {
it('shows collapsed only sub-items if icon only sidebar', () => { it('shows collapsed only sub-items if icon only sidebar', () => {
const subItems = el.querySelector('.sidebar-sub-level-items'); const subItems = el.querySelector('.sidebar-sub-level-items');
const sidebar = document.createElement('div'); const sidebar = document.createElement('div');
sidebar.classList.add('sidebar-collapsed-desktop'); sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
subItems.classList.add('is-fly-out-only'); subItems.classList.add('is-fly-out-only');
setSidebar(sidebar); setSidebar(sidebar);
@ -296,7 +297,7 @@ describe('Fly out sidebar navigation', () => {
it('returns true when active & collapsed sidebar', () => { it('returns true when active & collapsed sidebar', () => {
const sidebar = document.createElement('div'); const sidebar = document.createElement('div');
sidebar.classList.add('sidebar-collapsed-desktop'); sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
el.classList.add('active'); el.classList.add('active');
setSidebar(sidebar); setSidebar(sidebar);