From c991b8f6a0f6b1aa34a60fdc2003907473eb1f26 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Wed, 17 May 2023 15:28:09 +0900 Subject: [PATCH] UX: Sections not collapsable in "header dropdown" navigation menu (#21604) What is the problem? This is a follow up to 4cca7de22dda2bfa0939c75fb4fe405a93c0a87d. In the commit, CSS was used to disable the collapsing of sections in the header dropdown navigation menu when the `navigation_menu` site setting is set to `header dropdown`. However, using CSS is not the correct approach as the underlying code is still marking the section as collapsable which means that the sections will still be displayed as collapsed with no way to "uncollapse" if the local store has already marked the section as collapsed. What is the fix? This commit removes the usage of CSS to hide the collapsabe button and instead correctly marks the section as not collapsable in the code. --- .../components/sidebar/anonymous/sections.hbs | 2 +- .../sidebar/common/custom-section.hbs | 2 +- .../sidebar/common/custom-sections.hbs | 5 ++- .../components/sidebar/hamburger-dropdown.hbs | 2 +- .../components/sidebar/hamburger-dropdown.js | 13 +++++++ .../app/components/sidebar/user/sections.hbs | 2 +- .../tests/acceptance/sidebar-user-test.js | 36 +++++++++++++++++-- .../stylesheets/desktop/menu-panel.scss | 8 ----- 8 files changed, 55 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/sections.hbs index a6da74268e6..f757ca0c996 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/sections.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/sections.hbs @@ -1,5 +1,5 @@
- + diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs index 00363aa5e09..bf4da6d19dd 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs @@ -1,7 +1,7 @@ {{#each this.sections as |section|}} - + {{/each}}
\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs index f437f28ec05..3baeb1578bd 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs @@ -9,7 +9,7 @@
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.js b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.js index a7888ce2d9a..6e17d85693c 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.js @@ -5,9 +5,22 @@ import { inject as service } from "@ember/service"; export default class SidebarHamburgerDropdown extends Component { @service appEvents; @service currentUser; + @service site; + @service siteSettings; @action triggerRenderedAppEvent() { this.appEvents.trigger("sidebar-hamburger-dropdown:rendered"); } + + get collapsableSections() { + if ( + this.siteSettings.navigation_menu === "header dropdown" && + !this.args.collapsableSections + ) { + return this.site.mobileView || this.site.narrowDesktopView; + } else { + this.args.collapsableSections; + } + } } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs index 3168f543d92..2f7f7f6bf08 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs @@ -1,5 +1,5 @@
- + {{#if this.currentUser.display_sidebar_tags}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js index fbbc58aa5cb..d5899b87d21 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js @@ -9,7 +9,7 @@ import { } from "discourse/tests/helpers/qunit-helpers"; acceptance( - "Sidebar - Logged on user - Experimental sidebar and hamburger setting disabled", + "Sidebar - Logged on user - Legacy navigation menu enabled", function (needs) { needs.user(); @@ -27,7 +27,29 @@ acceptance( ); acceptance( - "Sidebar - Logged on user - header dropdown navigation menu enabled", + "Sidebar - Logged on user - Mobile view - Header dropdown navigation menu enabled", + function (needs) { + needs.user(); + needs.mobileView(); + + needs.settings({ + navigation_menu: "header dropdown", + }); + + test("sections are collapsable", async function (assert) { + await visit("/"); + await click(".hamburger-dropdown"); + + assert.ok( + exists(".sidebar-section-header.sidebar-section-header-collapsable"), + "sections are collapsable" + ); + }); + } +); + +acceptance( + "Sidebar - Logged on user - Desktop view - Header dropdown navigation menu enabled", function (needs) { needs.user(); @@ -52,6 +74,16 @@ acceptance( ); }); + test("sections are not collapsable", async function (assert) { + await visit("/"); + await click(".hamburger-dropdown"); + + assert.notOk( + exists(".sidebar-section-header.sidebar-section-header-collapsable"), + "sections are not collapsable" + ); + }); + test("'more' dropdown should display as regular list items in header dropdown mode", async function (assert) { await visit("/"); await click(".hamburger-dropdown"); diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss index 6ed8c50c2d6..7c2b73c38a7 100644 --- a/app/assets/stylesheets/desktop/menu-panel.scss +++ b/app/assets/stylesheets/desktop/menu-panel.scss @@ -54,14 +54,6 @@ } } - .sidebar-section-wrapper .sidebar-section-header-caret { - display: none; - } - - .sidebar-section-header-collapsable { - pointer-events: none; // disabling collapsible sections - } - .sidebar-custom-sections .d-icon-globe { left: -0.9em; top: 0.35em;