diff --git a/app/assets/javascripts/discourse/app/components/user-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav.hbs index e13b2b0b604..237b2a19ad1 100644 --- a/app/assets/javascripts/discourse/app/components/user-nav.hbs +++ b/app/assets/javascripts/discourse/app/components/user-nav.hbs @@ -1,100 +1,111 @@ -
- +
+{{/if}} diff --git a/app/assets/javascripts/discourse/app/components/user-nav.js b/app/assets/javascripts/discourse/app/components/user-nav.js index d03668ac62c..7bef2d13ad0 100644 --- a/app/assets/javascripts/discourse/app/components/user-nav.js +++ b/app/assets/javascripts/discourse/app/components/user-nav.js @@ -2,6 +2,11 @@ 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; @@ -15,4 +20,27 @@ export default class UserNav extends Component { ? 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.js b/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js index 0e6d095ca26..7b9a82bdf57 100644 --- a/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js +++ b/app/assets/javascripts/discourse/app/components/user-nav/dropdown-list.js @@ -1,17 +1,21 @@ 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 { - @tracked displayList = false; + @service site; + @tracked displayList = this.site.mobileView && this.args.isActive; get chevron() { return this.displayList ? "chevron-up" : "chevron-down"; } get defaultButtonClass() { - return "user-nav-dropdown-button"; + return DROPDOWN_BUTTON_CSS_CLASS; } get buttonClass() { diff --git a/app/assets/javascripts/discourse/app/controllers/user.js b/app/assets/javascripts/discourse/app/controllers/user.js index 47d2b1c59d9..800f63926e6 100644 --- a/app/assets/javascripts/discourse/app/controllers/user.js +++ b/app/assets/javascripts/discourse/app/controllers/user.js @@ -1,5 +1,5 @@ import Controller, { inject as controller } from "@ember/controller"; -import EmberObject, { computed, set } from "@ember/object"; +import EmberObject, { action, computed, set } from "@ember/object"; import { and, equal, gt, not, or, readOnly } from "@ember/object/computed"; import CanCheckEmails from "discourse/mixins/can-check-emails"; import User from "discourse/models/user"; @@ -17,6 +17,13 @@ export default Controller.extend(CanCheckEmails, { dialog: service(), userNotifications: controller("user-notifications"), adminTools: optionalService(), + displayUserNav: false, + + init() { + this._super(...arguments); + + this.displayUserNav = this.site.desktopView; + }, @discourseComputed("model.username") viewingSelf(username) { @@ -186,6 +193,11 @@ export default Controller.extend(CanCheckEmails, { } ), + @action + toggleUserNav() { + this.toggleProperty("displayUserNav"); + }, + actions: { collapseProfile() { this.set("forceExpand", false); diff --git a/app/assets/javascripts/discourse/app/templates/user.hbs b/app/assets/javascripts/discourse/app/templates/user.hbs index 489af32e937..b960377ac2a 100644 --- a/app/assets/javascripts/discourse/app/templates/user.hbs +++ b/app/assets/javascripts/discourse/app/templates/user.hbs @@ -59,14 +59,17 @@ {{/if}} + {{#if this.canMuteOrIgnoreUser}}
    • {{/if}} - {{#if this.currentUser.staff}} + + {{#if (and this.site.desktopView this.currentUser.staff)}}
  • {{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}
    • {{/if}} + {{#if this.canExpandProfile}} @@ -74,6 +77,12 @@ {{/if}} + + {{#if this.site.mobileView}} +
  • + +
    • + {{/if}} @@ -228,6 +237,8 @@ {{#if this.currentUser.redesigned_user_page_nav_enabled}}
    -
    - {{outlet}} -
    + {{#if (or this.site.desktopView (not this.displayUserNav))}} +
    + {{outlet}} +
    + {{/if}}
    {{else}}
    diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss index f19e96f5b50..0ad82a46cb3 100644 --- a/app/assets/stylesheets/common/base/new-user.scss +++ b/app/assets/stylesheets/common/base/new-user.scss @@ -1,55 +1,8 @@ .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: 20px; - - .user-secondary-navigation { - grid-column-start: 1; - grid-column-end: 2; - grid-row-start: 1; - grid-row-end: 2; - } - - .user-content { - 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; - } - - .user-secondary-navigation ~ .user-content { - grid-column-start: 2; - grid-column-end: 3; - } - } - - .user-nav-dropdown-list-item { - position: relative; - } - .user-nav-dropdown-button { background: transparent; } - .user-nav-dropdown-submenu-wrapper { - position: absolute; - top: 2em; - min-width: 10em; - padding: 0; - box-shadow: shadow("dropdown"); - z-index: z("dropdown"); - } - .user-nav-dropdown-submenu { background: var(--secondary); list-style-type: none; @@ -58,6 +11,7 @@ li a { padding: 0.5em 1em; color: var(--primary); + .discourse-no-touch & { &:hover { background: var(--highlight-medium); diff --git a/app/assets/stylesheets/desktop/_index.scss b/app/assets/stylesheets/desktop/_index.scss index 3b415092a5e..87b39b9893d 100644 --- a/app/assets/stylesheets/desktop/_index.scss +++ b/app/assets/stylesheets/desktop/_index.scss @@ -11,6 +11,7 @@ @import "login"; @import "menu-panel"; @import "modal"; +@import "new-user"; @import "sidebar-section"; @import "topic-list"; @import "topic-post"; diff --git a/app/assets/stylesheets/desktop/new-user.scss b/app/assets/stylesheets/desktop/new-user.scss new file mode 100644 index 00000000000..f360fd65511 --- /dev/null +++ b/app/assets/stylesheets/desktop/new-user.scss @@ -0,0 +1,48 @@ +.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: 20px; + + .user-secondary-navigation { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 1; + grid-row-end: 2; + } + + .user-content { + 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; + } + + .user-secondary-navigation ~ .user-content { + 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/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss index 8f7319408dd..1fc0b0e8d7f 100644 --- a/app/assets/stylesheets/mobile/_index.scss +++ b/app/assets/stylesheets/mobile/_index.scss @@ -19,6 +19,7 @@ @import "login"; @import "menu-panel"; @import "modal"; +@import "new-user"; @import "personal-message"; @import "push-notifications-mobile"; @import "reviewables"; diff --git a/app/assets/stylesheets/mobile/new-user.scss b/app/assets/stylesheets/mobile/new-user.scss new file mode 100644 index 00000000000..24b6acc3fc1 --- /dev/null +++ b/app/assets/stylesheets/mobile/new-user.scss @@ -0,0 +1,52 @@ +.new-user-wrapper { + .user-nav { + flex-direction: column; + + > li { + width: 100%; + + .d-icon { + margin-right: 0.5em; + } + + &:not(:first-of-type) { + border-top: 1px solid var(--primary-low); + } + + > a, + button { + padding: 1em 0.75em; + width: 100%; + } + } + } + + .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; + } + } +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 5b71c746f36..1fbff0413fa 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -5331,6 +5331,7 @@ en: suspended: "Suspended?" staged: "Staged?" show_admin_profile: "Admin" + manage_user: "Manage user" show_public_profile: "Show Public Profile" impersonate: "Impersonate" action_logs: "Action Logs"