Skip to content

G
gitlab-ce
Commit a7c4ddfa authored by Andrew Fontaine's avatar Andrew Fontaine
Browse files
Options

Merge branch 'btig-issue-333180-replace-classes-menu-expanded' into 'master' 

Replace css classes responsive menu

See merge request gitlab-org/gitlab!64470
parents c3918114 af251255
Hide whitespace changes
Inline Side-by-side
Showing with 22 additions and 109 deletions
app/assets/javascripts/main.js
View file @ a7c4ddfa
......@@ -35,7 +35,6 @@ import GlFieldErrors from './gl_field_errors';
import initUserPopovers from './user_popovers';
import initBroadcastNotifications from './broadcast_notification';
import { initTopNav } from './nav';
import navEventHub, { EVENT_RESPONSIVE_TOGGLE } from './nav/event_hub';
import 'ee_else_ce/main_ee';
......@@ -203,11 +202,7 @@ $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxComplete
});
$('.navbar-toggler').on('click', () => {
// The order is important. The `menu-expanded` is used as a source of truth for now.
// This can be simplified when the :combined_menu feature flag is removed.
// https://gitlab.com/gitlab-org/gitlab/-/issues/333180
$('.header-content').toggleClass('menu-expanded');
navEventHub.$emit(EVENT_RESPONSIVE_TOGGLE);
document.body.classList.toggle('top-nav-responsive-open');
});
/**
......
app/assets/javascripts/nav/components/responsive_app.vue
View file @ a7c4ddfa
......@@ -2,8 +2,7 @@
import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants';
import { BV_DROPDOWN_SHOW, BV_DROPDOWN_HIDE } from '~/lib/utils/constants';
import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '../event_hub';
import { resetMenuItemsActive, hasMenuExpanded } from '../utils';
import { resetMenuItemsActive } from '../utils';
import ResponsiveHeader from './responsive_header.vue';
import ResponsiveHome from './responsive_home.vue';
import TopNavContainerView from './top_nav_container_view.vue';
......@@ -33,25 +32,14 @@ export default {
},
},
created() {
eventHub.$on(EVENT_RESPONSIVE_TOGGLE, this.updateResponsiveOpen);
this.$root.$on(BV_DROPDOWN_SHOW, this.showMobileOverlay);
this.$root.$on(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
this.updateResponsiveOpen();
},
beforeDestroy() {
eventHub.$off(EVENT_RESPONSIVE_TOGGLE, this.onToggle);
this.$root.$off(BV_DROPDOWN_SHOW, this.showMobileOverlay);
this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
},
methods: {
updateResponsiveOpen() {
if (hasMenuExpanded()) {
document.body.classList.add('top-nav-responsive-open');
} else {
document.body.classList.remove('top-nav-responsive-open');
}
},
onMenuItemClick({ view }) {
if (view) {
this.activeView = view;
......
app/assets/javascripts/nav/event_hub.js deleted 100644 → 0
View file @ c3918114
import eventHubFactory from '~/helpers/event_hub_factory';
export const EVENT_RESPONSIVE_TOGGLE = 'top-nav-responsive-toggle';
export default eventHubFactory();
app/assets/javascripts/nav/utils/has_menu_expanded.js deleted 100644 → 0
View file @ c3918114
export const hasMenuExpanded = () =>
Boolean(document.querySelector('.header-content.menu-expanded'));
app/assets/javascripts/nav/utils/index.js
View file @ a7c4ddfa
export * from './has_menu_expanded';
export * from './reset_menu_items_active';
app/assets/stylesheets/framework/header.scss
View file @ a7c4ddfa
......@@ -27,17 +27,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
display: none;
}
.menu-expanded {
.more-icon {
display: none;
}
.close-icon {
display: block;
margin: auto;
}
}
.header-content {
width: 100%;
display: flex;
......@@ -103,18 +92,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
.navbar-collapse > ul.nav > li:not(.d-none) {
margin: 0 2px;
}
&.menu-expanded {
@include media-breakpoint-down(xs) {
.hide-when-menu-expanded {
display: none;
}
.navbar-collapse {
display: flex;
}
}
}
}
.navbar-collapse {
......@@ -673,19 +650,30 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
}
.top-nav-responsive-open {
.hide-when-top-nav-responsive-open {
@include media-breakpoint-down(xs) {
.more-icon {
display: none;
}
.close-icon {
display: block;
margin: auto;
}
@include media-breakpoint-down(xs) {
.navbar-collapse {
display: flex;
}
.hide-when-top-nav-responsive-open {
display: none !important;
}
}
.top-nav-responsive {
@include media-breakpoint-down(xs) {
.top-nav-responsive {
@include gl-display-block;
}
}
.navbar-gitlab .header-content .title-container {
flex: 0;
.navbar-gitlab .header-content .title-container {
flex: 0;
}
}
}
app/views/layouts/header/_default.html.haml
View file @ a7c4ddfa
......@@ -5,7 +5,7 @@
%a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
.container-fluid
.header-content
.title-container.hide-when-menu-expanded
.title-container.hide-when-top-nav-responsive-open
%h1.title
%span.gl-sr-only GitLab
= link_to root_path, title: _('Dashboard'), id: 'logo', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation') do
......
spec/frontend/nav/components/responsive_app_spec.js
View file @ a7c4ddfa
......@@ -3,16 +3,10 @@ import ResponsiveApp from '~/nav/components/responsive_app.vue';
import ResponsiveHeader from '~/nav/components/responsive_header.vue';
import ResponsiveHome from '~/nav/components/responsive_home.vue';
import TopNavContainerView from '~/nav/components/top_nav_container_view.vue';
import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '~/nav/event_hub';
import { resetMenuItemsActive } from '~/nav/utils/reset_menu_items_active';
import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
import { TEST_NAV_DATA } from '../mock_data';
const HTML_HEADER_CONTENT = '<div class="header-content"></div>';
const HTML_MENU_EXPANDED = '<div class="menu-expanded"></div>';
const HTML_HEADER_WITH_MENU_EXPANDED =
'<div></div><div class="header-content menu-expanded"></div>';
describe('~/nav/components/responsive_app.vue', () => {
let wrapper;
......@@ -26,13 +20,10 @@ describe('~/nav/components/responsive_app.vue', () => {
},
});
};
const triggerResponsiveToggle = () => eventHub.$emit(EVENT_RESPONSIVE_TOGGLE);
const findHome = () => wrapper.findComponent(ResponsiveHome);
const findMobileOverlay = () => wrapper.find('[data-testid="mobile-overlay"]');
const findSubviewHeader = () => wrapper.findComponent(ResponsiveHeader);
const findSubviewContainer = () => wrapper.findComponent(TopNavContainerView);
const hasBodyResponsiveOpen = () => document.body.classList.contains('top-nav-responsive-open');
const hasMobileOverlayVisible = () => findMobileOverlay().classes('mobile-nav-open');
beforeEach(() => {
......@@ -57,23 +48,6 @@ describe('~/nav/components/responsive_app.vue', () => {
});
});
it.each`
bodyHtml | expectation
${''} | ${false}
${HTML_HEADER_CONTENT} | ${false}
${HTML_MENU_EXPANDED} | ${false}
${HTML_HEADER_WITH_MENU_EXPANDED} | ${true}
`(
'with responsive toggle event and html set to $bodyHtml, responsive open = $expectation',
({ bodyHtml, expectation }) => {
document.body.innerHTML = bodyHtml;
triggerResponsiveToggle();
expect(hasBodyResponsiveOpen()).toBe(expectation);
},
);
it.each`
events | expectation
${[]} | ${false}
......@@ -96,17 +70,6 @@ describe('~/nav/components/responsive_app.vue', () => {
);
});
describe('with menu expanded in body', () => {
beforeEach(() => {
document.body.innerHTML = HTML_HEADER_WITH_MENU_EXPANDED;
createComponent();
});
it('sets the body responsive open', () => {
expect(hasBodyResponsiveOpen()).toBe(true);
});
});
const projectsContainerProps = {
containerClass: 'gl-px-3',
frequentItemsDropdownType: ResponsiveApp.FREQUENT_ITEMS_PROJECTS.namespace,
......@@ -159,17 +122,4 @@ describe('~/nav/components/responsive_app.vue', () => {
});
});
});
describe('when destroyed', () => {
beforeEach(() => {
createComponent();
wrapper.destroy();
});
it('responsive toggle event does nothing', () => {
triggerResponsiveToggle();
expect(hasBodyResponsiveOpen()).toBe(false);
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7