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 { tracked } from "@glimmer/tracking";
export default class UserNavPreferencesNav extends Component {
export default class HorizontalOverflowNav extends Component {
@service site;
@tracked hasScroll;
@tracked hideRightScroll = false;
@ -13,9 +13,14 @@ export default class UserNavPreferencesNav extends Component {
@bind
scrollToActive() {
document
.querySelector(".user-navigation-secondary a.active")
.scrollIntoView({ inline: "center" });
const activeElement = document.querySelector(
".user-navigation-secondary a.active"
);
activeElement?.scrollIntoView({
block: "nearest",
inline: "center",
});
}
@bind
@ -60,7 +65,7 @@ export default class UserNavPreferencesNav extends Component {
@action
horizScroll(element) {
let scrollSpeed = 50;
let scrollSpeed = 100;
let siblingTarget = element.target.previousElementSibling;
if (element.target.dataset.direction === "left") {
@ -72,8 +77,6 @@ export default class UserNavPreferencesNav extends Component {
siblingTarget.scrollLeft += scrollSpeed;
}, 50);
this.scrollTimer;
element.target.addEventListener("mouseup", 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>
{{/if}}
<ul class="messages-nav nav-pills action-list">
<HorizontalOverflowNav>
{{#if @isPersonal}}
<li class="messages-latest">
<LinkTo @route="userPrivateMessages.index" @model={{@user}}>
@ -99,7 +99,7 @@
{{/if}}
<PluginOutlet @name="user-messages-nav" @connectorTagName="li" @args={{hash model=@user}} />
</ul>
</HorizontalOverflowNav>
{{#if this.site.desktopView}}
<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 --}}
<div class="user-navigation user-navigation-secondary {{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
{{did-insert this.scrollToActive}}
{{on-resize this.checkScroll}}
{{on "scroll" this.watchScroll}}
class="nav-pills action-list"
>
<li class="nav-account">
<LinkTo @route="preferences.account">
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.account"}}</span>
</LinkTo>
</li>
<li class="nav-security">
<LinkTo @route="preferences.security">
{{d-icon "lock"}}
<span>{{i18n "user.preferences_nav.security"}}</span>
</LinkTo>
</li>
<li class="nav-profile">
<LinkTo @route="preferences.profile">
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.profile"}}</span>
</LinkTo>
</li>
<li class="nav-emails">
<LinkTo @route="preferences.emails">
{{d-icon "envelope"}}
<span>{{i18n "user.preferences_nav.emails"}}</span>
</LinkTo>
</li>
<li class="nav-notifications">
<LinkTo @route="preferences.notifications">
{{d-icon "bell"}}
<span>{{i18n "user.preferences_nav.notifications"}}</span>
</LinkTo>
</li>
{{#if @model.can_change_tracking_preferences}}
<li class="indent nav-categories">
<LinkTo @route="preferences.categories">
{{d-icon "folder"}}
<span>{{i18n "user.preferences_nav.categories"}}</span>
</LinkTo>
</li>
{{/if}}
<li class="indent nav-users">
<LinkTo @route="preferences.users">
{{d-icon "users"}}
<span>{{i18n "user.preferences_nav.users"}}</span>
</LinkTo>
</li>
{{#if (and @model.can_change_tracking_preferences @siteSettings.tagging_enabled)}}
<li class="indent nav-tags">
<LinkTo @route="preferences.tags">
{{d-icon "tag"}}
<span>{{i18n "user.preferences_nav.tags"}}</span>
</LinkTo>
</li>
{{/if}}
<li class="nav-interface">
<LinkTo @route="preferences.interface">
{{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>
<li class="nav-account">
<LinkTo @route="preferences.account">
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.account"}}</span>
</LinkTo>
</li>
<li class="nav-security">
<LinkTo @route="preferences.security">
{{d-icon "lock"}}
<span>{{i18n "user.preferences_nav.security"}}</span>
</LinkTo>
</li>
<li class="nav-profile">
<LinkTo @route="preferences.profile">
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.profile"}}</span>
</LinkTo>
</li>
<li class="nav-emails">
<LinkTo @route="preferences.emails">
{{d-icon "envelope"}}
<span>{{i18n "user.preferences_nav.emails"}}</span>
</LinkTo>
</li>
<li class="nav-notifications">
<LinkTo @route="preferences.notifications">
{{d-icon "bell"}}
<span>{{i18n "user.preferences_nav.notifications"}}</span>
</LinkTo>
</li>
{{#if @model.can_change_tracking_preferences}}
<li class="indent nav-categories">
<LinkTo @route="preferences.categories">
{{d-icon "folder"}}
<span>{{i18n "user.preferences_nav.categories"}}</span>
</LinkTo>
</li>
{{/if}}
<li class="indent nav-users">
<LinkTo @route="preferences.users">
{{d-icon "users"}}
<span>{{i18n "user.preferences_nav.users"}}</span>
</LinkTo>
</li>
{{#if (and @model.can_change_tracking_preferences @siteSettings.tagging_enabled)}}
<li class="indent nav-tags">
<LinkTo @route="preferences.tags">
{{d-icon "tag"}}
<span>{{i18n "user.preferences_nav.tags"}}</span>
</LinkTo>
</li>
{{/if}}
<li class="nav-interface">
<LinkTo @route="preferences.interface">
{{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}} />

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}}
<DSection @pageClass="user-preferences" />
<UserNav::PreferencesNav
@user={{this.model}}
@viewingSelf={{this.viewingSelf}}
@model={{this.model}}
@siteSettings={{this.siteSettings}}
/>
<div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav>
<UserNav::PreferencesNav
@user={{this.model}}
@viewingSelf={{this.viewingSelf}}
@model={{this.model}}
@siteSettings={{this.siteSettings}}/>
</HorizontalOverflowNav>
</div>
{{else}}
<DSection @pageClass="user-preferences" @class="user-secondary-navigation">
<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" />
<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="expired" @i18nLabel={{this.expiredLabel}} />
<NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
</ul>
</HorizontalOverflowNav>
</div>
{{else}}
<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" />
<div class="user-navigation user-navigation-secondary">
<ul class="nav-pills action-list">
<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"}}>
{{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>
<HorizontalOverflowNav>
<UserNav::ActivityNav
@user={{this.user}}
@viewingSelf={{this.viewingSelf}}
@model={{this.model}}
@siteSettings={{this.siteSettings}}
@draftLabel={{this.draftLabel}}
@pendingLabel={{this.pendingLabel}}/>
</HorizontalOverflowNav>
</div>
{{else}}
<DSection @pageClass="user-activity" @class="user-secondary-navigation" @scrollTop={{false}}>
<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}}
<DSection @pageClass="user-notifications" />
<div class="user-navigation user-navigation-secondary">
<ul id="navigation-bar" class="notifications-nav nav-pills action-list">
<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=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}}
<HorizontalOverflowNav>
<UserNav::NotificationsNav
@model={{this.model}}
@siteSettings={{this.siteSettings}}/>
</HorizontalOverflowNav>
</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}}
<DSection @pageClass="user-notifications" @class="user-secondary-navigation">
<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;
border-bottom: 1px solid var(--primary-low);
.horizontal-overflow-nav {
position: relative;
min-width: 0;
width: 100%;
}
.select-kit .select-kit-header {
height: 100%;
padding: 0.5em 1em;
}
.category-breadcrumb {
@include breakpoint(large) {
font-size: var(--font-down-1);
}
}
.category-breadcrumb > li {
margin: 0;
> li {
margin: 0;
}
}
.navigation-controls {
@ -123,7 +131,7 @@
.d-icon {
pointer-events: none;
margin-bottom: 0.2em;
color: var(--tertiary);
color: var(--quaternary);
}
&.transparent {
// hiding with opacity so we can transition visibility