Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Kris 2022-10-11 17:15:58 -04:00 committed by GitHub
parent 356cf358f7
commit 6d8405bbd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 239 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/discourse/app/components/user-nav.hbs
View File

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

48
app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs
View File

@ -9,35 +9,40 @@
<ul class="messages-nav nav-pills action-list"> <ul class="messages-nav nav-pills action-list">
{{#if @isPersonal}} {{#if @isPersonal}}
<li> <li class="messages-latest">
<LinkTo @route="userPrivateMessages.index" @model={{@user}}> <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
{{i18n "categories.latest"}} {{d-icon "envelope"}}
<span>{{i18n "categories.latest"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="archive"> <li class="messages-sent">
<LinkTo @route="userPrivateMessages.sent" @model={{@user}}> <LinkTo @route="userPrivateMessages.sent" @model={{@user}}>
{{i18n "user.messages.sent"}} {{d-icon "reply"}}
<span>{{i18n "user.messages.sent"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{#if @viewingSelf}} {{#if @viewingSelf}}
<li class="archive"> <li class="messages-new">
<LinkTo @route="userPrivateMessages.new" @model={{@user}} class="new"> <LinkTo @route="userPrivateMessages.new" @model={{@user}} class="new">
{{@newLinkText}} {{d-icon "exclamation-circle"}}
<span>{{@newLinkText}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="archive"> <li class="messages-unread">
<LinkTo @route="userPrivateMessages.unread" @model={{@user}} class="unread"> <LinkTo @route="userPrivateMessages.unread" @model={{@user}} class="unread">
{{@unreadLinkText}} {{d-icon "plus-circle"}}
<span>{{@unreadLinkText}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
<li class="archive"> <li class="messages-archive">
<LinkTo @route="userPrivateMessages.archive" @model={{@user}}> <LinkTo @route="userPrivateMessages.archive" @model={{@user}}>
{{i18n "user.messages.archive"}} {{d-icon "archive"}}
<span>{{i18n "user.messages.archive"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
@ -45,28 +50,32 @@
{{#each @user.groups as |group|}} {{#each @user.groups as |group|}}
{{#if (and @isGroup (eq @groupFilter group.name))}} {{#if (and @isGroup (eq @groupFilter group.name))}}
{{#if @viewingSelf}} {{#if @viewingSelf}}
<li class="archive"> <li class="messages-group-latest">
<LinkTo @route="userPrivateMessages.group" @model={{group.name}}> <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
{{i18n "categories.latest"}} {{d-icon "envelope"}}
<span>{{i18n "categories.latest"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="archive"> <li class="messages-group-new">
<LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new"> <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
{{@newLinkText}} {{d-icon "exclamation-circle"}}
<span>{{@newLinkText}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="archive"> <li class="messages-group-unread">
<LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread"> <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
{{@unreadLinkText}} {{d-icon "plus-circle"}}
<span>{{@unreadLinkText}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
<li class="archive"> <li class="messages-group-archive">
<LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}> <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
{{i18n "user.messages.archive"}} {{d-icon "archive"}}
<span>{{i18n "user.messages.archive"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
@ -75,7 +84,8 @@
{{#if this.displayTags}} {{#if this.displayTags}}
<li class="tags"> <li class="tags">
<LinkTo @route="userPrivateMessages.tags" @model={{@user}}> <LinkTo @route="userPrivateMessages.tags" @model={{@user}}>
{{i18n "user.messages.all_tags"}} {{d-icon "tag"}}
<span>{{i18n "user.messages.all_tags"}}</span>
</LinkTo> </LinkTo>
</li> </li>

37
app/assets/javascripts/discourse/app/templates/preferences.hbs
View File

@ -5,71 +5,80 @@
<ul class="nav-pills action-list"> <ul class="nav-pills action-list">
<li class="nav-account"> <li class="nav-account">
<LinkTo @route="preferences.account"> <LinkTo @route="preferences.account">
{{i18n "user.preferences_nav.account"}} {{d-icon "user"}}
<span>{{i18n "user.preferences_nav.account"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="nav-security"> <li class="nav-security">
<LinkTo @route="preferences.security"> <LinkTo @route="preferences.security">
{{i18n "user.preferences_nav.security"}} {{d-icon "lock"}}
<span>{{i18n "user.preferences_nav.security"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="nav-profile"> <li class="nav-profile">
<LinkTo @route="preferences.profile"> <LinkTo @route="preferences.profile">
{{i18n "user.preferences_nav.profile"}} {{d-icon "user"}}
<span>{{i18n "user.preferences_nav.profile"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="nav-emails"> <li class="nav-emails">
<LinkTo @route="preferences.emails"> <LinkTo @route="preferences.emails">
{{i18n "user.preferences_nav.emails"}} {{d-icon "envelope"}}
<span>{{i18n "user.preferences_nav.emails"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="nav-notifications"> <li class="nav-notifications">
<LinkTo @route="preferences.notifications"> <LinkTo @route="preferences.notifications">
{{i18n "user.preferences_nav.notifications"}} {{d-icon "bell"}}
<span>{{i18n "user.preferences_nav.notifications"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{#if this.model.can_change_tracking_preferences}} {{#if this.model.can_change_tracking_preferences}}
<li class="indent nav-categories"> <li class="indent nav-categories">
<LinkTo @route="preferences.categories"> <LinkTo @route="preferences.categories">
{{i18n "user.preferences_nav.categories"}} {{d-icon "folder"}}
<span>{{i18n "user.preferences_nav.categories"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
<li class="indent nav-users"> <li class="indent nav-users">
<LinkTo @route="preferences.users"> <LinkTo @route="preferences.users">
{{i18n "user.preferences_nav.users"}} {{d-icon "users"}}
<span>{{i18n "user.preferences_nav.users"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}} {{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}}
<li class="indent nav-tags"> <li class="indent nav-tags">
<LinkTo @route="preferences.tags"> <LinkTo @route="preferences.tags">
{{i18n "user.preferences_nav.tags"}} {{d-icon "tag"}}
<span>{{i18n "user.preferences_nav.tags"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
<li class="nav-interface"> <li class="nav-interface">
<LinkTo @route="preferences.interface"> <LinkTo @route="preferences.interface">
{{i18n "user.preferences_nav.interface"}} {{d-icon "desktop"}}
<span>{{i18n "user.preferences_nav.interface"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}} {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
<li class="indent nav-sidebar"> <li class="indent nav-sidebar">
<LinkTo @route="preferences.sidebar"> <LinkTo @route="preferences.sidebar">
{{i18n "user.preferences_nav.sidebar"}} {{d-icon "bars"}}
<span>{{i18n "user.preferences_nav.sidebar"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/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"> <li class="nav-apps">
<LinkTo @route="preferences.apps"> <LinkTo @route="preferences.apps">
{{i18n "user.preferences_nav.apps"}} {{d-icon "mobile-alt"}}
<span>{{i18n "user.preferences_nav.apps"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}}
<PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=this.model}} /> <PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=this.model}} />
</ul> </ul>

34
app/assets/javascripts/discourse/app/templates/user/activity.hbs
View File

@ -3,32 +3,50 @@
<div class="user-navigation user-navigation-secondary"> <div class="user-navigation user-navigation-secondary">
<ul class="nav-pills action-list"> <ul class="nav-pills action-list">
<DNavigationItem @route="userActivity.index">{{i18n "user.filters.all"}}</DNavigationItem> <DNavigationItem @route="userActivity.index">
<DNavigationItem @route="userActivity.topics">{{i18n "user_action_groups.4"}}</DNavigationItem> {{d-icon "stream"}}
<DNavigationItem @route="userActivity.replies">{{i18n "user_action_groups.5"}}</DNavigationItem> <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}} {{#if this.user.showRead}}
<DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}> <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
{{i18n "user.read"}} {{d-icon "history"}}
<span>{{i18n "user.read"}}</span>
</DNavigationItem> </DNavigationItem>
{{/if}} {{/if}}
{{#if this.user.showDrafts}} {{#if this.user.showDrafts}}
<DNavigationItem @route="userActivity.drafts"> <DNavigationItem @route="userActivity.drafts">
{{this.draftLabel}} {{d-icon "pencil-alt"}}
<span>{{this.draftLabel}}</span>
</DNavigationItem> </DNavigationItem>
{{/if}} {{/if}}
{{#if (gt this.model.pending_posts_count 0)}} {{#if (gt this.model.pending_posts_count 0)}}
<DNavigationItem @route="userActivity.pending"> <DNavigationItem @route="userActivity.pending">
{{this.pendingLabel}} {{d-icon "clock"}}
<span>{{this.pendingLabel}}</span>
</DNavigationItem> </DNavigationItem>
{{/if}} {{/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}} {{#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}} {{/if}}
<PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=this.model}} /> <PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=this.model}} />

17
app/assets/javascripts/discourse/app/templates/user/notifications.hbs
View File

@ -2,36 +2,41 @@
<DSection @pageClass="user-notifications" /> <DSection @pageClass="user-notifications" />
<div class="user-navigation user-navigation-secondary"> <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> <li>
<LinkTo @route="userNotifications.index"> <LinkTo @route="userNotifications.index">
{{i18n "user.filters.all"}} {{d-icon "bell"}}
<span>{{i18n "user.filters.all"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li> <li>
<LinkTo @route="userNotifications.responses"> <LinkTo @route="userNotifications.responses">
{{i18n "user_action_groups.6"}} {{d-icon "reply"}}
<span>{{i18n "user_action_groups.6"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li> <li>
<LinkTo @route="userNotifications.likesReceived"> <LinkTo @route="userNotifications.likesReceived">
{{i18n "user_action_groups.2"}} {{d-icon "heart"}}
<span>{{i18n "user_action_groups.2"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{#if this.siteSettings.enable_mentions}} {{#if this.siteSettings.enable_mentions}}
<li> <li>
<LinkTo @route="userNotifications.mentions"> <LinkTo @route="userNotifications.mentions">
{{i18n "user_action_groups.7"}} {{d-icon "at"}}
<span>{{i18n "user_action_groups.7"}}</span>
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
<li> <li>
<LinkTo @route="userNotifications.edits"> <LinkTo @route="userNotifications.edits">
{{i18n "user_action_groups.11"}} {{d-icon "pencil-alt"}}
<span>{{i18n "user_action_groups.11"}}</span>
</LinkTo> </LinkTo>
</li> </li>

138
app/assets/stylesheets/common/base/new-user.scss
View File

@ -1,43 +1,120 @@
.new-user-wrapper { .new-user-wrapper {
margin-top: -15px; // temp, can remove margin from sibling element after nav finalized
.user-navigation { .user-navigation {
&.user-navigation-secondary { --user-navigation__border-width: 4px;
margin-top: 0.5em;
.nav-pills {
border-bottom: 1px solid var(--primary-low);
}
}
.nav-pills { .nav-pills {
width: 100%; width: 100%;
border-bottom: 2px solid var(--primary-low);
margin: 0; 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 { li {
flex: 1 1 auto;
margin: 0; margin: 0;
overflow: hidden;
display: flex;
a { a {
display: inline-block; box-sizing: border-box;
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;
width: 100%; width: 100%;
border-bottom: 2px solid var(--quaternary); display: flex;
bottom: -4px; justify-content: center;
left: 0px; 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;
}
} }

1
app/assets/stylesheets/common/components/navs.scss
View File

@ -19,7 +19,6 @@
.nav-pills { .nav-pills {
@extend %nav; @extend %nav;
@extend .clearfix;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

7
app/assets/stylesheets/desktop/new-user.scss
View File

@ -3,9 +3,9 @@
// Grid layout // Grid layout
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 5fr; grid-template-columns: 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-gap: 20px; grid-gap: 0;
.user-navigation-secondary { .user-navigation-secondary {
grid-column-start: 1; grid-column-start: 1;
@ -25,7 +25,8 @@
} }
.user-content { .user-content {
margin-top: 1em; padding: 0;
margin-top: 2em;
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
grid-row-start: 1; grid-row-start: 1;

31
app/assets/stylesheets/mobile/new-user.scss
View File

@ -5,21 +5,22 @@
.nav-pills { .nav-pills {
margin: 0.5em 0; margin: 0.5em 0;
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; 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; @include ellipsis;
} }
} }
#navigation-bar {
flex-wrap: nowrap;
}
.navigation-controls {
margin-top: 1em;
}
}
.new-user-content-wrapper {
.user-content {
margin-top: 2em;
}
} }