UX: fixes and adjustments for user nav (#19954)

This commit is contained in:
Kris 2023-01-23 14:28:55 -05:00 committed by GitHub
parent e3a48d2681
commit 239815c4a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 65 deletions

View File

@ -114,62 +114,6 @@
@args={{hash model=this.model}}
/>
<UserProfileAvatar @user={{this.model}} @tagName="" />
<section class="controls">
<ul>
{{#if this.model.can_send_private_message_to_user}}
<li>
<DButton
@class="btn-primary compose-pm"
@action={{route-action "composePrivateMessage" this.model}}
@icon="envelope"
@label="user.private_message"
/>
</li>
{{/if}}
{{#if this.canMuteOrIgnoreUser}}
<li>
<UserNotificationsDropdown
@user={{this.model}}
@value={{this.userNotificationLevel}}
@updateNotificationLevel={{action
"updateNotificationLevel"
}}
/>
</li>
{{/if}}
{{#if this.displayTopLevelAdminButton}}
<li><a
href={{this.model.adminPath}}
class="btn btn-default"
>{{d-icon "wrench"}}<span class="d-button-label">{{i18n
"admin.user.show_admin_profile"
}}</span></a></li>
{{/if}}
<PluginOutlet
@name="user-profile-controls"
@connectorTagName="li"
@args={{hash model=this.model}}
/>
{{#if this.canExpandProfile}}
<li>
<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}}
</ul>
</section>
<div class="primary-textual">
<div class="user-profile-names">
<div
@ -325,6 +269,62 @@
@args={{hash model=this.model}}
/>
</div>
<section class="controls">
<ul>
{{#if this.model.can_send_private_message_to_user}}
<li>
<DButton
@class="btn-primary compose-pm"
@action={{route-action "composePrivateMessage" this.model}}
@icon="envelope"
@label="user.private_message"
/>
</li>
{{/if}}
{{#if this.canMuteOrIgnoreUser}}
<li>
<UserNotificationsDropdown
@user={{this.model}}
@value={{this.userNotificationLevel}}
@updateNotificationLevel={{action
"updateNotificationLevel"
}}
/>
</li>
{{/if}}
{{#if this.displayTopLevelAdminButton}}
<li><a
href={{this.model.adminPath}}
class="btn btn-default"
>{{d-icon "wrench"}}<span class="d-button-label">{{i18n
"admin.user.show_admin_profile"
}}</span></a></li>
{{/if}}
<PluginOutlet
@name="user-profile-controls"
@connectorTagName="li"
@args={{hash model=this.model}}
/>
{{#if this.canExpandProfile}}
<li>
<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}}
</ul>
</section>
</div>
<PluginOutlet
@name="user-profile-above-collapsed-info"

View File

@ -1,5 +1,4 @@
.new-user-wrapper {
margin-top: -15px; // temp, can remove margin from sibling element after nav finalized
.user-navigation {
--user-navigation__border-width: 4px;
border-bottom: 1px solid var(--primary-low);

View File

@ -80,7 +80,7 @@
.user-main {
.about {
width: 100%;
margin-bottom: 15px;
margin-bottom: 0;
&.has-background {
.user-profile-image {
@ -163,6 +163,7 @@
.primary {
width: 100%;
position: relative;
display: flex;
.bio {
max-height: 300px;
@ -176,7 +177,7 @@
.user-profile-avatar {
position: relative;
float: left;
align-self: flex-start;
.avatar-flair {
bottom: 8px;
right: 16px;
@ -185,6 +186,7 @@
}
.controls {
margin-left: auto;
ul {
list-style-type: none;
margin-top: 0;
@ -754,6 +756,11 @@
}
}
.primary-textual {
flex: 1 1 auto;
min-width: 0;
}
.primary-textual .staged,
.user-card .staged {
font-style: italic;

View File

@ -176,8 +176,6 @@ table.user-invite-list {
}
.controls {
padding: 0;
float: right;
max-width: 13.5em;
li {

View File

@ -120,6 +120,6 @@
.new-user-content-wrapper {
.user-content {
margin-top: 2em;
margin-top: 1em;
}
}

View File

@ -5,6 +5,7 @@
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
grid-gap: 16px;
padding-top: 1em;
.user-primary-navigation {
grid-column-start: 1;
grid-row-start: 1;
@ -199,9 +200,7 @@
}
.controls {
order: 3;
flex: 1 1 25%;
margin-left: auto;
.btn {
margin-bottom: 16px;
@ -267,7 +266,7 @@
.user-main .collapsed-info.about .details {
display: flex;
margin-bottom: 16px;
margin-bottom: 0;
.user-profile-avatar {
margin: 0;
flex: 0 0 auto;