IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 11:20:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Move sidebar utility class to body tag (#17259)

Browse Source
This commit is contained in:
Alan Guo Xiang Tan 2022-06-28 23:32:06 +08:00 committed by GitHub
parent 4821d44c3c
commit 836b5300fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/controllers/application.js
View File

@ -8,11 +8,6 @@ export default Controller.extend({
router: service(), router: service(),
showSidebar: true, showSidebar: true,
@discourseComputed("showSidebar", "currentUser.experimental_sidebar_enabled")
mainOutletWrapperClasses(showSidebar, experimentalSidebarEnabled) {
return showSidebar && experimentalSidebarEnabled ? "has-sidebar" : "";
},
@discourseComputed @discourseComputed
canSignUp() { canSignUp() {
return ( return (

6
app/assets/javascripts/discourse/app/templates/application.hbs
View File

@ -15,9 +15,9 @@
{{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}} {{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
<div id="main-outlet-wrapper" class="wrap {{mainOutletWrapperClasses}}" role="main"> <div id="main-outlet-wrapper" class="wrap" role="main">
{{#if currentUser.experimental_sidebar_enabled}} {{#if (and currentUser.experimental_sidebar_enabled showSidebar)}}
<Sidebar @shouldDisplay={{showSidebar}} /> <Sidebar />
{{/if}} {{/if}}
<div id="main-outlet"> <div id="main-outlet">

24
app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
View File

@ -1,16 +1,14 @@
{{#if @shouldDisplay}} {{#d-section pageClass="has-sidebar" class="sidebar-wrapper"}}
<div class="sidebar-wrapper"> <div class="sidebar-container">
<div class="sidebar-container"> <Sidebar::TopicsSection />
<Sidebar::TopicsSection /> <Sidebar::CategoriesSection />
<Sidebar::CategoriesSection />
{{#if this.siteSettings.tagging_enabled}} {{#if this.siteSettings.tagging_enabled}}
<Sidebar::TagsSection /> <Sidebar::TagsSection />
{{/if}} {{/if}}
{{#if this.siteSettings.enable_personal_messages}} {{#if this.siteSettings.enable_personal_messages}}
<Sidebar::MessagesSection /> <Sidebar::MessagesSection />
{{/if}} {{/if}}
</div>
</div> </div>
{{/if}} {{/d-section}}

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

@ -8,7 +8,12 @@ acceptance("Sidebar - Anon User", function () {
test("sidebar is not displayed", async function (assert) { test("sidebar is not displayed", async function (assert) {
await visit("/"); await visit("/");
assert.ok(!exists("#main-outlet-wrapper.has-sidebar")); assert.strictEqual(
document.querySelectorAll("body.has-sidebar-page").length,
0,
"does not add sidebar utility class to body"
);
assert.ok(!exists(".sidebar-wrapper")); assert.ok(!exists(".sidebar-wrapper"));
}); });
}); });
@ -19,7 +24,12 @@ acceptance("Sidebar - User with sidebar disabled", function (needs) {
test("sidebar is not displayed", async function (assert) { test("sidebar is not displayed", async function (assert) {
await visit("/"); await visit("/");
assert.ok(!exists("#main-outlet-wrapper.has-sidebar")); assert.strictEqual(
document.querySelectorAll("body.has-sidebar-page").length,
0,
"does not add sidebar utility class to body"
);
assert.ok(!exists(".sidebar-wrapper")); assert.ok(!exists(".sidebar-wrapper"));
}); });
}); });
@ -30,18 +40,20 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) {
test("hiding and displaying sidebar", async function (assert) { test("hiding and displaying sidebar", async function (assert) {
await visit("/"); await visit("/");
assert.ok( assert.strictEqual(
exists("#main-outlet-wrapper.has-sidebar"), document.querySelectorAll("body.has-sidebar-page").length,
"adds sidebar utility class on main outlet wrapper" 1,
"adds sidebar utility class to body"
); );
assert.ok(exists(".sidebar-wrapper"), "displays the sidebar by default"); assert.ok(exists(".sidebar-wrapper"), "displays the sidebar by default");
await click(".header-sidebar-toggle .btn"); await click(".header-sidebar-toggle .btn");
assert.ok( assert.strictEqual(
!exists("#main-outlet-wrapper.has-sidebar"), document.querySelectorAll("body.has-sidebar-page").length,
"removes sidebar utility class from main outlet wrapper" 0,
"removes sidebar utility class to body"
); );
assert.ok(!exists(".sidebar-wrapper"), "hides the sidebar"); assert.ok(!exists(".sidebar-wrapper"), "hides the sidebar");

12
app/assets/stylesheets/desktop/discourse.scss
View File

@ -191,13 +191,13 @@ input {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
gap: 0; gap: 0;
&.has-sidebar {
grid-template-areas: "sidebar content";
grid-template-columns: 240px 1fr;
gap: 0 2em;
}
#main-outlet { #main-outlet {
grid-area: content; grid-area: content;
} }
} }
body.has-sidebar-page #main-outlet-wrapper {
grid-template-areas: "sidebar content";
grid-template-columns: 240px 1fr;
gap: 0 2em;
}