DEV: Mobile layout support for experimental user nav (#18308)

app/assets/javascripts/discourse/app/components/user-nav.hbs

@@ -1,4 +1,5 @@
-<section class="user-primary-navigation">
+{{#if @shouldDisplay}}
+  <section class="user-primary-navigation" {{did-insert this.registerClickListener}} {{will-destroy this.unregisterClickListener}}>
     <ul class="main-nav nav nav-pills user-nav">
       {{#unless @user.profile_hidden}}
         <li class="summary">
@@ -96,5 +97,15 @@
           </LinkTo>
         </li>
       {{/if}}
+
+      {{#if (and this.site.mobileView this.currentUser.staff)}}
+        <li class="admin">
+          <a href={{@user.adminPath}} >
+            {{d-icon "wrench"}}
+            {{i18n "admin.user.manage_user"}}
+          </a>
+        </li>
+      {{/if}}
     </ul>
   </section>
+{{/if}}

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

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

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

app/assets/javascripts/discourse/app/templates/user.hbs

@@ -59,14 +59,17 @@
                   <DButton @class="btn-primary compose-pm" @action={{route-action "composePrivateMessage" this.model}} @icon="envelope" @label="user.private_message" />
                 </li>
               {{/if}}
+
               {{#if this.canMuteOrIgnoreUser}}
                 <li>
                   <UserNotificationsDropdown @user={{this.model}} @value={{this.userNotificationLevel}} @updateNotificationLevel={{action "updateNotificationLevel"}} />
                 </li>
               {{/if}}
-              {{#if this.currentUser.staff}}
+
+              {{#if (and this.site.desktopView this.currentUser.staff)}}
                 <li><a href={{this.model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}<span class="d-button-label">{{i18n "admin.user.show_admin_profile"}}</span></a></li>
               {{/if}}
+
               <PluginOutlet @name="user-profile-controls" @connectorTagName="li" @args={{hash model=this.model}} />
 
               {{#if this.canExpandProfile}}
@@ -74,6 +77,12 @@
                   <DButton @ariaExpanded={{this.collapsedInfoState.isExpanded}} @ariaLabel={{this.collapsedInfoState.ariaLabel}} @ariaControls="collapsed-info-panel" @class="btn-default" @label={{concat "user." this.collapsedInfoState.label}} @icon={{this.collapsedInfoState.icon}} @action={{action this.collapsedInfoState.action}} />
                 </li>
               {{/if}}
+
+              {{#if this.site.mobileView}}
+                <li>
+                  <DButton @class="btn-default toggle-mobile-user-menu" @action={{this.toggleUserNav}} @icon="bars" @label="hamburger_menu" />
+                </li>
+              {{/if}}
             </ul>
           </section>
 
@@ -228,6 +237,8 @@
     {{#if this.currentUser.redesigned_user_page_nav_enabled}}
       <div class="new-user-wrapper">
         <UserNav
+          @shouldDisplay={{this.displayUserNav}}
+          @toggleUserNav={{this.toggleUserNav}}
           @user={{this.model}}
           @showNotificationsTab={{this.showNotificationsTab}}
           @showPrivateMessages={{this.showPrivateMessages}}
@@ -238,9 +249,11 @@
           @showDrafts={{this.showDrafts}}
           @showBookmarks={{this.showBookmarks}} />
 
+        {{#if (or this.site.desktopView (not this.displayUserNav))}}
           <div class="new-user-content-wrapper">
             {{outlet}}
           </div>
+        {{/if}}
       </div>
     {{else}}
       <div class='user-content-wrapper'>

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

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

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

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

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

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"