UX: add left sidebar toggle when sidebar enabled (#17831)

This commit is contained in:
Kris 2022-08-09 22:12:35 -04:00 committed by GitHub
parent 151c7b5b4f
commit 424e968538
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 69 additions and 9 deletions

View File

@ -51,6 +51,10 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
mobile.toggleMobileView(); mobile.toggleMobileView();
}, },
toggleSidebar() {
this.controllerFor("application").send("toggleSidebar");
},
logout: unlessReadOnly( logout: unlessReadOnly(
"_handleLogout", "_handleLogout",
I18n.t("read_only_mode.logout_disabled") I18n.t("read_only_mode.logout_disabled")

View File

@ -4,6 +4,13 @@ import hbs from "discourse/widgets/hbs-compiler";
createWidget("header-contents", { createWidget("header-contents", {
tagName: "div.contents.clearfix", tagName: "div.contents.clearfix",
template: hbs` 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}} {{home-logo attrs=attrs}}
{{#if attrs.topic}} {{#if attrs.topic}}
{{header-topic-info attrs=attrs}} {{header-topic-info attrs=attrs}}

View File

@ -307,7 +307,14 @@ createWidget("header-icons", {
}, },
}); });
if (
!this.siteSettings.enable_experimental_sidebar_hamburger ||
(this.siteSettings.enable_experimental_sidebar_hamburger &&
!attrs.sidebarEnabled) ||
this.site.mobileView
) {
icons.push(hamburger); icons.push(hamburger);
}
if (attrs.user) { if (attrs.user) {
icons.push( icons.push(
@ -446,6 +453,7 @@ export default createWidget("header", {
ringBackdrop: state.ringBackdrop, ringBackdrop: state.ringBackdrop,
flagCount: attrs.flagCount, flagCount: attrs.flagCount,
user: this.currentUser, user: this.currentUser,
sidebarEnabled: attrs.sidebarEnabled,
}); });
if (attrs.onlyIcons) { if (attrs.onlyIcons) {

View File

@ -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",
}),
];
},
});

View File

@ -398,7 +398,7 @@ acceptance("Sidebar - Categories Section", function (needs) {
topicTrackingState.stateChangeCallbacks topicTrackingState.stateChangeCallbacks
).length; ).length;
await click(".hamburger-dropdown"); await click(".btn-sidebar-toggle");
assert.ok( assert.ok(
Object.keys(topicTrackingState.stateChangeCallbacks).length < Object.keys(topicTrackingState.stateChangeCallbacks).length <

View File

@ -930,7 +930,7 @@ acceptance("Sidebar - Community Section", function (needs) {
topicTrackingState.stateChangeCallbacks topicTrackingState.stateChangeCallbacks
).length; ).length;
await click(".hamburger-dropdown"); await click(".btn-sidebar-toggle");
assert.ok( assert.ok(
Object.keys(topicTrackingState.stateChangeCallbacks).length < Object.keys(topicTrackingState.stateChangeCallbacks).length <

View File

@ -344,7 +344,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
"displays hover button with correct title" "displays hover button with correct title"
); );
await click(".hamburger-dropdown"); await click(".btn-sidebar-toggle");
assert.strictEqual( assert.strictEqual(
linkDestroy, linkDestroy,

View File

@ -326,7 +326,7 @@ acceptance("Sidebar - Tags section", function (needs) {
topicTrackingState.stateChangeCallbacks topicTrackingState.stateChangeCallbacks
).length; ).length;
await click(".hamburger-dropdown"); await click(".btn-sidebar-toggle");
assert.ok( assert.ok(
Object.keys(topicTrackingState.stateChangeCallbacks).length < Object.keys(topicTrackingState.stateChangeCallbacks).length <

View File

@ -68,7 +68,7 @@ acceptance(
assert.ok(exists(".sidebar-container"), "sidebar is displayed"); assert.ok(exists(".sidebar-container"), "sidebar is displayed");
await click(".hamburger-dropdown"); await click(".btn-sidebar-toggle");
assert.notOk( assert.notOk(
exists(".sidebar-hamburger-dropdown"), exists(".sidebar-hamburger-dropdown"),
@ -77,7 +77,7 @@ acceptance(
assert.notOk(exists(".sidebar-container"), "sidebar is hidden"); 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"); assert.ok(exists(".sidebar-container"), "sidebar is displayed");
}); });
@ -137,7 +137,7 @@ acceptance(
"displays the sidebar by default" "displays the sidebar by default"
); );
await click(".hamburger-dropdown"); await click(".btn-sidebar-toggle");
assert.ok( assert.ok(
!document.body.classList.contains("has-sidebar-page"), !document.body.classList.contains("has-sidebar-page"),
@ -146,7 +146,7 @@ acceptance(
assert.ok(!exists(".sidebar-container"), "hides the sidebar"); 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"); assert.ok(exists(".sidebar-container"), "displays the sidebar");
}); });

View File

@ -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 { .highlight-strong {
background-color: var(--highlight-medium); background-color: var(--highlight-medium);
} }