diff options
| -rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 2 | ||||
| -rw-r--r-- | app/views/layouts/nav/sidebar/_project.html.haml | 2 | ||||
| -rw-r--r-- | app/views/shared/_sidebar_toggle_button.html.haml | 2 | ||||
| -rw-r--r-- | changelogs/unreleased/fix-flyout-navs.yml | 5 | ||||
| -rw-r--r-- | spec/features/contextual_sidebar_spec.rb | 37 |
5 files changed, 45 insertions, 3 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index b62ec8a651b..9263e9b27e4 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/app/assets/javascripts/contextual_sidebar.js @@ -78,7 +78,7 @@ export default class ContextualSidebar { const dbp = ContextualSidebar.isDesktopBreakpoint(); if (this.$sidebar.length) { - this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed); + this.$sidebar.toggleClass(`sidebar-collapsed-desktop ${SIDEBAR_COLLAPSED_CLASS}`, collapsed); this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false); this.$page.toggleClass( 'page-with-icon-sidebar', diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml index 9b6551552c7..49ff976f8e8 100644 --- a/app/views/layouts/nav/sidebar/_project.html.haml +++ b/app/views/layouts/nav/sidebar/_project.html.haml @@ -9,7 +9,7 @@ = @project.name %ul.sidebar-top-level-items = nav_link(path: sidebar_projects_paths, html_options: { class: 'home' }) do - = link_to project_path(@project), class: 'shortcuts-project' do + = link_to project_path(@project), class: 'shortcuts-project qa-link-project' do .nav-icon-container = sprite_icon('home') %span.nav-item-name diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml index d90a6d43761..d499bc0a253 100644 --- a/app/views/shared/_sidebar_toggle_button.html.haml +++ b/app/views/shared/_sidebar_toggle_button.html.haml @@ -1,4 +1,4 @@ -%a.toggle-sidebar-button.js-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" } +%a.toggle-sidebar-button.js-toggle-sidebar.qa-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" } = sprite_icon('angle-double-left', css_class: 'icon-angle-double-left') = sprite_icon('angle-double-right', css_class: 'icon-angle-double-right') %span.collapse-text= _("Collapse sidebar") diff --git a/changelogs/unreleased/fix-flyout-navs.yml b/changelogs/unreleased/fix-flyout-navs.yml new file mode 100644 index 00000000000..c21f1037f09 --- /dev/null +++ b/changelogs/unreleased/fix-flyout-navs.yml @@ -0,0 +1,5 @@ +--- +title: Fix sidebar flyout navigation +merge_request: 29571 +author: +type: fixed diff --git a/spec/features/contextual_sidebar_spec.rb b/spec/features/contextual_sidebar_spec.rb new file mode 100644 index 00000000000..88da1b7966b --- /dev/null +++ b/spec/features/contextual_sidebar_spec.rb @@ -0,0 +1,37 @@ +# frozen_string_literal: true + +require 'spec_helper' + +describe 'Contextual sidebar', :js do + let(:user) { create(:user) } + let(:project) { create(:project) } + + before do + project.add_maintainer(user) + sign_in(user) + + visit project_path(project) + end + + it 'shows flyout navs when collapsed or expanded apart from on the active item when expanded' do + expect(page).not_to have_selector('.js-sidebar-collapsed') + + find('.qa-link-pipelines').hover + + expect(page).to have_selector('.is-showing-fly-out') + + find('.qa-link-project').hover + + expect(page).not_to have_selector('.is-showing-fly-out') + + find('.qa-toggle-sidebar').click + + find('.qa-link-pipelines').hover + + expect(page).to have_selector('.is-showing-fly-out') + + find('.qa-link-project').hover + + expect(page).to have_selector('.is-showing-fly-out') + end +end |