Revert "DEV: First desktop design interface pass at experimental sidebar (#16590)" (#16646)

This reverts commit 36dcf80aff.
This commit is contained in:
Alan Guo Xiang Tan 2022-05-05 11:56:24 +08:00 committed by GitHub
parent 0328757ffb
commit aa5d90a554
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 17 additions and 187 deletions

View File

@ -1,3 +0,0 @@
import GlimmerComponent from "discourse/components/glimmer";
export default class Sidebar extends GlimmerComponent {}

View File

@ -6,12 +6,6 @@ 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() {

View File

@ -37,10 +37,6 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
});
},
toggleSidebar() {
this.controllerFor("application").toggleProperty("showSidebar");
},
toggleMobileView() {
mobile.toggleMobileView();
},

View File

@ -8,19 +8,12 @@
showKeyboard=(route-action "showKeyboardShortcutsHelp")
toggleMobileView=(route-action "toggleMobileView")
toggleAnonymous=(route-action "toggleAnonymous")
logout=(route-action "logout")
toggleSidebar=(route-action "toggleSidebar")
}}
logout=(route-action "logout")}}
{{software-update-prompt}}
{{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
<div id="main-outlet-wrapper" class="wrap {{mainOutletWrapperClasses}}" role="main">
{{#if currentUser.experimental_sidebar_enabled}}
<Sidebar @shouldDisplay={{showSidebar}} />
{{/if}}
<div id="main-outlet">
<div id="main-outlet" class="wrap" role="main">
{{plugin-outlet name="above-main-container" connectorTagName="div"}}
<div class="container" id="main-container">
{{#if showTop}}
@ -36,7 +29,6 @@
{{outlet}}
{{outlet "user-card"}}
</div>
</div>
{{plugin-outlet name="above-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}
{{#if showFooter}}

View File

@ -1,6 +0,0 @@
{{#if @shouldDisplay}}
<div class="sidebar-wrapper">
<div class="sidebar-container">
</div>
</div>
{{/if}}

View File

@ -4,9 +4,6 @@ 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}}

View File

@ -400,12 +400,7 @@ export default createWidget("header", {
return panels;
};
let contentsAttrs = {
contents,
minimized: !!attrs.topic,
sidebarEnabled: this.currentUser?.experimental_sidebar_enabled,
};
let contentsAttrs = { contents, minimized: !!attrs.topic };
return h(
"div.wrap",
this.attach("header-contents", Object.assign({}, attrs, contentsAttrs))

View File

@ -1,16 +0,0 @@
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",
}),
];
},
});

View File

@ -1,65 +0,0 @@
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");
}
);
});

View File

@ -44,7 +44,6 @@
@import "search";
@import "share_link";
@import "shared-drafts";
@import "sidebar";
@import "tagging";
@import "tooltip";
@import "topic-admin-menu";

View File

@ -651,7 +651,6 @@ table {
#main-outlet {
padding-top: 2.5em;
grid-area: content;
}
#main {

View File

@ -14,6 +14,7 @@
backface-visibility: hidden; /** do magic for scrolling performance **/
> .wrap {
box-sizing: border-box;
width: 100%;
height: 100%;

View File

@ -1,40 +0,0 @@
.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);
}
}
}
}
}
.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;
}

View File

@ -182,16 +182,3 @@ 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;
}
}