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

UX: extend horizontal user nav to all user pages (#18674)

This commit is contained in:
Kris 2022-10-19 21:05:51 -04:00 committed by GitHub
parent 09e4eb4137
commit f1f2c1acd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 249 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js → app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
View File

@ -4,7 +4,7 @@ import { bind } from "discourse-common/utils/decorators";
import { inject as service } from "@ember/service"; import { inject as service } from "@ember/service";
import { tracked } from "@glimmer/tracking"; import { tracked } from "@glimmer/tracking";
export default class UserNavPreferencesNav extends Component { export default class HorizontalOverflowNav extends Component {
@service site; @service site;
@tracked hasScroll; @tracked hasScroll;
@tracked hideRightScroll = false; @tracked hideRightScroll = false;
@ -13,9 +13,14 @@ export default class UserNavPreferencesNav extends Component {
@bind @bind
scrollToActive() { scrollToActive() {
document const activeElement = document.querySelector(
.querySelector(".user-navigation-secondary a.active") ".user-navigation-secondary a.active"
.scrollIntoView({ inline: "center" }); );
activeElement?.scrollIntoView({
block: "nearest",
inline: "center",
});
} }
@bind @bind
@ -60,7 +65,7 @@ export default class UserNavPreferencesNav extends Component {
@action @action
horizScroll(element) { horizScroll(element) {
let scrollSpeed = 50; let scrollSpeed = 100;
let siblingTarget = element.target.previousElementSibling; let siblingTarget = element.target.previousElementSibling;
if (element.target.dataset.direction === "left") { if (element.target.dataset.direction === "left") {
@ -72,8 +77,6 @@ export default class UserNavPreferencesNav extends Component {
siblingTarget.scrollLeft += scrollSpeed; siblingTarget.scrollLeft += scrollSpeed;
}, 50); }, 50);
this.scrollTimer;
element.target.addEventListener("mouseup", this.stopScroll); element.target.addEventListener("mouseup", this.stopScroll);
element.target.addEventListener("mouseleave", this.stopScroll); element.target.addEventListener("mouseleave", this.stopScroll);
} }

47
app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs Normal file
View File

@ -0,0 +1,47 @@
<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 @user.showRead}}
<DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
{{d-icon "history"}}
<span>{{i18n "user.read"}}</span>
</DNavigationItem>
{{/if}}
{{#if @user.showDrafts}}
<DNavigationItem @route="userActivity.drafts">
{{d-icon "pencil-alt"}}
<span>{{@draftLabel}}</span>
</DNavigationItem>
{{/if}}
{{#if (gt @model.pending_posts_count 0)}}
<DNavigationItem @route="userActivity.pending">
{{d-icon "clock"}}
<span>{{@pendingLabel}}</span>
</DNavigationItem>
{{/if}}
<DNavigationItem @route="userActivity.likesGiven">
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.1"}}</span>
</DNavigationItem>
{{#if @user.showBookmarks}}
<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=@model}} />

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

@ -7,7 +7,7 @@
</ol> </ol>
{{/if}} {{/if}}
<ul class="messages-nav nav-pills action-list"> <HorizontalOverflowNav>
{{#if @isPersonal}} {{#if @isPersonal}}
<li class="messages-latest"> <li class="messages-latest">
<LinkTo @route="userPrivateMessages.index" @model={{@user}}> <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
@ -99,7 +99,7 @@
{{/if}} {{/if}}
<PluginOutlet @name="user-messages-nav" @connectorTagName="li" @args={{hash model=@user}} /> <PluginOutlet @name="user-messages-nav" @connectorTagName="li" @args={{hash model=@user}} />
</ul> </HorizontalOverflowNav>
{{#if this.site.desktopView}} {{#if this.site.desktopView}}
<div class="navigation-controls"> <div class="navigation-controls">

38
app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs Normal file
View File

@ -0,0 +1,38 @@
<li>
<LinkTo @route="userNotifications.index">
{{d-icon "bell"}}
<span>{{i18n "user.filters.all"}}</span>
</LinkTo>
</li>
<li>
<LinkTo @route="userNotifications.responses">
{{d-icon "reply"}}
<span>{{i18n "user_action_groups.6"}}</span>
</LinkTo>
</li>
<li>
<LinkTo @route="userNotifications.likesReceived">
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.2"}}</span>
</LinkTo>
</li>
{{#if this.siteSettings.enable_mentions}}
<li>
<LinkTo @route="userNotifications.mentions">
{{d-icon "at"}}
<span>{{i18n "user_action_groups.7"}}</span>
</LinkTo>
</li>
{{/if}}
<li>
<LinkTo @route="userNotifications.edits">
{{d-icon "pencil-alt"}}
<span>{{i18n "user_action_groups.11"}}</span>
</LinkTo>
</li>
<PluginOutlet @name="user-notifications-bottom" @connectorTagName="li" @args={{hash model=@model}} />

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

@ -1,106 +1,74 @@
{{!-- template-lint-disable no-down-event-binding --}} <li class="nav-account">
<LinkTo @route="preferences.account">
<div class="user-navigation user-navigation-secondary {{if this.hasScroll "has-scroll"}}"> {{d-icon "user"}}
{{#if this.hasScroll}} <span>{{i18n "user.preferences_nav.account"}}</span>
<a </LinkTo>
role="button" </li>
{{on "mousedown" this.horizScroll}} <li class="nav-security">
data-direction="left" <LinkTo @route="preferences.security">
class="nav-overflow__scroll-left btn-flat {{if this.hideLeftScroll "transparent"}}" {{d-icon "lock"}}
> <span>{{i18n "user.preferences_nav.security"}}</span>
{{d-icon "chevron-left"}} </LinkTo>
</a> </li>
{{/if}} <li class="nav-profile">
<LinkTo @route="preferences.profile">
<ul {{d-icon "user"}}
{{did-insert this.scrollToActive}} <span>{{i18n "user.preferences_nav.profile"}}</span>
{{on-resize this.checkScroll}} </LinkTo>
{{on "scroll" this.watchScroll}} </li>
class="nav-pills action-list" <li class="nav-emails">
> <LinkTo @route="preferences.emails">
<li class="nav-account"> {{d-icon "envelope"}}
<LinkTo @route="preferences.account"> <span>{{i18n "user.preferences_nav.emails"}}</span>
{{d-icon "user"}} </LinkTo>
<span>{{i18n "user.preferences_nav.account"}}</span> </li>
</LinkTo> <li class="nav-notifications">
</li> <LinkTo @route="preferences.notifications">
<li class="nav-security"> {{d-icon "bell"}}
<LinkTo @route="preferences.security"> <span>{{i18n "user.preferences_nav.notifications"}}</span>
{{d-icon "lock"}} </LinkTo>
<span>{{i18n "user.preferences_nav.security"}}</span> </li>
</LinkTo> {{#if @model.can_change_tracking_preferences}}
</li> <li class="indent nav-categories">
<li class="nav-profile"> <LinkTo @route="preferences.categories">
<LinkTo @route="preferences.profile"> {{d-icon "folder"}}
{{d-icon "user"}} <span>{{i18n "user.preferences_nav.categories"}}</span>
<span>{{i18n "user.preferences_nav.profile"}}</span> </LinkTo>
</LinkTo> </li>
</li> {{/if}}
<li class="nav-emails"> <li class="indent nav-users">
<LinkTo @route="preferences.emails"> <LinkTo @route="preferences.users">
{{d-icon "envelope"}} {{d-icon "users"}}
<span>{{i18n "user.preferences_nav.emails"}}</span> <span>{{i18n "user.preferences_nav.users"}}</span>
</LinkTo> </LinkTo>
</li> </li>
<li class="nav-notifications"> {{#if (and @model.can_change_tracking_preferences @siteSettings.tagging_enabled)}}
<LinkTo @route="preferences.notifications"> <li class="indent nav-tags">
{{d-icon "bell"}} <LinkTo @route="preferences.tags">
<span>{{i18n "user.preferences_nav.notifications"}}</span> {{d-icon "tag"}}
</LinkTo> <span>{{i18n "user.preferences_nav.tags"}}</span>
</li> </LinkTo>
{{#if @model.can_change_tracking_preferences}} </li>
<li class="indent nav-categories"> {{/if}}
<LinkTo @route="preferences.categories"> <li class="nav-interface">
{{d-icon "folder"}} <LinkTo @route="preferences.interface">
<span>{{i18n "user.preferences_nav.categories"}}</span> {{d-icon "desktop"}}
</LinkTo> <span>{{i18n "user.preferences_nav.interface"}}</span>
</li> </LinkTo>
{{/if}} </li>
<li class="indent nav-users"> {{#if @siteSettings.enable_experimental_sidebar_hamburger}}
<LinkTo @route="preferences.users"> <li class="indent nav-sidebar">
{{d-icon "users"}} <LinkTo @route="preferences.sidebar">
<span>{{i18n "user.preferences_nav.users"}}</span> {{d-icon "bars"}}
</LinkTo> <span>{{i18n "user.preferences_nav.sidebar"}}</span>
</li> </LinkTo>
{{#if (and @model.can_change_tracking_preferences @siteSettings.tagging_enabled)}} </li>
<li class="indent nav-tags"> {{/if}}
<LinkTo @route="preferences.tags"> <PluginOutlet @name="user-preferences-nav-under-interface" @connectorTagName="div" @args={{hash model=@model}} />
{{d-icon "tag"}} <li class="nav-apps">
<span>{{i18n "user.preferences_nav.tags"}}</span> <LinkTo @route="preferences.apps">
</LinkTo> {{d-icon "mobile-alt"}}
</li> <span>{{i18n "user.preferences_nav.apps"}}</span>
{{/if}} </LinkTo>
<li class="nav-interface"> </li>
<LinkTo @route="preferences.interface"> <PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=@model}} />
{{d-icon "desktop"}}
<span>{{i18n "user.preferences_nav.interface"}}</span>
</LinkTo>
</li>
{{#if @siteSettings.enable_experimental_sidebar_hamburger}}
<li class="indent nav-sidebar">
<LinkTo @route="preferences.sidebar">
{{d-icon "bars"}}
<span>{{i18n "user.preferences_nav.sidebar"}}</span>
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav-under-interface" @connectorTagName="div" @args={{hash model=@model}} />
<li class="nav-apps">
<LinkTo @route="preferences.apps">
{{d-icon "mobile-alt"}}
<span>{{i18n "user.preferences_nav.apps"}}</span>
</LinkTo>
</li>
<PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=@model}} />
</ul>
{{#if this.hasScroll}}
<a
role="button"
{{on "mousedown" this.horizScroll}}
class="nav-overflow__scroll-right btn-flat {{if this.hideRightScroll "transparent"}}"
>
{{d-icon "chevron-right"}}
</a>
{{/if}}
</div>

33
app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs Normal file
View File

@ -0,0 +1,33 @@
{{!-- template-lint-disable no-down-event-binding --}}
<div class="horizontal-overflow-nav {{if this.hasScroll "has-scroll"}}">
{{#if this.hasScroll}}
<a
role="button"
{{on "mousedown" this.horizScroll}}
data-direction="left"
class="nav-overflow__scroll-left btn-flat {{if this.hideLeftScroll "transparent"}}"
>
{{d-icon "chevron-left"}}
</a>
{{/if}}
<ul
{{on-resize this.checkScroll}}
{{on "scroll" this.watchScroll}}
{{did-insert this.scrollToActive}}
class="nav-pills action-list"
>
{{yield}}
</ul>
{{#if this.hasScroll}}
<a
role="button"
{{on "mousedown" this.horizScroll}}
class="nav-overflow__scroll-right btn-flat {{if this.hideRightScroll "transparent"}}"
>
{{d-icon "chevron-right"}}
</a>
{{/if}}
</div>

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

@ -1,12 +1,14 @@
{{#if this.currentUser.redesigned_user_page_nav_enabled}} {{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-preferences" /> <DSection @pageClass="user-preferences" />
<div class="user-navigation user-navigation-secondary">
<UserNav::PreferencesNav <HorizontalOverflowNav>
@user={{this.model}} <UserNav::PreferencesNav
@viewingSelf={{this.viewingSelf}} @user={{this.model}}
@model={{this.model}} @viewingSelf={{this.viewingSelf}}
@siteSettings={{this.siteSettings}} @model={{this.model}}
/> @siteSettings={{this.siteSettings}}/>
</HorizontalOverflowNav>
</div>
{{else}} {{else}}
<DSection @pageClass="user-preferences" @class="user-secondary-navigation"> <DSection @pageClass="user-preferences" @class="user-secondary-navigation">
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked"> <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">

4
app/assets/javascripts/discourse/app/templates/user-invited.hbs
View File

@ -3,11 +3,11 @@
<DSection @pageClass="user-invites" /> <DSection @pageClass="user-invites" />
<div class="user-navigation user-navigation-secondary"> <div class="user-navigation user-navigation-secondary">
<ul id="navigation-bar" class="nav-pills action-list"> <HorizontalOverflowNav>
<NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} /> <NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} />
<NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} /> <NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} />
<NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} /> <NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
</ul> </HorizontalOverflowNav>
</div> </div>
{{else}} {{else}}
<DSection @class="user-secondary-navigation" @pageClass="user-invites"> <DSection @class="user-secondary-navigation" @pageClass="user-invites">

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

@ -2,56 +2,17 @@
<DSection @pageClass="user-activity" /> <DSection @pageClass="user-activity" />
<div class="user-navigation user-navigation-secondary"> <div class="user-navigation user-navigation-secondary">
<ul class="nav-pills action-list"> <HorizontalOverflowNav>
<DNavigationItem @route="userActivity.index"> <UserNav::ActivityNav
{{d-icon "stream"}} @user={{this.user}}
<span>{{i18n "user.filters.all"}}</span> @viewingSelf={{this.viewingSelf}}
</DNavigationItem> @model={{this.model}}
<DNavigationItem @route="userActivity.topics"> @siteSettings={{this.siteSettings}}
{{d-icon "list-ul"}} @draftLabel={{this.draftLabel}}
<span>{{i18n "user_action_groups.4"}}</span> @pendingLabel={{this.pendingLabel}}/>
</DNavigationItem> </HorizontalOverflowNav>
<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"}}>
{{d-icon "history"}}
<span>{{i18n "user.read"}}</span>
</DNavigationItem>
{{/if}}
{{#if this.user.showDrafts}}
<DNavigationItem @route="userActivity.drafts">
{{d-icon "pencil-alt"}}
<span>{{this.draftLabel}}</span>
</DNavigationItem>
{{/if}}
{{#if (gt this.model.pending_posts_count 0)}}
<DNavigationItem @route="userActivity.pending">
{{d-icon "clock"}}
<span>{{this.pendingLabel}}</span>
</DNavigationItem>
{{/if}}
<DNavigationItem @route="userActivity.likesGiven">
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.1"}}</span>
</DNavigationItem>
{{#if this.user.showBookmarks}}
<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}} />
</ul>
</div> </div>
{{else}} {{else}}
<DSection @pageClass="user-activity" @class="user-secondary-navigation" @scrollTop={{false}}> <DSection @pageClass="user-activity" @class="user-secondary-navigation" @scrollTop={{false}}>
<nav role="navigation"> <nav role="navigation">

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

@ -1,54 +1,18 @@
{{#if this.currentUser.redesigned_user_page_nav_enabled}} {{#if this.currentUser.redesigned_user_page_nav_enabled}}
<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="notifications-nav nav-pills action-list"> <HorizontalOverflowNav>
<li> <UserNav::NotificationsNav
<LinkTo @route="userNotifications.index"> @model={{this.model}}
{{d-icon "bell"}} @siteSettings={{this.siteSettings}}/>
<span>{{i18n "user.filters.all"}}</span> </HorizontalOverflowNav>
</LinkTo>
</li>
<li>
<LinkTo @route="userNotifications.responses">
{{d-icon "reply"}}
<span>{{i18n "user_action_groups.6"}}</span>
</LinkTo>
</li>
<li>
<LinkTo @route="userNotifications.likesReceived">
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.2"}}</span>
</LinkTo>
</li>
{{#if this.siteSettings.enable_mentions}}
<li>
<LinkTo @route="userNotifications.mentions">
{{d-icon "at"}}
<span>{{i18n "user_action_groups.7"}}</span>
</LinkTo>
</li>
{{/if}}
<li>
<LinkTo @route="userNotifications.edits">
{{d-icon "pencil-alt"}}
<span>{{i18n "user_action_groups.11"}}</span>
</LinkTo>
</li>
<PluginOutlet @name="user-notifications-bottom" @connectorTagName="li" @args={{hash model=this.model}} />
</ul>
{{#if this.model}}
<div class="navigation-controls">
<DButton @title="user.dismiss_notifications_tooltip" @class="btn btn-default dismiss-notifications" @action={{action "resetNew"}} @label="user.dismiss_notifications" @icon="check" @disabled={{this.allNotificationsRead}} />
</div>
{{/if}}
</div> </div>
{{#if this.model}}
<div class="navigation-controls">
<DButton @title="user.dismiss_notifications_tooltip" @class="btn btn-default dismiss-notifications" @action={{action "resetNew"}} @label="user.dismiss_notifications" @icon="check" @disabled={{this.allNotificationsRead}} />
</div>
{{/if}}
{{else}} {{else}}
<DSection @pageClass="user-notifications" @class="user-secondary-navigation"> <DSection @pageClass="user-notifications" @class="user-secondary-navigation">
<MobileNav @class="notifications-nav" @desktopClass="notification-list action-list nav-stacked"> <MobileNav @class="notifications-nav" @desktopClass="notification-list action-list nav-stacked">

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

@ -89,16 +89,24 @@
gap: 0 0.5em; gap: 0 0.5em;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
.horizontal-overflow-nav {
position: relative;
min-width: 0;
width: 100%;
}
.select-kit .select-kit-header { .select-kit .select-kit-header {
height: 100%; height: 100%;
padding: 0.5em 1em; padding: 0.5em 1em;
}
.category-breadcrumb {
@include breakpoint(large) { @include breakpoint(large) {
font-size: var(--font-down-1); font-size: var(--font-down-1);
} }
} > li {
margin: 0;
.category-breadcrumb > li { }
margin: 0;
} }
.navigation-controls { .navigation-controls {
@ -123,7 +131,7 @@
.d-icon { .d-icon {
pointer-events: none; pointer-events: none;
margin-bottom: 0.2em; margin-bottom: 0.2em;
color: var(--tertiary); color: var(--quaternary);
} }
&.transparent { &.transparent {
// hiding with opacity so we can transition visibility // hiding with opacity so we can transition visibility