UX: fixes and adjustments for user nav (#19954)
This commit is contained in:
Kris
GitHub
parent
e3a48d2681
commit
239815c4a4
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -176,8 +176,6 @@ table.user-invite-list {
|
|||
}
|
||||
|
||||
.controls {
|
||||
padding: 0;
|
||||
float: right;
|
||||
max-width: 13.5em;
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -120,6 +120,6 @@
|
|||
|
||||
.new-user-content-wrapper {
|
||||
.user-content {
|
||||
margin-top: 2em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue