UX: Restyle user menu so user links are findable (#10554)

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",

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))

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;
-  }
 }

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");