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
GitHub
parent
7d8cda9858
commit
14532ad425
|
|
@ -1,5 +1,4 @@
|
|||
{{#if @shouldDisplay}}
|
||||
<section class="user-primary-navigation" {{did-insert this.registerClickListener}} {{will-destroy this.unregisterClickListener}}>
|
||||
<section class="user-navigation user-navigation-primary">
|
||||
<ul class="main-nav nav nav-pills user-nav">
|
||||
{{#unless @user.profile_hidden}}
|
||||
<li class="summary">
|
||||
|
|
@ -76,4 +75,3 @@
|
|||
{{/if}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -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}}>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,80 @@
|
|||
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
||||
<DSection @pageClass="user-preferences" />
|
||||
|
||||
<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>
|
||||
<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" @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">
|
||||
|
|
@ -70,6 +147,7 @@
|
|||
<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}} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,15 @@
|
|||
{{#if this.can_see_invite_details}}
|
||||
{{#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}} />
|
||||
|
|
@ -7,5 +18,6 @@
|
|||
</MobileNav>
|
||||
</DSection>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{outlet}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{{else}}
|
||||
<div class='user-content-wrapper'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
.new-user-wrapper {
|
||||
.user-nav {
|
||||
flex-direction: column;
|
||||
|
||||
> li {
|
||||
.user-navigation {
|
||||
width: 100%;
|
||||
|
||||
.d-icon {
|
||||
margin-right: 0.5em;
|
||||
.nav-pills {
|
||||
margin: 0.5em 0;
|
||||
overflow-x: auto;
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
li {
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> a,
|
||||
button {
|
||||
padding: 1em 0.75em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue