From 99073338de6b5aaef714f61a90434e78c289b608 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Fri, 22 Jul 2022 13:06:47 +0800 Subject: [PATCH] FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600) When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference. Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit. Co-authored-by: awesomerobot --- .../discourse/app/components/d-button.js | 6 ++ .../app/components/sidebar/section.js | 13 ++- .../discourse/app/components/site-header.js | 24 +++++ .../discourse/app/controllers/application.js | 1 + .../discourse/app/initializers/mobile.js | 1 + .../discourse/app/routes/application.js | 4 + .../discourse/app/templates/application.hbs | 13 ++- .../app/templates/components/sidebar.hbs | 3 +- .../components/sidebar/categories-section.hbs | 3 +- .../templates/components/sidebar/footer.hbs | 30 ++++++ .../components/sidebar/hamburger-dropdown.hbs | 12 +++ .../components/sidebar/messages-section.hbs | 5 +- .../templates/components/sidebar/section.hbs | 18 ++-- .../templates/components/sidebar/sections.hbs | 11 +- .../components/sidebar/tags-section.hbs | 3 +- .../components/sidebar/topics-section.hbs | 3 +- .../discourse/app/widgets/header-contents.js | 3 - .../discourse/app/widgets/header.js | 99 +++++++++++------ .../discourse/app/widgets/sidebar-toggle.js | 16 --- .../discourse/app/widgets/widget.js | 2 + .../sidebar-categories-section-test.js | 14 +-- .../tests/acceptance/sidebar-mobile-test.js | 13 ++- .../acceptance/sidebar-plugin-api-test.js | 3 +- .../acceptance/sidebar-tags-section-test.js | 12 ++- .../tests/acceptance/sidebar-test.js | 61 +++++++++-- .../acceptance/sidebar-topics-section-test.js | 10 +- .../tests/helpers/sidebar-helpers.js | 5 + app/assets/stylesheets/color_definitions.scss | 1 + .../stylesheets/common/base/_index.scss | 1 + .../stylesheets/common/base/header.scss | 5 +- .../stylesheets/common/base/menu-panel.scss | 30 ++++++ .../common/base/sidebar-footer.scss | 101 ++++++++++++++++++ .../common/base/sidebar-section-link.scss | 1 + .../common/base/sidebar-section.scss | 8 +- .../stylesheets/common/base/sidebar.scss | 55 ++-------- app/assets/stylesheets/desktop/discourse.scss | 24 +++-- app/assets/stylesheets/mobile/discourse.scss | 27 +++-- app/assets/stylesheets/mobile/sidebar.scss | 6 ++ config/locales/client.en.yml | 1 + lib/svg_sprite.rb | 1 + 40 files changed, 477 insertions(+), 172 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs create mode 100644 app/assets/javascripts/discourse/app/templates/components/sidebar/hamburger-dropdown.hbs delete mode 100644 app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js create mode 100644 app/assets/javascripts/discourse/tests/helpers/sidebar-helpers.js create mode 100644 app/assets/stylesheets/common/base/sidebar-footer.scss diff --git a/app/assets/javascripts/discourse/app/components/d-button.js b/app/assets/javascripts/discourse/app/components/d-button.js index f8177d44497..1726bb76d84 100644 --- a/app/assets/javascripts/discourse/app/components/d-button.js +++ b/app/assets/javascripts/discourse/app/components/d-button.js @@ -1,3 +1,4 @@ +import { inject as service } from "@ember/service"; import { empty, equal, notEmpty } from "@ember/object/computed"; import Component from "@ember/component"; import DiscourseURL from "discourse/lib/url"; @@ -22,6 +23,7 @@ export default Component.extend({ forwardEvent: false, preventFocus: false, onKeyDown: null, + router: service(), isLoading: computed({ set(key, value) { @@ -149,6 +151,10 @@ export default Component.extend({ } } + if (this.route) { + this.router.transitionTo(this.route); + } + if (this.href && this.href.length) { DiscourseURL.routeTo(this.href); } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.js b/app/assets/javascripts/discourse/app/components/sidebar/section.js index 79eda4f28aa..f01b8433a63 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.js @@ -10,10 +10,15 @@ export default class SidebarSection extends GlimmerComponent { constructor() { super(...arguments); - this.displaySection = - this.keyValueStore.getItem(this.collapsedSidebarSectionKey) === undefined - ? true - : false; + if (this.args.collapsable) { + this.displaySection = + this.keyValueStore.getItem(this.collapsedSidebarSectionKey) === + undefined + ? true + : false; + } else { + this.displaySection = true; + } } willDestroy() { diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js index 689108b01ae..9f3c0006309 100644 --- a/app/assets/javascripts/discourse/app/components/site-header.js +++ b/app/assets/javascripts/discourse/app/components/site-header.js @@ -231,10 +231,22 @@ const SiteHeaderComponent = MountWidget.extend( this.appEvents.on("header:show-topic", this, "setTopic"); this.appEvents.on("header:hide-topic", this, "setTopic"); + if (this.currentUser?.redesigned_user_menu_enabled) { this.appEvents.on("user-menu:rendered", this, "_animateMenu"); } + if ( + this.currentUser?.experimental_sidebar_enabled && + !this.site.mobileView + ) { + this.appEvents.on( + "sidebar:docked-state-updated", + this, + "queueRerender" + ); + } + this.dispatch("notifications:changed", "user-notifications"); this.dispatch("header:keyboard-trigger", "header"); this.dispatch("user-menu:navigation", "user-menu"); @@ -351,6 +363,17 @@ const SiteHeaderComponent = MountWidget.extend( this.appEvents.off("user-menu:rendered", this, "_animateMenu"); } + if ( + this.currentUser?.experimental_sidebar_enabled && + !this.site.mobileView + ) { + this.appEvents.off( + "sidebar:docked-state-updated", + this, + "queueRerender" + ); + } + if (this.currentUser) { this.currentUser.off("status-changed", this, "queueRerender"); } @@ -367,6 +390,7 @@ const SiteHeaderComponent = MountWidget.extend( return { topic: this._topic, canSignUp: this.canSignUp, + sidebarDocked: this.sidebarDocked, }; }, diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js index 92b1e5abd7f..2e0bfcf8167 100644 --- a/app/assets/javascripts/discourse/app/controllers/application.js +++ b/app/assets/javascripts/discourse/app/controllers/application.js @@ -50,6 +50,7 @@ export default Controller.extend({ discourseDebounce(this, this._mainOutletAnimate, 250); this.toggleProperty("showSidebar"); + this.appEvents.trigger("sidebar:docked-state-updated"); if (!this.site.mobileView) { if (this.showSidebar) { diff --git a/app/assets/javascripts/discourse/app/initializers/mobile.js b/app/assets/javascripts/discourse/app/initializers/mobile.js index c0dbaa19548..7c992005cb1 100644 --- a/app/assets/javascripts/discourse/app/initializers/mobile.js +++ b/app/assets/javascripts/discourse/app/initializers/mobile.js @@ -12,6 +12,7 @@ export default { const site = container.lookup("site:main"); site.set("mobileView", Mobile.mobileView); + site.set("desktopView", !Mobile.mobileView); site.set("isMobileDevice", Mobile.isMobileDevice); setResolverOption("mobileView", Mobile.mobileView); diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js index f26b798225a..558ab27bc11 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/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs index be32149d8d9..a599818a5e4 100644 --- a/app/assets/javascripts/discourse/app/templates/application.hbs +++ b/app/assets/javascripts/discourse/app/templates/application.hbs @@ -2,7 +2,18 @@ - + + + diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs index 0750f30782f..1a082baaf82 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs @@ -1,5 +1,6 @@
- + +
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs index ccd781ff5bc..2ab53b06dd5 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs @@ -4,7 +4,8 @@ @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}} @headerLinkTitle={{i18n "sidebar.sections.categories.header_link_title"}} @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.categories.header_action_title"))}} - @headerActionsIcon="pencil-alt" > + @headerActionsIcon="pencil-alt" + @collapsable={{@collapsable}} > {{#if (gt this.sectionLinks.length 0)}} {{#each this.sectionLinks as |sectionLink|}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs new file mode 100644 index 00000000000..62ce2ab0fb1 --- /dev/null +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs @@ -0,0 +1,30 @@ +
+
+
+ + {{i18n "about.simple_title"}} + + + {{#if this.currentUser.admin}} + + {{i18n "admin.site_settings.title"}} + + {{/if}} +
+ +
+ + + {{#if this.site.desktopView}} + + {{/if}} +
+
+
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/hamburger-dropdown.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/hamburger-dropdown.hbs new file mode 100644 index 00000000000..7a55b9013f3 --- /dev/null +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/hamburger-dropdown.hbs @@ -0,0 +1,12 @@ +
+
+
+
+
+ + +
+
+
+
+
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs index da67e0f84d0..e27bb15a612 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs @@ -6,7 +6,8 @@ @headerActions={{array (hash action=(fn (route-action "composePrivateMessage") null null))}} @headerActionsIcon="plus" @headerLinkText={{i18n "sidebar.sections.messages.header_link_text"}} - @headerLinkTitle={{i18n "sidebar.sections.messages.header_link_title"}} > + @headerLinkTitle={{i18n "sidebar.sections.messages.header_link_title"}} + @collapsable={{@collapsable}}> {{#each this.personalMessagesSectionLinks as |personalMessageSectionLink|}} {{#if personalMessageSectionLink.shouldDisplay}} @@ -21,8 +22,6 @@ {{/each}} {{#if (gt this.groupMessagesSectionLinks.length 0)}} -
- {{#each this.groupMessagesSectionLinks as |groupMessageSectionLink|}} {{#if groupMessageSectionLink.shouldDisplay}}
- + {{#if @collapsable}} + + {{/if}} {{#if @headerRoute}} - - + + {{#if this.siteSettings.tagging_enabled}} - + {{/if}} {{#if this.siteSettings.enable_personal_messages}} - + {{/if}} {{#each this.customSections as |customSection|}} @@ -18,7 +18,8 @@ @headerLinkTitle={{customSection.title}} @headerActionsIcon={{customSection.actionsIcon}} @headerActions={{customSection.actions}} - @willDestroy={{customSection.willDestroy}}> + @willDestroy={{customSection.willDestroy}} + @collapsable={{@collapsableSections}}> {{#each customSection.links as |link|}} + @headerActionsIcon="pencil-alt" + @collapsable={{@collapsable}}> {{#if (gt this.sectionLinks.length 0)}} {{#each this.sectionLinks as |sectionLink|}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs index f634f5c5c57..1eb7111759b 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs @@ -5,7 +5,8 @@ @headerLinkText={{i18n "sidebar.sections.topics.header_link_text"}} @headerLinkTitle={{i18n "sidebar.sections.topics.header_link_title"}} @headerActionsIcon="plus" - @headerActions={{array (hash action=this.composeTopic title=(i18n "sidebar.sections.topics.header_action_title"))}}> + @headerActions={{array (hash action=this.composeTopic title=(i18n "sidebar.sections.topics.header_action_title"))}} + @collapsable={{@collapsable}} > {{#each this.sectionLinks as |sectionLink|}} ` + ), + ]; + }, + + clickOutside() { + this.sendWidgetAction("toggleHamburger"); + }, +}); + createWidget("revamped-user-menu-wrapper", { buildAttributes() { return { "data-click-outside": true }; @@ -380,6 +402,10 @@ export default createWidget("header", { inTopicRoute = this.router.currentRouteName.startsWith("topic."); } + if (attrs.sidebarDocked) { + state.hamburgerVisible = false; + } + let contents = () => { const headerIcons = this.attach("header-icons", { hamburgerVisible: state.hamburgerVisible, @@ -387,6 +413,7 @@ export default createWidget("header", { searchVisible: state.searchVisible, ringBackdrop: state.ringBackdrop, flagCount: attrs.flagCount, + sidebarDocked: attrs.sidebarDocked, user: this.currentUser, }); @@ -403,7 +430,11 @@ export default createWidget("header", { }) ); } else if (state.hamburgerVisible) { - panels.push(this.attach("hamburger-menu")); + if (this.currentUser?.experimental_sidebar_enabled) { + panels.push(this.attach("revamped-hamburger-menu-wrapper", {})); + } else { + panels.push(this.attach("hamburger-menu")); + } } else if (state.userVisible) { if (this.currentUser.redesigned_user_menu_enabled) { panels.push(this.attach("revamped-user-menu-wrapper", {})); @@ -433,7 +464,6 @@ export default createWidget("header", { const contentsAttrs = { contents, minimized: !!attrs.topic, - sidebarEnabled: this.currentUser?.experimental_sidebar_enabled, }; return h( @@ -516,13 +546,20 @@ export default createWidget("header", { }, toggleHamburger() { - this.state.hamburgerVisible = !this.state.hamburgerVisible; - this.toggleBodyScrolling(this.state.hamburgerVisible); + if ( + this.currentUser?.experimental_sidebar_enabled && + this.site.mobileView + ) { + this.sendWidgetAction("toggleSidebar"); + } else { + this.state.hamburgerVisible = !this.state.hamburgerVisible; + this.toggleBodyScrolling(this.state.hamburgerVisible); - // auto focus on first link in dropdown - schedule("afterRender", () => { - document.querySelector(".hamburger-panel .menu-links a")?.focus(); - }); + // auto focus on first link in dropdown + schedule("afterRender", () => { + document.querySelector(".hamburger-panel .menu-links a")?.focus(); + }); + } }, toggleBodyScrolling(bool) { diff --git a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js b/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js deleted file mode 100644 index 35033fd4170..00000000000 --- a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js +++ /dev/null @@ -1,16 +0,0 @@ -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/app/widgets/widget.js b/app/assets/javascripts/discourse/app/widgets/widget.js index e6c378961af..d3eae837cd7 100644 --- a/app/assets/javascripts/discourse/app/widgets/widget.js +++ b/app/assets/javascripts/discourse/app/widgets/widget.js @@ -416,9 +416,11 @@ export default class Widget { if (this.clickOutside) { properties["widget-click-outside"] = new WidgetClickOutsideHook(this); } + if (this.click) { properties["widget-click"] = new WidgetClickHook(this); } + if (this.doubleClick) { properties["widget-double-click"] = new WidgetDoubleClickHook(this); } 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 bdf786da3b3..979f762b57d 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 @@ -9,6 +9,9 @@ import { query, updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; + +import { undockSidebar } from "discourse/tests/helpers/sidebar-helpers"; + import Site from "discourse/models/site"; import discoveryFixture from "discourse/tests/fixtures/discovery-fixtures"; import categoryFixture from "discourse/tests/fixtures/category-fixtures"; @@ -387,7 +390,7 @@ acceptance("Sidebar - Categories Section", function (needs) { ); }); - test("clean up topic tracking state state changed callbacks when section is destroyed", async function (assert) { + test("clean up topic tracking state state changed callbacks when Sidebar is collapsed", async function (assert) { setupUserSidebarCategories(); await visit("/"); @@ -400,12 +403,11 @@ acceptance("Sidebar - Categories Section", function (needs) { topicTrackingState.stateChangeCallbacks ).length; - await click(".header-sidebar-toggle .btn"); - await click(".header-sidebar-toggle .btn"); + await undockSidebar(); - assert.strictEqual( - Object.keys(topicTrackingState.stateChangeCallbacks).length, - initialCallbackCount + assert.ok( + Object.keys(topicTrackingState.stateChangeCallbacks).length < + initialCallbackCount ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js index e6c216b5101..ed48288e39d 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js @@ -15,7 +15,12 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) { test("clicking outside sidebar collapses it", async function (assert) { await visit("/"); - await click(".btn-sidebar-toggle"); + await click(".hamburger-dropdown"); + + assert.notOk( + exists(".sidebar-footer-actions-dock-toggle"), + "button to dock sidebar is not displayed" + ); assert.ok(exists(".sidebar-container"), "sidebar is displayed"); @@ -27,7 +32,7 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) { test("clicking on a link or button in sidebar collapses it", async function (assert) { await visit("/"); - await click(".btn-sidebar-toggle"); + await click(".hamburger-dropdown"); await click(".sidebar-section-link-tracked"); assert.ok( @@ -35,7 +40,7 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) { "sidebar is collapsed when a button in sidebar is clicked" ); - await click(".btn-sidebar-toggle"); + await click(".hamburger-dropdown"); await click(".sidebar-section-header-link"); assert.ok( @@ -47,7 +52,7 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) { test("collapsing sidebar sections does not collapse sidebar", async function (assert) { await visit("/"); - await click(".btn-sidebar-toggle"); + await click(".hamburger-dropdown"); await click(".sidebar-section-header-caret"); assert.ok( 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 567a5d1b1ea..a133492580e 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 @@ -10,6 +10,7 @@ import { import { withPluginApi } from "discourse/lib/plugin-api"; import { resetSidebarSection } from "discourse/lib/sidebar/custom-sections"; import { bind } from "discourse-common/utils/decorators"; +import { undockSidebar } from "discourse/tests/helpers/sidebar-helpers"; acceptance("Sidebar - Plugin API", function (needs) { needs.user({ experimental_sidebar_enabled: true }); @@ -338,7 +339,7 @@ acceptance("Sidebar - Plugin API", function (needs) { "displays hover button with correct title" ); - await click(".header-sidebar-toggle button"); + await undockSidebar(); 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 e548f280385..a64ed67d4fb 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 @@ -9,6 +9,9 @@ import { query, updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; + +import { undockSidebar } from "discourse/tests/helpers/sidebar-helpers"; + import discoveryFixture from "discourse/tests/fixtures/discovery-fixtures"; import { cloneJSON } from "discourse-common/lib/object"; @@ -327,12 +330,11 @@ acceptance("Sidebar - Tags section", function (needs) { topicTrackingState.stateChangeCallbacks ).length; - await click(".header-sidebar-toggle .btn"); - await click(".header-sidebar-toggle .btn"); + await undockSidebar(); - assert.strictEqual( - Object.keys(topicTrackingState.stateChangeCallbacks).length, - initialCallbackCount + assert.ok( + Object.keys(topicTrackingState.stateChangeCallbacks).length < + initialCallbackCount ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js index c324ac0e8bc..93179c42efe 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js @@ -1,6 +1,11 @@ import { test } from "qunit"; -import { click, visit } from "@ember/test-helpers"; -import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers"; +import { click, currentRouteName, visit } from "@ember/test-helpers"; +import { + acceptance, + exists, + updateCurrentUser, +} from "discourse/tests/helpers/qunit-helpers"; +import { undockSidebar } from "discourse/tests/helpers/sidebar-helpers"; acceptance("Sidebar - Anon User", function () { // Don't show sidebar for anon user until we know what we want to display @@ -34,7 +39,39 @@ acceptance("Sidebar - User with sidebar disabled", function (needs) { acceptance("Sidebar - User with sidebar enabled", function (needs) { needs.user({ experimental_sidebar_enabled: true }); - test("hiding and displaying sidebar", async function (assert) { + test("navigating to about route using sidebar", async function (assert) { + await visit("/"); + await click(".sidebar-footer-link-about"); + + assert.strictEqual(currentRouteName(), "about"); + }); + + test("viewing keyboard shortcuts using sidebar", async function (assert) { + await visit("/"); + await click(".sidebar-footer-actions-keyboard-shortcuts"); + + assert.ok( + exists("#keyboard-shortcuts-help"), + "keyboard shortcuts help is displayed" + ); + }); + + test("navigating to site setting route using sidebar", async function (assert) { + await visit("/"); + await click(".sidebar-footer-link-site-settings"); + + assert.strictEqual(currentRouteName(), "adminSiteSettingsCategory"); + }); + + test("site setting link is not shown in sidebar for non-admin user", async function (assert) { + updateCurrentUser({ admin: false }); + + await visit("/"); + + assert.notOk(exists(".sidebar-footer-link-site-settings")); + }); + + test("undocking and docking sidebar", async function (assert) { await visit("/"); assert.ok( @@ -44,17 +81,27 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) { assert.ok(exists(".sidebar-container"), "displays the sidebar by default"); - await click(".header-sidebar-toggle .btn"); + await undockSidebar(); assert.ok( !document.body.classList.contains("has-sidebar-page"), - "removes sidebar utility class to body" + "removes sidebar utility class from body" ); assert.ok(!exists(".sidebar-container"), "hides the sidebar"); - await click(".header-sidebar-toggle .btn"); + await click(".hamburger-dropdown"); - assert.ok(exists(".sidebar-container"), "displays the sidebar"); + assert.ok( + exists(".sidebar-hamburger-dropdown"), + "displays the sidebar in hamburger dropdown" + ); + + await click("button.sidebar-footer-actions-dock-toggle"); + + assert.ok( + exists(".sidebar-container"), + "displays the sidebar after docking" + ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js index 9514d3af374..f6f6e113a85 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js @@ -10,6 +10,7 @@ import { publishToMessageBus, query, } from "discourse/tests/helpers/qunit-helpers"; +import { undockSidebar } from "discourse/tests/helpers/sidebar-helpers"; import topicFixtures from "discourse/tests/fixtures/discovery-fixtures"; import { cloneJSON } from "discourse-common/lib/object"; import { withPluginApi } from "discourse/lib/plugin-api"; @@ -725,12 +726,11 @@ acceptance("Sidebar - Topics Section", function (needs) { topicTrackingState.stateChangeCallbacks ).length; - await click(".header-sidebar-toggle .btn"); - await click(".header-sidebar-toggle .btn"); + await undockSidebar(); - assert.strictEqual( - Object.keys(topicTrackingState.stateChangeCallbacks).length, - initialCallbackCount + assert.ok( + Object.keys(topicTrackingState.stateChangeCallbacks).length < + initialCallbackCount ); }); }); diff --git a/app/assets/javascripts/discourse/tests/helpers/sidebar-helpers.js b/app/assets/javascripts/discourse/tests/helpers/sidebar-helpers.js new file mode 100644 index 00000000000..95cc8adf414 --- /dev/null +++ b/app/assets/javascripts/discourse/tests/helpers/sidebar-helpers.js @@ -0,0 +1,5 @@ +import { click } from "@ember/test-helpers"; + +export async function undockSidebar() { + await click("button.sidebar-footer-actions-dock-toggle"); +} diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss index 664413282da..e804ebcd536 100644 --- a/app/assets/stylesheets/color_definitions.scss +++ b/app/assets/stylesheets/color_definitions.scss @@ -18,6 +18,7 @@ --always-black-rgb: 0, 0, 0; --primary-rgb: #{hexToRGB($primary)}; --primary-low-rgb: #{hexToRGB($primary-low)}; + --primary-very-low-rgb: #{hexToRGB($primary-very-low)}; --secondary-rgb: #{hexToRGB($secondary)}; --header_background-rgb: #{hexToRGB($header_background)}; --tertiary-rgb: #{hexToRGB($tertiary)}; diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss index 18d8625d279..ca3f8b20991 100644 --- a/app/assets/stylesheets/common/base/_index.scss +++ b/app/assets/stylesheets/common/base/_index.scss @@ -45,6 +45,7 @@ @import "share_link"; @import "shared-drafts"; @import "sidebar"; +@import "sidebar-footer"; @import "sidebar-section"; @import "sidebar-section-link"; @import "tagging"; diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 07cffbaf119..4fa48793e98 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -17,7 +17,10 @@ box-sizing: border-box; width: 100%; height: 100%; - + @media (prefers-reduced-motion: no-preference) { + transition: padding-left var(--d-sidebar-animation-time) + var(--d-sidebar-animation-ease) !important; // only works with an important... :/ + } .contents { display: flex; align-items: center; diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 93511e16027..d35e3ed0c16 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -568,3 +568,33 @@ div.menu-links-header { color: var(--primary-med-or-secondary-med); } } + +// Sidebar-hamburger hybrid + +.hamburger-menu.revamped { + .sidebar-section-wrapper { + .sidebar-section-header-button { + opacity: 1; + } + + .sidebar-section-link.active { + font-weight: normal; + color: var(--primary-high); + background: var(--tertiary-low); + } + + .sidebar-section-header-link, + .sidebar-section-header-button, + .sidebar-section-link { + &:hover { + background: var(--highlight-medium); + } + } + } + + .sidebar-footer-actions-button.btn { + &:hover { + background: var(--highlight-medium); + } + } +} diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss new file mode 100644 index 00000000000..1781df2e9d6 --- /dev/null +++ b/app/assets/stylesheets/common/base/sidebar-footer.scss @@ -0,0 +1,101 @@ +.sidebar-wrapper { + .sidebar-footer-wrapper { + .sidebar-footer-container { + margin-left: 1.5em; + margin-right: 0.15em; + } + } +} + +.sidebar-footer-wrapper { + border-top: 1.5px solid var(--primary-low); + padding: 0.5em 0 0.5em 0.33em; + + .sidebar-footer-container { + display: flex; + } + + .sidebar-footer-link { + display: inline-block; + font-size: var(--font-down-1); + color: var(--primary-high); + padding: 0.25em 0; + height: 100%; + + &:not(:first-child):before { + content: "•"; + padding: 0 0.25em; + } + } + + .sidebar-footer-actions { + margin-left: auto; + } + + .sidebar-footer-actions-button.btn { + background: transparent; + border: none; + padding: 0.25em 0.4em; + + .d-icon { + font-size: var(--font-down-1); + color: var(--primary-medium); + } + + &:hover { + background: var(--primary-low); + } + } +} + +.has-sidebar-page { + .sidebar-footer-actions-dock-toggle { + .d-icon { + transform: rotate(180deg); + top: -0.1em; // optical alignment + } + } +} + +.sidebar-footer-wrapper { + background: var(--primary-very-low); + .desktop-view & { + position: sticky; + bottom: 0; + .sidebar-footer-container { + position: relative; + &:before { + // fade to make scroll more apparent + position: absolute; + content: ""; + display: block; + height: 1.5em; + top: calc(-2em - 1px); + left: -0.5em; + right: -0.5em; + pointer-events: none; + background: linear-gradient( + to bottom, + transparent 0%, + rgba(var(--primary-very-low-rgb), 100%) + ); + } + } + } +} + +.hamburger-menu.revamped { + .sidebar-footer-wrapper { + background: var(--secondary); + .sidebar-footer-container { + &:before { + // fade to make scroll more apparent + background: linear-gradient( + to bottom, + transparent 0%, + rgba(var(--secondary-rgb), 100%) + ); + } + } + } +} diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 0bcfd848787..353140f6841 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -3,6 +3,7 @@ align-items: center; .sidebar-section-link { + box-sizing: border-box; display: inline-flex; width: 100%; align-items: center; diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index ce4f597a49d..4a4018d12c7 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -49,9 +49,12 @@ background: none; border: none; padding: 0.25em 0.5em; + opacity: 0; + transition: opacity 0.25s; + transition-delay: 0.5s; .d-icon { - font-size: $font-down-1; + font-size: var(--font-down-1); color: var(--primary-medium); } @@ -92,6 +95,9 @@ opacity: 0; transition: opacity 0.25s; transition-delay: 0.5s; + .d-icon { + top: -0.1em; // visual alignment + } .discourse-no-touch & { &:hover { svg { diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index f8b688ffce4..66666869d09 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -4,46 +4,6 @@ --d-sidebar-animation-ease: ease-in-out; } -.header-sidebar-toggle { - --toggle-padding: 0.5em; - margin-right: 0.75em; - // extending the toggle beyond the page when space allows - // for better logo alignment with content - @media screen and (min-width: 1380px) { - margin-left: -3.5em; - } - - // align on icon, because button is transparent - @media screen and (max-width: 1480px) { - margin-left: calc(var(--toggle-padding) * -1.3); - } - - // prevents toggle overflow on smaller screens - @media screen and (max-width: 1379px) { - :not(.mobile-view) .has-sidebar-page & { - margin-left: initial; - } - } - - transition: margin var(--d-sidebar-animation-speed) - var(--d-sidebar-animation-ease); - - button { - position: relative; - font-size: var(--font-up-2); - padding: var(--toggle-padding); - - .discourse-no-touch & { - &:hover { - background: var(--primary-low); - .d-icon { - color: var(--primary-medium); - } - } - } - } -} - #main-outlet-wrapper { .sidebar-wrapper { grid-area: sidebar; @@ -53,8 +13,8 @@ align-self: start; overflow-y: auto; background-color: var(--primary-very-low); - .discourse-touch &, &:hover { + .sidebar-section-header-button, .sidebar-section-header-caret { opacity: 1; transition-delay: 0s; @@ -63,10 +23,12 @@ } .sidebar-container { + display: flex; + flex-direction: column; box-sizing: border-box; height: 100%; width: var(--d-sidebar-width); - padding: 1em 0; + padding: 1em 0 0; overflow-x: hidden; overflow-y: auto; @@ -99,10 +61,13 @@ .sidebar-scroll-wrap { // limit the wrapper width, so when the scrollbar is added the content doesn't shift max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth)); + box-sizing: border-box; + flex: 1; + display: flex; + flex-direction: column; } - .sidebar-toggle { - display: flex; - justify-content: flex-end; + .sidebar-sections { + flex: 1; } } diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 20f571f4b7e..98a0525d8dc 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -193,7 +193,7 @@ body.has-sidebar-page { max-width: calc(var(--d-sidebar-width) + var(--d-max-width)); } .d-header .wrap { - padding-left: 0; + padding-left: 1.85em; } #main-outlet-wrapper { grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr); @@ -202,16 +202,18 @@ body.has-sidebar-page { } } -body.sidebar-animate { - #main-outlet-wrapper { - // grid-template-columns transition supported in Firefox, Chrome support coming summer 2022 - transition-property: grid-template-columns, max-width; - transition-timing-function: var(--d-sidebar-animation-ease); - transition-duration: var(--d-sidebar-animation-time); - } +@media (prefers-reduced-motion: no-preference) { + body.sidebar-animate { + #main-outlet-wrapper { + // grid-template-columns transition supported in Firefox, Chrome support coming summer 2022 + transition-property: grid-template-columns, max-width; + transition-timing-function: var(--d-sidebar-animation-ease); + transition-duration: var(--d-sidebar-animation-time); + } - .d-header-wrap .wrap { - transition: max-width var(--d-sidebar-animation-time) - var(--d-sidebar-animation-ease); + .d-header-wrap .wrap { + transition: max-width var(--d-sidebar-animation-time) + var(--d-sidebar-animation-ease); + } } } diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index 8f4aadfbf60..1af398ad3db 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/app/assets/stylesheets/mobile/discourse.scss @@ -143,15 +143,19 @@ blockquote { // Sidebar styles -.sidebar-wrapper { - width: 0; - transition: width 0.2s ease-in-out; - z-index: z("modal", "content"); -} - #main-outlet-wrapper { - grid-template-columns: 0 minmax(0, 100vw); + grid-template-columns: minmax(0, 100vw); + grid-template-areas: "content"; gap: 0; + + .sidebar-wrapper { + width: 0; + transition: width 0.2s ease-in-out; + z-index: z("modal", "content"); + grid-area: content; + justify-self: end; + } + .sidebar-container { padding-bottom: 6.6em; // extra space to watch out for navbar } @@ -166,10 +170,11 @@ body.has-sidebar-page { z-index: z("modal", "content") + 1; } - .sidebar-wrapper { - width: var(--d-sidebar-width); - grid-area: content; - margin-left: -10px; // compensate for main-outlet-wrapper padding + #main-outlet-wrapper { + .sidebar-wrapper { + width: var(--d-sidebar-width); + margin-right: -10px; // compensate for main-outlet-wrapper padding + } } #main-outlet { diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss index 18296fc574d..fd3cffe0bab 100644 --- a/app/assets/stylesheets/mobile/sidebar.scss +++ b/app/assets/stylesheets/mobile/sidebar.scss @@ -10,3 +10,9 @@ font-size: var(--font-0); } } + +.sidebar-wrapper .sidebar-footer-wrapper .sidebar-footer-container { + margin-top: 0.5em; + margin-right: 0; + padding-left: 0.25em; +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index c37c917c9dc..8339ad73ba9 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -3735,6 +3735,7 @@ en: shortcut_delimiter_slash: "%{shortcut1}/%{shortcut2}" shortcut_delimiter_space: "%{shortcut1} %{shortcut2}" title: "Keyboard Shortcuts" + short_title: "Shortcuts" jump_to: title: "Jump To" home: "%{shortcut} Home" diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb index c4a07f02c15..bd8c105ebb4 100644 --- a/lib/svg_sprite.rb +++ b/lib/svg_sprite.rb @@ -141,6 +141,7 @@ module SvgSprite "info-circle", "italic", "key", + "keyboard", "layer-group", "link", "list",