DEV: remove old and experimental user menu styles ()

This commit is contained in:
Kris 2023-05-02 15:07:42 -04:00 committed by GitHub
parent 1b2a1c94d4
commit 8caa58acf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 2 additions and 297 deletions
app/assets
javascripts/discourse/app/components
stylesheets

View File

@ -1,46 +0,0 @@
import I18n from "I18n";
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
import { action } from "@ember/object";
import { next } from "@ember/runloop";
import { bind } from "discourse-common/utils/decorators";
import { DROPDOWN_BUTTON_CSS_CLASS } from "discourse/components/user-nav/dropdown-list";
export default class UserNav extends Component {
@service currentUser;
@service site;
@service router;
get draftLabel() {
const count = this.currentUser.draft_count;
return count > 0
? I18n.t("drafts.label_with_count", { count })
: I18n.t("drafts.label");
}
@bind
_handleClickEvent(event) {
if (!event.target.closest(`.${DROPDOWN_BUTTON_CSS_CLASS}`)) {
next(() => {
this.args.toggleUserNav();
});
}
}
@action
registerClickListener(element) {
if (this.site.mobileView) {
element.addEventListener("click", this._handleClickEvent);
}
}
@action
unregisterClickListener(element) {
if (this.site.mobileView) {
element.removeEventListener("click", this._handleClickEvent);
}
}
}

View File

@ -1,24 +0,0 @@
<li class={{concat @class " user-nav-dropdown-list-item"}}>
<button
type="button"
class={{this.buttonClass}}
{{on "click" this.toggleList}}
>
{{d-icon @icon}}
<span>{{@text}}</span>
{{d-icon this.chevron class="user-nav-dropdown-chevron"}}
</button>
{{#if (and (has-block "submenu") this.displayList)}}
<div
class="user-nav-dropdown-submenu-wrapper"
{{did-insert this.registerClickListener}}
{{will-destroy this.deregisterClickListener}}
>
<ul class={{concat @submenuClass " user-nav-dropdown-submenu"}}>
{{yield to="submenu"}}
</ul>
</div>
{{/if}}
</li>

View File

@ -1,58 +0,0 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { tracked } from "@glimmer/tracking";
import { bind } from "discourse-common/utils/decorators";
export const DROPDOWN_BUTTON_CSS_CLASS = "user-nav-dropdown-button";
export default class UserNavDropdownList extends Component {
@service site;
@tracked displayList = this.site.mobileView && this.args.isActive;
get chevron() {
return this.displayList ? "chevron-up" : "chevron-down";
}
get defaultButtonClass() {
return DROPDOWN_BUTTON_CSS_CLASS;
}
get buttonClass() {
const props = [this.defaultButtonClass];
if (this.args.isActive) {
props.push("active");
}
return props.join(" ");
}
@action
toggleList() {
this.displayList = !this.displayList;
}
@bind
collapseList(e) {
const isClickOnButton = e.composedPath().some((element) => {
if (element?.classList?.contains(this.defaultButtonClass)) {
return true;
}
});
if (!isClickOnButton) {
this.displayList = false;
}
}
@action
registerClickListener() {
document.addEventListener("click", this.collapseList);
}
@action
deregisterClickListener() {
document.removeEventListener("click", this.collapseList);
}
}

View File

@ -158,40 +158,6 @@
}
}
.user-nav-dropdown-button {
background: transparent;
}
.user-nav-dropdown-submenu {
background: var(--secondary);
list-style-type: none;
margin: 0;
li a {
padding: 0.5em 1em;
color: var(--primary);
.discourse-no-touch & {
&:hover {
background: var(--highlight-bg);
color: currentColor;
}
}
&.active {
background: var(--tertiary-low);
color: currentColor;
}
&:first-of-type {
padding-top: 0.5em;
}
&:last-of-type {
padding-bottom: 0.5em;
}
}
}
.empty-state {
padding: 0;
margin: 1em 0;

View File

@ -11,7 +11,6 @@
@import "login";
@import "menu-panel";
@import "modal";
@import "new-user";
@import "topic-list";
@import "topic-post";
@import "topic";

View File

@ -1,69 +0,0 @@
.new-user-wrapper {
.new-user-content-wrapper {
// Grid layout
width: 100%;
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: auto 1fr;
grid-gap: 0;
.user-navigation-secondary {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: flex;
flex-direction: row;
}
.user-navigation-secondary ~ .user-content {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.user-content {
padding: 0;
margin-top: 2em;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.user-additional-controls {
align-self: start;
justify-self: start;
grid-row-start: 2;
}
// For backwards compatibility with legacy design
.user-secondary-navigation {
margin-top: 2em;
grid-column-start: 1;
grid-column-end: 2;
}
// For backwards compatibility with legacy design
.user-secondary-navigation ~ .user-content {
min-width: 100%;
grid-column-start: 2;
grid-column-end: 3;
}
}
.user-nav-dropdown-list-item {
position: relative;
}
.user-nav-dropdown-submenu-wrapper {
position: absolute;
top: 2em;
min-width: 10em;
padding: 0;
box-shadow: shadow("dropdown");
z-index: z("dropdown");
}
}

View File

@ -88,6 +88,8 @@
}
.user-content {
padding: 0;
margin-top: 2em;
padding-bottom: 12px;
margin-bottom: 12px;
background-color: var(--secondary);
@ -251,9 +253,6 @@ table.user-invite-list {
}
.user-preferences {
padding-top: 10px;
padding-left: 30px;
.form-vertical {
width: 500px;
max-width: 100%;

View File

@ -1,33 +1,4 @@
.new-user-wrapper {
.user-navigation {
width: 100%;
.nav-pills {
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
// For backwards compatibility with legacy design
.user-secondary-navigation {
margin-top: 1.5em;
}
.user-navigation-secondary {
font-size: var(--font-up-1);
.nav-pills {
flex-wrap: nowrap;
li {
flex: 1 0 auto;
}
}
}
.user-messages-page & {
.user-navigation-secondary {
display: grid;
@ -83,39 +54,6 @@
}
}
}
.user-nav-dropdown-list-item {
flex-direction: column;
}
.user-nav-dropdown-chevron {
margin-left: auto;
}
.user-nav-dropdown-button {
width: 100%;
}
.user-nav-dropdown-submenu {
box-sizing: border-box;
position: relative;
top: 0;
box-shadow: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
padding: 0.5em 0 1em 1.65em;
li a {
box-sizing: border-box;
padding: 0.75em 1em;
width: 100%;
@include ellipsis;
}
}
#navigation-bar {
flex-wrap: nowrap;
}
}
.new-user-content-wrapper {