From 7bba65b6f5cf246630cd6e65d70f29aa5219a8a8 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 28 Aug 2020 20:20:59 -0400 Subject: [PATCH] UX: Restyle user menu so user links are findable (#10554) --- .../app/widgets/quick-access-profile.js | 9 +-- .../discourse/app/widgets/user-menu.js | 27 +++----- .../stylesheets/common/base/menu-panel.scss | 68 ++++++------------- test/javascripts/widgets/user-menu-test.js | 10 +-- 4 files changed, 34 insertions(+), 80 deletions(-) diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js b/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js index c44a685d51a..305725ecccc 100644 --- a/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js +++ b/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js @@ -55,14 +55,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-profile", { className: "activity" } ]; - if (this.siteSettings.enable_personal_messages) { - defaultItems.push({ - icon: "envelope", - href: `${this.attrs.path}/messages`, - content: I18n.t("user.private_messages"), - className: "messages" - }); - } + defaultItems.push( { icon: "pencil-alt", diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js index 04f89964854..24113b65b15 100644 --- a/app/assets/javascripts/discourse/app/widgets/user-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/user-menu.js @@ -1,7 +1,6 @@ import { later } from "@ember/runloop"; import { createWidget } from "discourse/widgets/widget"; import { h } from "virtual-dom"; -import { formatUsername } from "discourse/lib/utilities"; const UserMenuAction = { QUICK_ACCESS: "quickAccess" @@ -24,23 +23,15 @@ export function addUserMenuGlyph(glyph) { createWidget("user-menu-links", { tagName: "div.menu-links-header", - profileLink() { - const link = { + profileGlyph() { + return { + label: "user.preferences", + className: "user-preferences-link", + icon: "cog", + href: `${this.attrs.path}/preferences`, action: UserMenuAction.QUICK_ACCESS, - actionParam: QuickAccess.PROFILE, - route: "user", - model: this.currentUser, - className: "user-activity-link", - icon: "user", - rawLabel: formatUsername(this.currentUser.username) + actionParam: QuickAccess.PROFILE }; - - if (this.currentUser.is_anonymous) { - link.label = "user.profile"; - link.rawLabel = null; - } - - return link; }, notificationsGlyph() { @@ -91,7 +82,6 @@ createWidget("user-menu-links", { }, html() { - const links = [this.profileLink()]; const glyphs = []; if (extraGlyphs) { @@ -112,8 +102,9 @@ createWidget("user-menu-links", { glyphs.push(this.messagesGlyph()); } + glyphs.push(this.profileGlyph()); + return h("ul.menu-links-row", [ - links.map(l => h("li.user", this.linkHtml(l))), h( "li.glyphs", glyphs.map(l => this.glyphHtml(l)) diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 8e7d9e35b94..4b47880aea1 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -196,7 +196,7 @@ min-height: 0; max-height: 100%; border-top: 1px solid var(--primary-low); - padding-top: 0.5em; + padding-top: 0.75em; margin-top: -1px; h3 { padding: 0 0.4em; @@ -252,9 +252,7 @@ } // Truncate items with more than 2 lines. - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + @include line-clamp(2); } } @@ -312,21 +310,14 @@ li:not(.show-all) a { color: var(--primary); display: flex; - padding: 0.25em 0.5em; - .d-icon { - color: var(--primary-medium); - } - - // accounts for menu "ears" 4px + border 1px - padding: 0.25em calc(0.5em + 4px + 1px); } } } +} - .dismiss-link { - display: inline-block; - float: right; - } +.user-notifications-link { + // keep this in leftmost position consistently + order: -1; } div.menu-links-header { @@ -334,27 +325,25 @@ div.menu-links-header { .menu-links-row { box-sizing: border-box; display: flex; + width: 100%; z-index: 2; - // Tabs should have "ears". - padding: 0 4px; li { display: inline-flex; align-items: center; flex-wrap: wrap; - &.user { - margin-right: auto; - flex: 1 1 0; - overflow: hidden; - } + &.glyphs { flex-wrap: nowrap; - text-align: right; + width: 100%; + justify-content: space-between; + padding: 0; a { - // Expand the click area a bit. - padding-left: 0.6em; - padding-right: 0.6em; + display: flex; + flex: 1 1 auto; + padding: 0.65em 0.25em 0.75em; + justify-content: center; } } @@ -373,6 +362,10 @@ div.menu-links-header { border-bottom: 1px solid var(--secondary); position: relative; + .d-icon { + color: var(--primary-high); + } + &:focus, &:hover { background-color: inherit; @@ -388,26 +381,7 @@ div.menu-links-header { a { padding: 0.3em 0.5em; } - a.user-activity-link { - box-sizing: border-box; - align-items: center; - display: flex; - max-width: 100%; - // `overflow: hidden` on `.user-activity-link` would hide the `::after` - // pseudo element (used to create the tab-looking effect). Sets `overflow: - // hidden` on the child username label instead. - overflow: visible; - - span.d-label { - display: block; - @include ellipsis; - } - - @include breakpoint(mobile-medium) { - max-width: 125px; - } - } li { display: table-cell; width: auto; @@ -424,8 +398,4 @@ div.menu-links-header { a { color: var(--primary-med-or-secondary-med); } - - .d-icon-user { - margin-right: 0.475em; - } } diff --git a/test/javascripts/widgets/user-menu-test.js b/test/javascripts/widgets/user-menu-test.js index 7cf3cfd258a..8ad4d616146 100644 --- a/test/javascripts/widgets/user-menu-test.js +++ b/test/javascripts/widgets/user-menu-test.js @@ -9,7 +9,7 @@ widgetTest("basics", { test(assert) { assert.ok(find(".user-menu").length); - assert.ok(find(".user-activity-link").length); + assert.ok(find(".user-preferences-link").length); assert.ok(find(".user-notifications-link").length); assert.ok(find(".user-bookmarks-link").length); assert.ok(find(".quick-access-panel").length); @@ -82,7 +82,7 @@ widgetTest("log out", { }, async test(assert) { - await click(".user-activity-link"); + await click(".user-preferences-link"); assert.ok(find(".logout").length); await click(".logout"); @@ -178,7 +178,7 @@ widgetTest("anonymous", { }, async test(assert) { - await click(".user-activity-link"); + await click(".user-preferences-link"); assert.ok(find(".enable-anonymous").length); await click(".enable-anonymous"); @@ -194,7 +194,7 @@ widgetTest("anonymous - disabled", { }, async test(assert) { - await click(".user-activity-link"); + await click(".user-preferences-link"); assert.ok(!find(".enable-anonymous").length); } }); @@ -211,7 +211,7 @@ widgetTest("anonymous - switch back", { }, async test(assert) { - await click(".user-activity-link"); + await click(".user-preferences-link"); assert.ok(find(".disable-anonymous").length); await click(".disable-anonymous");