UX: updated styles for user nav with sidebar (#18550)

2022-10-11 17:15:58 -04:00 · 2022-10-11 17:15:58 -04:00 · 6d8405bbd0
parent 356cf358f7
commit 6d8405bbd0
9 changed files with 239 additions and 99 deletions
--- a/app/assets/javascripts/discourse/app/components/user-nav.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-nav.hbs
@ -4,14 +4,14 @@
      <li class="summary">
        <LinkTo @route="user.summary">
          {{d-icon "user"}}
-          {{i18n "user.summary.title"}}
+          <span>{{i18n "user.summary.title"}}</span>
        </LinkTo>
      </li>

      <li class="user-activity">
        <LinkTo @route="userActivity">
          {{d-icon "stream"}}
-          {{i18n "user.activity_stream"}}
+          <span>{{i18n "user.activity_stream"}}</span>
        </LinkTo>
      </li>
    {{/unless}}
@ -19,7 +19,8 @@
    {{#if @showNotificationsTab}}
      <li class="user-notifications">
        <LinkTo @route="userNotifications">
-          {{d-icon "bell" class="glyph"}}{{i18n "user.notifications"}}
+          {{d-icon "bell" class="glyph"}}
+          <span>{{i18n "user.notifications"}}</span>
        </LinkTo>
      </li>
    {{/if}}
@ -28,7 +29,7 @@
      <li class="private-messages">
        <LinkTo @route="userPrivateMessages">
          {{d-icon "far-envelope"}}
-          {{i18n "user.private_messages"}}
+          <span>{{i18n "user.private_messages"}}</span>
        </LinkTo>
      </li>
    {{/if}}
@ -37,7 +38,7 @@
      <li class="invited">
        <LinkTo @route="userInvited">
          {{d-icon "user-plus"}}
-          {{i18n "user.invited.title"}}
+          <span>{{i18n "user.invited.title"}}</span>
        </LinkTo>
      </li>
    {{/if}}
@ -46,7 +47,7 @@
      <li class="badges">
        <LinkTo @route="user.badges">
          {{d-icon "certificate"}}
-          {{i18n "badges.title"}}
+          <span>{{i18n "badges.title"}}</span>
        </LinkTo>
      </li>
    {{/if}}
@ -60,7 +61,7 @@
      <li class="preferences">
        <LinkTo @route="preferences">
          {{d-icon "cog"}}
-          {{i18n "user.preferences"}}
+          <span>{{i18n "user.preferences"}}</span>
        </LinkTo>
      </li>
    {{/if}}
@ -69,7 +70,7 @@
      <li class="admin">
        <a href={{@user.adminPath}} >
          {{d-icon "wrench"}}
-          {{i18n "admin.user.manage_user"}}
+          <span>{{i18n "admin.user.manage_user"}}</span>
        </a>
      </li>
    {{/if}}
--- a/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs
@ -9,35 +9,40 @@

  <ul class="messages-nav nav-pills action-list">
    {{#if @isPersonal}}
-      <li>
+      <li class="messages-latest">
        <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
-          {{i18n "categories.latest"}}
+          {{d-icon "envelope"}}
+          <span>{{i18n "categories.latest"}}</span>
        </LinkTo>
      </li>

-      <li class="archive">
+      <li class="messages-sent">
        <LinkTo @route="userPrivateMessages.sent" @model={{@user}}>
-          {{i18n "user.messages.sent"}}
+          {{d-icon "reply"}}
+          <span>{{i18n "user.messages.sent"}}</span>
        </LinkTo>
      </li>

      {{#if @viewingSelf}}
-        <li class="archive">
+        <li class="messages-new">
          <LinkTo @route="userPrivateMessages.new" @model={{@user}} class="new">
-            {{@newLinkText}}
+            {{d-icon "exclamation-circle"}}
+            <span>{{@newLinkText}}</span>
          </LinkTo>
        </li>

-        <li class="archive">
+        <li class="messages-unread">
          <LinkTo @route="userPrivateMessages.unread" @model={{@user}} class="unread">
-            {{@unreadLinkText}}
+            {{d-icon "plus-circle"}}
+            <span>{{@unreadLinkText}}</span>
          </LinkTo>
        </li>
      {{/if}}

-      <li class="archive">
+      <li class="messages-archive">
        <LinkTo @route="userPrivateMessages.archive" @model={{@user}}>
-          {{i18n "user.messages.archive"}}
+          {{d-icon "archive"}}
+          <span>{{i18n "user.messages.archive"}}</span>
        </LinkTo>
      </li>
    {{/if}}
@ -45,28 +50,32 @@
    {{#each @user.groups as |group|}}
      {{#if (and @isGroup (eq @groupFilter group.name))}}
        {{#if @viewingSelf}}
-          <li class="archive">
+          <li class="messages-group-latest">
            <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
-              {{i18n "categories.latest"}}
+              {{d-icon "envelope"}}
+              <span>{{i18n "categories.latest"}}</span>
            </LinkTo>
          </li>

-          <li class="archive">
+          <li class="messages-group-new">
            <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
-              {{@newLinkText}}
+              {{d-icon "exclamation-circle"}}
+              <span>{{@newLinkText}}</span>
            </LinkTo>
          </li>

-          <li class="archive">
+          <li class="messages-group-unread">
            <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
-              {{@unreadLinkText}}
+              {{d-icon "plus-circle"}}
+              <span>{{@unreadLinkText}}</span>
            </LinkTo>
          </li>
        {{/if}}

-        <li class="archive">
+        <li class="messages-group-archive">
          <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
-            {{i18n "user.messages.archive"}}
+            {{d-icon "archive"}}
+            <span>{{i18n "user.messages.archive"}}</span>
          </LinkTo>
        </li>
      {{/if}}
@ -75,7 +84,8 @@
    {{#if this.displayTags}}
      <li class="tags">
        <LinkTo @route="userPrivateMessages.tags" @model={{@user}}>
-          {{i18n "user.messages.all_tags"}}
+          {{d-icon "tag"}}
+          <span>{{i18n "user.messages.all_tags"}}</span>
        </LinkTo>
      </li>

--- a/app/assets/javascripts/discourse/app/templates/preferences.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences.hbs
@ -5,71 +5,80 @@
    <ul class="nav-pills action-list">
      <li class="nav-account">
        <LinkTo @route="preferences.account">
-          {{i18n "user.preferences_nav.account"}}
+          {{d-icon "user"}}
+          <span>{{i18n "user.preferences_nav.account"}}</span>
        </LinkTo>
      </li>
      <li class="nav-security">
        <LinkTo @route="preferences.security">
-          {{i18n "user.preferences_nav.security"}}
+          {{d-icon "lock"}}
+          <span>{{i18n "user.preferences_nav.security"}}</span>
        </LinkTo>
      </li>
      <li class="nav-profile">
        <LinkTo @route="preferences.profile">
-          {{i18n "user.preferences_nav.profile"}}
+          {{d-icon "user"}}
+          <span>{{i18n "user.preferences_nav.profile"}}</span>
        </LinkTo>
      </li>
      <li class="nav-emails">
        <LinkTo @route="preferences.emails">
-          {{i18n "user.preferences_nav.emails"}}
+          {{d-icon "envelope"}}
+          <span>{{i18n "user.preferences_nav.emails"}}</span>
        </LinkTo>
      </li>
      <li class="nav-notifications">
        <LinkTo @route="preferences.notifications">
-          {{i18n "user.preferences_nav.notifications"}}
+          {{d-icon "bell"}}
+          <span>{{i18n "user.preferences_nav.notifications"}}</span>
        </LinkTo>
      </li>
      {{#if this.model.can_change_tracking_preferences}}
        <li class="indent nav-categories">
          <LinkTo @route="preferences.categories">
-            {{i18n "user.preferences_nav.categories"}}
+            {{d-icon "folder"}}
+            <span>{{i18n "user.preferences_nav.categories"}}</span>
          </LinkTo>
        </li>
      {{/if}}
      <li class="indent nav-users">
        <LinkTo @route="preferences.users">
-          {{i18n "user.preferences_nav.users"}}
+          {{d-icon "users"}}
+          <span>{{i18n "user.preferences_nav.users"}}</span>
        </LinkTo>
      </li>
      {{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}}
        <li class="indent nav-tags">
          <LinkTo @route="preferences.tags">
-            {{i18n "user.preferences_nav.tags"}}
+            {{d-icon "tag"}}
+            <span>{{i18n "user.preferences_nav.tags"}}</span>
          </LinkTo>
        </li>
      {{/if}}
      <li class="nav-interface">
        <LinkTo @route="preferences.interface">
-          {{i18n "user.preferences_nav.interface"}}
+          {{d-icon "desktop"}}
+          <span>{{i18n "user.preferences_nav.interface"}}</span>
        </LinkTo>
      </li>

      {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
        <li class="indent nav-sidebar">
          <LinkTo @route="preferences.sidebar">
-            {{i18n "user.preferences_nav.sidebar"}}
+            {{d-icon "bars"}}
+            <span>{{i18n "user.preferences_nav.sidebar"}}</span>
          </LinkTo>
        </li>
      {{/if}}

-      <PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
+      <PluginOutlet @name="user-preferences-nav-under-interface" @connectorTagName="div" @args={{hash model=this.model}} />

-      {{#if this.model.userApiKeys}}
      <li class="nav-apps">
        <LinkTo @route="preferences.apps">
-            {{i18n "user.preferences_nav.apps"}}
+          {{d-icon "mobile-alt"}}
+          <span>{{i18n "user.preferences_nav.apps"}}</span>
        </LinkTo>
      </li>
-      {{/if}}

      <PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=this.model}} />
    </ul>
--- a/app/assets/javascripts/discourse/app/templates/user/activity.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
@ -3,32 +3,50 @@

  <div class="user-navigation user-navigation-secondary">
    <ul class="nav-pills action-list">
-      <DNavigationItem @route="userActivity.index">{{i18n "user.filters.all"}}</DNavigationItem>
-      <DNavigationItem @route="userActivity.topics">{{i18n "user_action_groups.4"}}</DNavigationItem>
-      <DNavigationItem @route="userActivity.replies">{{i18n "user_action_groups.5"}}</DNavigationItem>
+      <DNavigationItem @route="userActivity.index">
+        {{d-icon "stream"}}
+        <span>{{i18n "user.filters.all"}}</span>
+      </DNavigationItem>
+      <DNavigationItem @route="userActivity.topics">
+        {{d-icon "list-ul"}}
+        <span>{{i18n "user_action_groups.4"}}</span>
+      </DNavigationItem>
+      <DNavigationItem @route="userActivity.replies">
+        {{d-icon "reply"}}
+        <span>{{i18n "user_action_groups.5"}}</span>
+      </DNavigationItem>

      {{#if this.user.showRead}}
        <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
-          {{i18n "user.read"}}
+          {{d-icon "history"}}
+          <span>{{i18n "user.read"}}</span>
        </DNavigationItem>
      {{/if}}

      {{#if this.user.showDrafts}}
        <DNavigationItem @route="userActivity.drafts">
-          {{this.draftLabel}}
+          {{d-icon "pencil-alt"}}
+          <span>{{this.draftLabel}}</span>
        </DNavigationItem>
      {{/if}}

      {{#if (gt this.model.pending_posts_count 0)}}
        <DNavigationItem @route="userActivity.pending">
-          {{this.pendingLabel}}
+          {{d-icon "clock"}}
+          <span>{{this.pendingLabel}}</span>
        </DNavigationItem>
      {{/if}}

-      <DNavigationItem @route="userActivity.likesGiven">{{i18n "user_action_groups.1"}}</DNavigationItem>
+      <DNavigationItem @route="userActivity.likesGiven">
+        {{d-icon "heart"}}
+        <span>{{i18n "user_action_groups.1"}}</span>
+      </DNavigationItem>

      {{#if this.user.showBookmarks}}
-        <DNavigationItem @route="userActivity.bookmarks">{{i18n "user_action_groups.3"}}</DNavigationItem>
+        <DNavigationItem @route="userActivity.bookmarks">
+          {{d-icon "bookmark"}}
+          <span>{{i18n "user_action_groups.3"}}</span>
+        </DNavigationItem>
      {{/if}}

      <PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=this.model}} />
--- a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
@ -2,36 +2,41 @@
  <DSection @pageClass="user-notifications" />

  <div class="user-navigation user-navigation-secondary">
-    <ul id="navigation-bar" class="messages-nav nav-pills action-list">
+    <ul id="navigation-bar" class="notifications-nav nav-pills action-list">
      <li>
        <LinkTo @route="userNotifications.index">
-          {{i18n "user.filters.all"}}
+          {{d-icon "bell"}}
+          <span>{{i18n "user.filters.all"}}</span>
        </LinkTo>
      </li>

      <li>
        <LinkTo @route="userNotifications.responses">
-          {{i18n "user_action_groups.6"}}
+          {{d-icon "reply"}}
+          <span>{{i18n "user_action_groups.6"}}</span>
        </LinkTo>
      </li>

      <li>
        <LinkTo @route="userNotifications.likesReceived">
-          {{i18n "user_action_groups.2"}}
+          {{d-icon "heart"}}
+          <span>{{i18n "user_action_groups.2"}}</span>
        </LinkTo>
      </li>

      {{#if this.siteSettings.enable_mentions}}
        <li>
          <LinkTo @route="userNotifications.mentions">
-            {{i18n "user_action_groups.7"}}
+            {{d-icon "at"}}
+            <span>{{i18n "user_action_groups.7"}}</span>
          </LinkTo>
        </li>
      {{/if}}

      <li>
        <LinkTo @route="userNotifications.edits">
-          {{i18n "user_action_groups.11"}}
+          {{d-icon "pencil-alt"}}
+          <span>{{i18n "user_action_groups.11"}}</span>
        </LinkTo>
      </li>

--- a/app/assets/stylesheets/common/base/new-user.scss
+++ b/app/assets/stylesheets/common/base/new-user.scss
@ -1,43 +1,120 @@
 .new-user-wrapper {
+  margin-top: -15px; // temp, can remove margin from sibling element after nav finalized
  .user-navigation {
-    &.user-navigation-secondary {
-      margin-top: 0.5em;
-
-      .nav-pills {
-        border-bottom: 1px solid var(--primary-low);
-      }
-    }
-
+    --user-navigation__border-width: 4px;
    .nav-pills {
      width: 100%;
-      border-bottom: 2px solid var(--primary-low);
      margin: 0;
+      border-bottom: 1px solid var(--primary-low);
+      .d-icon {
+        font-size: var(--font-down-1);
+      }
+
+      &.main-nav {
+        @include breakpoint(medium) {
+          li {
+            .d-icon {
+              font-size: var(--font-up-1);
+              margin: 0;
+            }
+            span {
+              display: none;
+            }
+          }
+        }
+
+        .has-sidebar-page & {
+          @include breakpoint(large) {
+            span {
+              display: none;
+            }
+          }
+        }
+      }

      li {
+        flex: 1 1 auto;
        margin: 0;
+        overflow: hidden;
+        display: flex;

        a {
-          display: inline-block;
-          text-align: center;
-          position: relative;
-          border-bottom: 2px solid transparent;
-          padding: 0.5em 1em;
-
-          &.active,
-          &:hover {
-            color: var(--quaternary);
-            background-color: var(--secondary);
-          }
-
-          &.active::after {
-            display: block;
-            content: "";
-            position: absolute;
+          box-sizing: border-box;
          width: 100%;
-            border-bottom: 2px solid var(--quaternary);
-            bottom: -4px;
-            left: 0px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          border-bottom: var(--user-navigation__border-width) solid transparent;
+          padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em
+            0.75em;
+          transition: color 0.25s;
+
+          @include breakpoint(extra-large) {
+            font-size: var(--font-0);
          }
+
+          span {
+            line-height: normal;
+            @include ellipsis;
+          }
+
+          &:hover,
+          &:focus {
+            background: transparent;
+            color: var(--quaternary);
+            border-bottom: var(--user-navigation__border-width) solid
+              var(--quaternary-low);
+          }
+
+          &.active {
+            color: var(--quaternary);
+            background: transparent;
+            border-bottom: var(--user-navigation__border-width) solid
+              var(--quaternary);
+          }
+        }
+      }
+    }
+  }
+
+  .user-navigation-secondary {
+    --user-navigation__border-width: 2px;
+    min-width: 0;
+    margin: 0.5em 0;
+    gap: 0 0.5em;
+
+    .select-kit .select-kit-header {
+      height: 100%;
+      padding: 0.5em 1em;
+      @include breakpoint(large) {
+        font-size: var(--font-down-1);
+      }
+    }
+
+    .category-breadcrumb > li {
+      margin: 0;
+    }
+
+    .navigation-controls {
+      flex-wrap: nowrap;
+      @include breakpoint(large) {
+        font-size: var(--font-down-1);
+      }
+    }
+
+    .nav-pills {
+      flex: 1 1 auto;
+      font-size: var(--font-down-1);
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      li {
+        flex: 1 1 auto;
+
+        a {
+          padding: 0.5em 0.5em
+            calc(0.5em + var(--user-navigation__border-width));
        }
      }
    }
@ -76,4 +153,9 @@
      }
    }
  }
+
+  .empty-state {
+    padding: 0;
+    margin: 1em 0;
+  }
 }
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@ -19,7 +19,6 @@

 .nav-pills {
  @extend %nav;
-  @extend .clearfix;

  display: flex;
  flex-direction: row;
--- a/app/assets/stylesheets/desktop/new-user.scss
+++ b/app/assets/stylesheets/desktop/new-user.scss
@ -3,9 +3,9 @@
    // Grid layout
    width: 100%;
    display: grid;
-    grid-template-columns: 1fr 5fr;
+    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
-    grid-gap: 20px;
+    grid-gap: 0;

    .user-navigation-secondary {
      grid-column-start: 1;
@ -25,7 +25,8 @@
    }

    .user-content {
-      margin-top: 1em;
+      padding: 0;
+      margin-top: 2em;
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
--- a/app/assets/stylesheets/mobile/new-user.scss
+++ b/app/assets/stylesheets/mobile/new-user.scss
@ -5,21 +5,22 @@
    .nav-pills {
      margin: 0.5em 0;
      overflow-x: auto;
-
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
-
-      li {
-        a {
-          display: flex;
-          flex-direction: row;
-          padding: 0.5em 0.5em;
-          white-space: nowrap;
    }
  }
+
+  .user-navigation-secondary {
+    font-size: var(--font-up-1);
+
+    .nav-pills {
+      flex-wrap: nowrap;
+      li {
+        flex: 1 0 auto;
+      }
    }
  }

@ -51,4 +52,18 @@
      @include ellipsis;
    }
  }
+
+  #navigation-bar {
+    flex-wrap: nowrap;
+  }
+
+  .navigation-controls {
+    margin-top: 1em;
+  }
+}
+
+.new-user-content-wrapper {
+  .user-content {
+    margin-top: 2em;
+  }
 }