DEV: remove old and experimental user menu styles (#21326)
This commit is contained in:
Kris
GitHub
parent
1b2a1c94d4
commit
8caa58acf2
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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 {
|
.empty-state {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
@import "login";
|
@import "login";
|
||||||
@import "menu-panel";
|
@import "menu-panel";
|
||||||
@import "modal";
|
@import "modal";
|
||||||
@import "new-user";
|
|
||||||
@import "topic-list";
|
@import "topic-list";
|
||||||
@import "topic-post";
|
@import "topic-post";
|
||||||
@import "topic";
|
@import "topic";
|
||||||
|
|
|
||||||
|
|
@ -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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -88,6 +88,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-content {
|
.user-content {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 2em;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
|
|
@ -251,9 +253,6 @@ table.user-invite-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-preferences {
|
.user-preferences {
|
||||||
padding-top: 10px;
|
|
||||||
padding-left: 30px;
|
|
||||||
|
|
||||||
.form-vertical {
|
.form-vertical {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,4 @@
|
||||||
.new-user-wrapper {
|
.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-messages-page & {
|
||||||
.user-navigation-secondary {
|
.user-navigation-secondary {
|
||||||
display: grid;
|
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 {
|
.new-user-content-wrapper {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue