DEV: First desktop design interface pass at experimental sidebar take 2. (#16647)
This commit is contained in:
Alan Guo Xiang Tan
GitHub
parent
aa5d90a554
commit
b35cf7cc0c
|
|
@ -0,0 +1,3 @@
|
|||
import GlimmerComponent from "discourse/components/glimmer";
|
||||
|
||||
export default class Sidebar extends GlimmerComponent {}
|
||||
|
|
@ -6,6 +6,12 @@ export default Controller.extend({
|
|||
showTop: true,
|
||||
showFooter: false,
|
||||
router: service(),
|
||||
showSidebar: true,
|
||||
|
||||
@discourseComputed("showSidebar", "currentUser.experimental_sidebar_enabled")
|
||||
mainOutletWrapperClasses(showSidebar, experimentalSidebarEnabled) {
|
||||
return showSidebar && experimentalSidebarEnabled ? "has-sidebar" : "";
|
||||
},
|
||||
|
||||
@discourseComputed
|
||||
canSignUp() {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
|
|||
});
|
||||
},
|
||||
|
||||
toggleSidebar() {
|
||||
this.controllerFor("application").toggleProperty("showSidebar");
|
||||
},
|
||||
|
||||
toggleMobileView() {
|
||||
mobile.toggleMobileView();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,26 +8,34 @@
|
|||
showKeyboard=(route-action "showKeyboardShortcutsHelp")
|
||||
toggleMobileView=(route-action "toggleMobileView")
|
||||
toggleAnonymous=(route-action "toggleAnonymous")
|
||||
logout=(route-action "logout")}}
|
||||
logout=(route-action "logout")
|
||||
toggleSidebar=(route-action "toggleSidebar")
|
||||
}}
|
||||
{{software-update-prompt}}
|
||||
|
||||
{{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
|
||||
|
||||
<div id="main-outlet" class="wrap" role="main">
|
||||
{{plugin-outlet name="above-main-container" connectorTagName="div"}}
|
||||
<div class="container" id="main-container">
|
||||
{{#if showTop}}
|
||||
{{custom-html name="top"}}
|
||||
{{/if}}
|
||||
{{notification-consent-banner}}
|
||||
{{pwa-install-banner}}
|
||||
{{global-notice}}
|
||||
{{create-topics-notice}}
|
||||
{{plugin-outlet name="top-notices" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
|
||||
</div>
|
||||
<div id="main-outlet-wrapper" class="wrap {{mainOutletWrapperClasses}}" role="main">
|
||||
{{#if currentUser.experimental_sidebar_enabled}}
|
||||
<Sidebar @shouldDisplay={{showSidebar}} />
|
||||
{{/if}}
|
||||
|
||||
{{outlet}}
|
||||
{{outlet "user-card"}}
|
||||
<div id="main-outlet">
|
||||
{{plugin-outlet name="above-main-container" connectorTagName="div"}}
|
||||
<div class="container" id="main-container">
|
||||
{{#if showTop}}
|
||||
{{custom-html name="top"}}
|
||||
{{/if}}
|
||||
{{notification-consent-banner}}
|
||||
{{pwa-install-banner}}
|
||||
{{global-notice}}
|
||||
{{create-topics-notice}}
|
||||
{{plugin-outlet name="top-notices" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
|
||||
</div>
|
||||
|
||||
{{outlet}}
|
||||
{{outlet "user-card"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{plugin-outlet name="above-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
{{#if @shouldDisplay}}
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-container">
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -4,6 +4,9 @@ import hbs from "discourse/widgets/hbs-compiler";
|
|||
createWidget("header-contents", {
|
||||
tagName: "div.contents.clearfix",
|
||||
template: hbs`
|
||||
{{#if attrs.sidebarEnabled}}
|
||||
{{sidebar-toggle attrs=attrs}}
|
||||
{{/if}}
|
||||
{{home-logo attrs=attrs}}
|
||||
{{#if attrs.topic}}
|
||||
{{header-topic-info attrs=attrs}}
|
||||
|
|
|
|||
|
|
@ -400,7 +400,12 @@ export default createWidget("header", {
|
|||
return panels;
|
||||
};
|
||||
|
||||
let contentsAttrs = { contents, minimized: !!attrs.topic };
|
||||
const contentsAttrs = {
|
||||
contents,
|
||||
minimized: !!attrs.topic,
|
||||
sidebarEnabled: this.currentUser?.experimental_sidebar_enabled,
|
||||
};
|
||||
|
||||
return h(
|
||||
"div.wrap",
|
||||
this.attach("header-contents", Object.assign({}, attrs, contentsAttrs))
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { click, visit } from "@ember/test-helpers";
|
||||
import {
|
||||
acceptance,
|
||||
conditionalTest,
|
||||
exists,
|
||||
} from "discourse/tests/helpers/qunit-helpers";
|
||||
import { test } from "qunit";
|
||||
import { isLegacyEmber } from "discourse-common/config/environment";
|
||||
|
||||
acceptance("Sidebar - Anon User", function () {
|
||||
// Don't show sidebar for anon user until we know what we want to display
|
||||
test("sidebar is not displayed", async function (assert) {
|
||||
await visit("/");
|
||||
|
||||
assert.ok(!exists("#main-outlet-wrapper.has-sidebar"));
|
||||
assert.ok(!exists(".sidebar-wrapper"));
|
||||
});
|
||||
});
|
||||
|
||||
acceptance("Sidebar - User with sidebar disabled", function (needs) {
|
||||
needs.user({ experimental_sidebar_enabled: false });
|
||||
|
||||
conditionalTest(
|
||||
"sidebar is not displayed",
|
||||
!isLegacyEmber(),
|
||||
async function (assert) {
|
||||
await visit("/");
|
||||
|
||||
assert.ok(!exists("#main-outlet-wrapper.has-sidebar"));
|
||||
assert.ok(!exists(".sidebar-wrapper"));
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
acceptance("Sidebar - User with sidebar enabled", function (needs) {
|
||||
needs.user({ experimental_sidebar_enabled: true });
|
||||
|
||||
conditionalTest(
|
||||
"hiding and displaying sidebar",
|
||||
!isLegacyEmber(),
|
||||
async function (assert) {
|
||||
await visit("/");
|
||||
|
||||
assert.ok(
|
||||
exists("#main-outlet-wrapper.has-sidebar"),
|
||||
"adds sidebar utility class on main outlet wrapper"
|
||||
);
|
||||
|
||||
assert.ok(exists(".sidebar-wrapper"), "displays the sidebar by default");
|
||||
|
||||
await click(".header-sidebar-toggle .btn");
|
||||
|
||||
assert.ok(
|
||||
!exists("#main-outlet-wrapper.has-sidebar"),
|
||||
"removes sidebar utility class from main outlet wrapper"
|
||||
);
|
||||
|
||||
assert.ok(!exists(".sidebar-wrapper"), "hides the sidebar");
|
||||
|
||||
await click(".header-sidebar-toggle .btn");
|
||||
|
||||
assert.ok(exists(".sidebar-wrapper"), "displays the sidebar");
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
@import "search";
|
||||
@import "share_link";
|
||||
@import "shared-drafts";
|
||||
@import "sidebar";
|
||||
@import "tagging";
|
||||
@import "tooltip";
|
||||
@import "topic-admin-menu";
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
backface-visibility: hidden; /** do magic for scrolling performance **/
|
||||
|
||||
> .wrap {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
.header-sidebar-toggle {
|
||||
margin-right: 1em;
|
||||
margin-left: -10px;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
font-size: var(--font-up-2);
|
||||
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
.sidebar-wrapper {
|
||||
grid-area: sidebar;
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
height: calc(100vh - var(--header-offset));
|
||||
align-self: start;
|
||||
overflow-y: auto;
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
@ -182,3 +182,20 @@ input {
|
|||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
display: grid;
|
||||
grid-template-areas: "content";
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
|
||||
&.has-sidebar {
|
||||
grid-template-areas: "sidebar content";
|
||||
grid-template-columns: 240px 1fr;
|
||||
gap: 0 2em;
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
grid-area: content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue