Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/routes/application.js
View File

@ -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")

0
app/assets/javascripts/discourse/app/templates/components/sidebar/header-sidebar-toggle.hbs Normal file
View File

7
app/assets/javascripts/discourse/app/widgets/header-contents.js
View File

@ -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}}

8
app/assets/javascripts/discourse/app/widgets/header.js
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);
}
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) {

16
app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js Normal file
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",
}),
];
},
});

2
app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js
View File

@ -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 <

2
app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js
View File

@ -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 <

2
app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
View File

@ -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,

2
app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js
View File

@ -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 <

8
app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
View File

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

25
app/assets/stylesheets/common/base/header.scss
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 {
background-color: var(--highlight-medium);
}