DEV: Try out double nav for new experimental user page nav (#18495)

No tests and this redesign is still highly highly experimental
This commit is contained in:
Alan Guo Xiang Tan 2022-10-07 12:20:39 +08:00 committed by GitHub
parent 7d8cda9858
commit 14532ad425
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 304 additions and 216 deletions

View File

@ -1,79 +1,77 @@
{{#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">
<LinkTo @route="user.summary">
{{d-icon "user"}}
{{i18n "user.summary.title"}}
</LinkTo>
</li>
<section class="user-navigation user-navigation-primary">
<ul class="main-nav nav nav-pills user-nav">
{{#unless @user.profile_hidden}}
<li class="summary">
<LinkTo @route="user.summary">
{{d-icon "user"}}
{{i18n "user.summary.title"}}
</LinkTo>
</li>
<li class="user-activity">
<LinkTo @route="userActivity">
{{d-icon "stream"}}
{{i18n "user.activity_stream"}}
</LinkTo>
</li>
{{/unless}}
<li class="user-activity">
<LinkTo @route="userActivity">
{{d-icon "stream"}}
{{i18n "user.activity_stream"}}
</LinkTo>
</li>
{{/unless}}
{{#if @showNotificationsTab}}
<li class="user-notifications">
<LinkTo @route="userNotifications">
{{d-icon "bell" class="glyph"}}{{i18n "user.notifications"}}
</LinkTo>
</li>
{{/if}}
{{#if @showNotificationsTab}}
<li class="user-notifications">
<LinkTo @route="userNotifications">
{{d-icon "bell" class="glyph"}}{{i18n "user.notifications"}}
</LinkTo>
</li>
{{/if}}
{{#if @showPrivateMessages}}
<li class="private-messages">
<LinkTo @route="userPrivateMessages">
{{d-icon "far-envelope"}}
{{i18n "user.private_messages"}}
</LinkTo>
</li>
{{/if}}
{{#if @showPrivateMessages}}
<li class="private-messages">
<LinkTo @route="userPrivateMessages">
{{d-icon "far-envelope"}}
{{i18n "user.private_messages"}}
</LinkTo>
</li>
{{/if}}
{{#if @canInviteToForum}}
<li class="invited">
<LinkTo @route="userInvited">
{{d-icon "user-plus"}}
{{i18n "user.invited.title"}}
</LinkTo>
</li>
{{/if}}
{{#if @canInviteToForum}}
<li class="invited">
<LinkTo @route="userInvited">
{{d-icon "user-plus"}}
{{i18n "user.invited.title"}}
</LinkTo>
</li>
{{/if}}
{{#if @showBadges}}
<li class="badges">
<LinkTo @route="user.badges">
{{d-icon "certificate"}}
{{i18n "badges.title"}}
</LinkTo>
</li>
{{/if}}
{{#if @showBadges}}
<li class="badges">
<LinkTo @route="user.badges">
{{d-icon "certificate"}}
{{i18n "badges.title"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet
@name="user-main-nav"
@connectorTagName="li"
@args={{hash model=@user}} />
<PluginOutlet
@name="user-main-nav"
@connectorTagName="li"
@args={{hash model=@user}} />
{{#if @user.can_edit}}
<li class="preferences">
<LinkTo @route="preferences">
{{d-icon "cog"}}
{{i18n "user.preferences"}}
</LinkTo>
</li>
{{/if}}
{{#if @user.can_edit}}
<li class="preferences">
<LinkTo @route="preferences">
{{d-icon "cog"}}
{{i18n "user.preferences"}}
</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}}
{{#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>

View File

@ -1,4 +1,4 @@
<div class="user-navigation-container">
<div class="user-navigation user-navigation-secondary">
{{#if (gt @user.groupsWithMessages.length 0)}}
<ol class="category-breadcrumb">
<li>
@ -7,7 +7,7 @@
</ol>
{{/if}}
<ul id="navigation-bar" class="messages-nav nav-pills action-list">
<ul class="messages-nav nav-pills action-list">
{{#if @isPersonal}}
<li>
<LinkTo @route="userPrivateMessages.index" @model={{@user}}>

View File

@ -17,13 +17,6 @@ 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) {
@ -195,11 +188,6 @@ export default Controller.extend(CanCheckEmails, {
}
),
@action
toggleUserNav() {
this.toggleProperty("displayUserNav");
},
get displayTopLevelAdminButton() {
if (!this.currentUser?.staff) {
return false;

View File

@ -1,75 +1,153 @@
<DSection @pageClass="user-preferences" @class="user-secondary-navigation">
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
<li class="nav-account">
<LinkTo @route="preferences.account">
{{i18n "user.preferences_nav.account"}}
</LinkTo>
</li>
<li class="nav-security">
<LinkTo @route="preferences.security">
{{i18n "user.preferences_nav.security"}}
</LinkTo>
</li>
<li class="nav-profile">
<LinkTo @route="preferences.profile">
{{i18n "user.preferences_nav.profile"}}
</LinkTo>
</li>
<li class="nav-emails">
<LinkTo @route="preferences.emails">
{{i18n "user.preferences_nav.emails"}}
</LinkTo>
</li>
<li class="nav-notifications">
<LinkTo @route="preferences.notifications">
{{i18n "user.preferences_nav.notifications"}}
</LinkTo>
</li>
{{#if this.model.can_change_tracking_preferences}}
<li class="indent nav-categories">
<LinkTo @route="preferences.categories">
{{i18n "user.preferences_nav.categories"}}
</LinkTo>
</li>
{{/if}}
<li class="indent nav-users">
<LinkTo @route="preferences.users">
{{i18n "user.preferences_nav.users"}}
</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"}}
</LinkTo>
</li>
{{/if}}
<li class="nav-interface">
<LinkTo @route="preferences.interface">
{{i18n "user.preferences_nav.interface"}}
</LinkTo>
</li>
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-preferences" />
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
<li class="indent nav-sidebar">
<LinkTo @route="preferences.sidebar">
{{i18n "user.preferences_nav.sidebar"}}
<div class="user-navigation user-navigation-secondary">
<ul class="nav-pills action-list">
<li class="nav-account">
<LinkTo @route="preferences.account">
{{i18n "user.preferences_nav.account"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
{{#if this.model.userApiKeys}}
<li class="nav-apps">
<LinkTo @route="preferences.apps">
{{i18n "user.preferences_nav.apps"}}
<li class="nav-security">
<LinkTo @route="preferences.security">
{{i18n "user.preferences_nav.security"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav" @tagName="span" @connectorTagName="li" @args={{hash model=this.model}} />
</MobileNav>
</DSection>
<li class="nav-profile">
<LinkTo @route="preferences.profile">
{{i18n "user.preferences_nav.profile"}}
</LinkTo>
</li>
<li class="nav-emails">
<LinkTo @route="preferences.emails">
{{i18n "user.preferences_nav.emails"}}
</LinkTo>
</li>
<li class="nav-notifications">
<LinkTo @route="preferences.notifications">
{{i18n "user.preferences_nav.notifications"}}
</LinkTo>
</li>
{{#if this.model.can_change_tracking_preferences}}
<li class="indent nav-categories">
<LinkTo @route="preferences.categories">
{{i18n "user.preferences_nav.categories"}}
</LinkTo>
</li>
{{/if}}
<li class="indent nav-users">
<LinkTo @route="preferences.users">
{{i18n "user.preferences_nav.users"}}
</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"}}
</LinkTo>
</li>
{{/if}}
<li class="nav-interface">
<LinkTo @route="preferences.interface">
{{i18n "user.preferences_nav.interface"}}
</LinkTo>
</li>
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
<li class="indent nav-sidebar">
<LinkTo @route="preferences.sidebar">
{{i18n "user.preferences_nav.sidebar"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
{{#if this.model.userApiKeys}}
<li class="nav-apps">
<LinkTo @route="preferences.apps">
{{i18n "user.preferences_nav.apps"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=this.model}} />
</ul>
</div>
{{else}}
<DSection @pageClass="user-preferences" @class="user-secondary-navigation">
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
<li class="nav-account">
<LinkTo @route="preferences.account">
{{i18n "user.preferences_nav.account"}}
</LinkTo>
</li>
<li class="nav-security">
<LinkTo @route="preferences.security">
{{i18n "user.preferences_nav.security"}}
</LinkTo>
</li>
<li class="nav-profile">
<LinkTo @route="preferences.profile">
{{i18n "user.preferences_nav.profile"}}
</LinkTo>
</li>
<li class="nav-emails">
<LinkTo @route="preferences.emails">
{{i18n "user.preferences_nav.emails"}}
</LinkTo>
</li>
<li class="nav-notifications">
<LinkTo @route="preferences.notifications">
{{i18n "user.preferences_nav.notifications"}}
</LinkTo>
</li>
{{#if this.model.can_change_tracking_preferences}}
<li class="indent nav-categories">
<LinkTo @route="preferences.categories">
{{i18n "user.preferences_nav.categories"}}
</LinkTo>
</li>
{{/if}}
<li class="indent nav-users">
<LinkTo @route="preferences.users">
{{i18n "user.preferences_nav.users"}}
</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"}}
</LinkTo>
</li>
{{/if}}
<li class="nav-interface">
<LinkTo @route="preferences.interface">
{{i18n "user.preferences_nav.interface"}}
</LinkTo>
</li>
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
<li class="indent nav-sidebar">
<LinkTo @route="preferences.sidebar">
{{i18n "user.preferences_nav.sidebar"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
{{#if this.model.userApiKeys}}
<li class="nav-apps">
<LinkTo @route="preferences.apps">
{{i18n "user.preferences_nav.apps"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="user-preferences-nav" @tagName="span" @connectorTagName="li" @args={{hash model=this.model}} />
</MobileNav>
</DSection>
{{/if}}
<section class="user-content user-preferences">
<PluginOutlet @name="above-user-preferences" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />

View File

@ -1,11 +1,23 @@
{{#if this.can_see_invite_details}}
<DSection @class="user-secondary-navigation" @pageClass="user-invites">
<MobileNav @class="invites-nav" @desktopClass="nav-stacked action-list">
<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}} />
</MobileNav>
</DSection>
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-invites" />
<div class="user-navigation user-navigation-secondary">
<ul id="navigation-bar" class="nav-pills action-list">
<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>
</div>
{{else}}
<DSection @class="user-secondary-navigation" @pageClass="user-invites">
<MobileNav @class="invites-nav" @desktopClass="nav-stacked action-list">
<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}} />
</MobileNav>
</DSection>
{{/if}}
{{/if}}
{{outlet}}

View File

@ -77,12 +77,6 @@
<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 (and this.site.mobileView this.currentUser.redesigned_user_page_nav_enabled)}}
<li>
<DButton @class="btn-default toggle-mobile-user-menu" @action={{this.toggleUserNav}} @icon="bars" @label="hamburger_menu" />
</li>
{{/if}}
</ul>
</section>
@ -237,8 +231,6 @@
{{#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}}
@ -249,11 +241,9 @@
@showDrafts={{this.showDrafts}}
@showBookmarks={{this.showBookmarks}} />
{{#if (or this.site.desktopView (not this.displayUserNav))}}
<div class="new-user-content-wrapper">
{{outlet}}
</div>
{{/if}}
<div class="new-user-content-wrapper">
{{outlet}}
</div>
</div>
{{else}}
<div class='user-content-wrapper'>

View File

@ -1,8 +1,8 @@
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-activity" />
<div class="user-navigation-container">
<ul id="navigation-bar" class="nav-pills action-list">
<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>

View File

@ -1,7 +1,7 @@
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-notifications" />
<div class="user-navigation-container">
<div class="user-navigation user-navigation-secondary">
<ul id="navigation-bar" class="messages-nav nav-pills action-list">
<li>
<LinkTo @route="userNotifications.index">

View File

@ -1,4 +1,48 @@
.new-user-wrapper {
.user-navigation {
&.user-navigation-secondary {
margin-top: 0.5em;
.nav-pills {
border-bottom: 1px solid var(--primary-low);
}
}
.nav-pills {
width: 100%;
border-bottom: 2px solid var(--primary-low);
margin: 0;
li {
margin: 0;
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;
width: 100%;
border-bottom: 2px solid var(--quaternary);
bottom: -4px;
left: 0px;
}
}
}
}
}
.user-nav-dropdown-button {
background: transparent;
}

View File

@ -7,14 +7,7 @@
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-navigation-container {
.user-navigation-secondary {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
@ -24,7 +17,7 @@
flex-direction: row;
}
.user-navigation-container ~ .user-content {
.user-navigation-secondary ~ .user-content {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
@ -32,6 +25,7 @@
}
.user-content {
margin-top: 1em;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
@ -43,11 +37,6 @@
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 {

View File

@ -1,22 +1,24 @@
.new-user-wrapper {
.user-nav {
flex-direction: column;
.user-navigation {
width: 100%;
> li {
width: 100%;
.nav-pills {
margin: 0.5em 0;
overflow-x: auto;
.d-icon {
margin-right: 0.5em;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&:not(:first-of-type) {
border-top: 1px solid var(--primary-low);
}
> a,
button {
padding: 1em 0.75em;
width: 100%;
li {
a {
display: flex;
flex-direction: row;
padding: 0.5em 0.5em;
white-space: nowrap;
}
}
}
}
@ -49,17 +51,4 @@
@include ellipsis;
}
}
#navigation-bar {
margin-top: 1em;
display: flex;
flex-wrap: nowrap;
width: 100%;
overflow-x: scroll;
margin-bottom: 0;
padding-bottom: 0.5em;
a {
white-space: nowrap;
}
}
}