From 424e9685380603bc2199bbf5bf136437f6d49e85 Mon Sep 17 00:00:00 2001 From: Kris Date: Tue, 9 Aug 2022 22:12:35 -0400 Subject: [PATCH] UX: add left sidebar toggle when sidebar enabled (#17831) --- .../discourse/app/routes/application.js | 4 +++ .../sidebar/header-sidebar-toggle.hbs | 0 .../discourse/app/widgets/header-contents.js | 7 ++++++ .../discourse/app/widgets/header.js | 10 +++++++- .../discourse/app/widgets/sidebar-toggle.js | 16 ++++++++++++ .../sidebar-categories-section-test.js | 2 +- .../sidebar-community-section-test.js | 2 +- .../acceptance/sidebar-plugin-api-test.js | 2 +- .../acceptance/sidebar-tags-section-test.js | 2 +- .../tests/acceptance/sidebar-test.js | 8 +++--- .../stylesheets/common/base/header.scss | 25 +++++++++++++++++++ 11 files changed, 69 insertions(+), 9 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/templates/components/sidebar/header-sidebar-toggle.hbs create mode 100644 app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js index f26b798225..558ab27bc1 100644 --- a/app/assets/javascripts/discourse/app/routes/application.js +++ b/app/assets/javascripts/discourse/app/routes/application.js @@ -51,6 +51,10 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, { mobile.toggleMobileView(); }, + toggleSidebar() { + this.controllerFor("application").send("toggleSidebar"); + }, + logout: unlessReadOnly( "_handleLogout", I18n.t("read_only_mode.logout_disabled") diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/header-sidebar-toggle.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/header-sidebar-toggle.hbs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/app/assets/javascripts/discourse/app/widgets/header-contents.js b/app/assets/javascripts/discourse/app/widgets/header-contents.js index 5ce69e3b2d..7a5ccf8df4 100644 --- a/app/assets/javascripts/discourse/app/widgets/header-contents.js +++ b/app/assets/javascripts/discourse/app/widgets/header-contents.js @@ -4,6 +4,13 @@ import hbs from "discourse/widgets/hbs-compiler"; createWidget("header-contents", { tagName: "div.contents.clearfix", template: hbs` + {{#if this.site.desktopView}} + {{#if this.siteSettings.enable_experimental_sidebar_hamburger}} + {{#if attrs.sidebarEnabled}} + {{sidebar-toggle attrs=attrs}} + {{/if}} + {{/if}} + {{/if}} {{home-logo attrs=attrs}} {{#if attrs.topic}} {{header-topic-info attrs=attrs}} diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js index bbb665c608..8fef0b8e65 100644 --- a/app/assets/javascripts/discourse/app/widgets/header.js +++ b/app/assets/javascripts/discourse/app/widgets/header.js @@ -307,7 +307,14 @@ createWidget("header-icons", { }, }); - icons.push(hamburger); + if ( + !this.siteSettings.enable_experimental_sidebar_hamburger || + (this.siteSettings.enable_experimental_sidebar_hamburger && + !attrs.sidebarEnabled) || + this.site.mobileView + ) { + icons.push(hamburger); + } if (attrs.user) { icons.push( @@ -446,6 +453,7 @@ export default createWidget("header", { ringBackdrop: state.ringBackdrop, flagCount: attrs.flagCount, user: this.currentUser, + sidebarEnabled: attrs.sidebarEnabled, }); if (attrs.onlyIcons) { diff --git a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js b/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js new file mode 100644 index 0000000000..35033fd417 --- /dev/null +++ b/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js @@ -0,0 +1,16 @@ +import { createWidget } from "discourse/widgets/widget"; + +export default createWidget("sidebar-toggle", { + tagName: "span.header-sidebar-toggle", + + html() { + return [ + this.attach("button", { + title: "", + icon: "bars", + action: "toggleSidebar", + className: "btn btn-flat btn-sidebar-toggle", + }), + ]; + }, +}); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js index fb91929bf2..7abc849dbb 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js @@ -398,7 +398,7 @@ acceptance("Sidebar - Categories Section", function (needs) { topicTrackingState.stateChangeCallbacks ).length; - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.ok( Object.keys(topicTrackingState.stateChangeCallbacks).length < diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js index 39b3c31eff..5dbcee7748 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js @@ -930,7 +930,7 @@ acceptance("Sidebar - Community Section", function (needs) { topicTrackingState.stateChangeCallbacks ).length; - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.ok( Object.keys(topicTrackingState.stateChangeCallbacks).length < diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js index 6b094042a7..70c371c139 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js @@ -344,7 +344,7 @@ acceptance("Sidebar - Plugin API", function (needs) { "displays hover button with correct title" ); - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.strictEqual( linkDestroy, diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js index 51737b6a28..4d370ea55a 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js @@ -326,7 +326,7 @@ acceptance("Sidebar - Tags section", function (needs) { topicTrackingState.stateChangeCallbacks ).length; - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.ok( Object.keys(topicTrackingState.stateChangeCallbacks).length < diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js index ceabc70197..f75d4b2248 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js @@ -68,7 +68,7 @@ acceptance( assert.ok(exists(".sidebar-container"), "sidebar is displayed"); - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.notOk( exists(".sidebar-hamburger-dropdown"), @@ -77,7 +77,7 @@ acceptance( assert.notOk(exists(".sidebar-container"), "sidebar is hidden"); - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.ok(exists(".sidebar-container"), "sidebar is displayed"); }); @@ -137,7 +137,7 @@ acceptance( "displays the sidebar by default" ); - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.ok( !document.body.classList.contains("has-sidebar-page"), @@ -146,7 +146,7 @@ acceptance( assert.ok(!exists(".sidebar-container"), "hides the sidebar"); - await click(".hamburger-dropdown"); + await click(".btn-sidebar-toggle"); assert.ok(exists(".sidebar-container"), "displays the sidebar"); }); diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 07cffbaf11..75afb83d92 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -211,6 +211,31 @@ } } +.header-sidebar-toggle { + button { + margin-right: 1em; + box-sizing: content-box; // matches other header icons + display: flex; + justify-content: center; + width: 2.2857em; + height: 2.2857em; + padding: 0.2143em; + &:focus, + .discourse-no-touch & { + &:hover { + background-color: var(--primary-low); + } + } + .d-icon { + width: 100%; + font-size: var(--font-up-4); + line-height: var(--line-height-large); + display: inline-block; + color: var(--header_primary-low-mid); + } + } +} + .highlight-strong { background-color: var(--highlight-medium); }