UX: add left sidebar toggle when sidebar enabled (#17831)
This commit is contained in:
parent
151c7b5b4f
commit
424e968538
|
@ -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")
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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",
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
});
|
|
@ -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 <
|
||||||
|
|
|
@ -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 <
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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 <
|
||||||
|
|
|
@ -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");
|
||||||
});
|
});
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue