DEV: remove old and experimental user menu styles (#21326)
This commit is contained in:
parent
1b2a1c94d4
commit
8caa58acf2
app/assets
javascripts/discourse/app/components
stylesheets
|
@ -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 {
|
||||
padding: 0;
|
||||
margin: 1em 0;
|
||||
|
|
|
@ -11,7 +11,6 @@
|
|||
@import "login";
|
||||
@import "menu-panel";
|
||||
@import "modal";
|
||||
@import "new-user";
|
||||
@import "topic-list";
|
||||
@import "topic-post";
|
||||
@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 {
|
||||
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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue