From 8caa58acf2520ed80e41adfc1d8b54364218641d Mon Sep 17 00:00:00 2001 From: Kris Date: Tue, 2 May 2023 15:07:42 -0400 Subject: [PATCH] DEV: remove old and experimental user menu styles (#21326) --- .../discourse/app/components/user-nav.js | 46 ------------- .../app/components/user-nav/dropdown-list.hbs | 24 ------- .../app/components/user-nav/dropdown-list.js | 58 ---------------- .../stylesheets/common/base/new-user.scss | 34 --------- app/assets/stylesheets/desktop/_index.scss | 1 - app/assets/stylesheets/desktop/new-user.scss | 69 ------------------- app/assets/stylesheets/desktop/user.scss | 5 +- app/assets/stylesheets/mobile/new-user.scss | 62 ----------------- 8 files changed, 2 insertions(+), 297 deletions(-) delete mode 100644 app/assets/javascripts/discourse/app/components/user-nav.js delete mode 100644 app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.hbs delete mode 100644 app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js delete mode 100644 app/assets/stylesheets/desktop/new-user.scss diff --git a/app/assets/javascripts/discourse/app/components/user-nav.js b/app/assets/javascripts/discourse/app/components/user-nav.js deleted file mode 100644 index 7bef2d13ad0..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-nav.js +++ /dev/null @@ -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); - } - } -} diff --git a/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.hbs b/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.hbs deleted file mode 100644 index 681e8d75cdb..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.hbs +++ /dev/null @@ -1,24 +0,0 @@ -
  • - - - {{#if (and (has-block "submenu") this.displayList)}} -
    - -
      - {{yield to="submenu"}} -
    -
    - {{/if}} -
    • \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js b/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js deleted file mode 100644 index 7b9a82bdf57..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js +++ /dev/null @@ -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); - } -} diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss index 5b71d197d33..9d397cb5767 100644 --- a/app/assets/stylesheets/common/base/new-user.scss +++ b/app/assets/stylesheets/common/base/new-user.scss @@ -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; diff --git a/app/assets/stylesheets/desktop/_index.scss b/app/assets/stylesheets/desktop/_index.scss index 5dbba18c245..cc19e6532e8 100644 --- a/app/assets/stylesheets/desktop/_index.scss +++ b/app/assets/stylesheets/desktop/_index.scss @@ -11,7 +11,6 @@ @import "login"; @import "menu-panel"; @import "modal"; -@import "new-user"; @import "topic-list"; @import "topic-post"; @import "topic"; diff --git a/app/assets/stylesheets/desktop/new-user.scss b/app/assets/stylesheets/desktop/new-user.scss deleted file mode 100644 index 3d9f9801e7d..00000000000 --- a/app/assets/stylesheets/desktop/new-user.scss +++ /dev/null @@ -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"); - } -} diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index cb4d83b082c..9444c63de6d 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -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%; diff --git a/app/assets/stylesheets/mobile/new-user.scss b/app/assets/stylesheets/mobile/new-user.scss index ad366f2e2a7..e123d7b5493 100644 --- a/app/assets/stylesheets/mobile/new-user.scss +++ b/app/assets/stylesheets/mobile/new-user.scss @@ -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 {