DEV: Add outlet wrapper for user card information replacement (#29523)

* DEV: Add outlet wrapper for user card information replacement

* Fix format issues

* Fix format issues
This commit is contained in:
Amanda Alves Branquinho 2024-11-05 14:03:20 -03:00 committed by GitHub
parent afdca41fd5
commit 758de8167b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 110 additions and 93 deletions

View File

@ -27,56 +27,48 @@
</div>
{{else}}
<div class="card-row first-row">
<div class="user-card-avatar" aria-hidden="true">
{{#if this.contentHidden}}
<span class="card-huge-avatar">{{bound-avatar
this.user
"huge"
}}</span>
{{else}}
<a
{{on "click" this.handleShowUser}}
href={{this.user.path}}
class="card-huge-avatar"
tabindex="-1"
>{{bound-avatar this.user "huge"}}</a>
{{/if}}
<UserAvatarFlair @user={{this.user}} />
<div>
<PluginOutlet
@name="user-card-avatar-flair"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
/>
</div>
</div>
<div class="names">
<div
class="names__primary
{{this.staff}}
{{this.newUser}}
{{if this.nameFirst 'full-name' 'username'}}"
>
<PluginOutlet
@name="user-card-main-info"
@outletArgs={{hash
user=this.user
post=this.post
contentHidden=this.contentHidden
handleShowUser=this.handleShowUser
}}
>
<div class="user-card-avatar" aria-hidden="true">
{{#if this.contentHidden}}
<span class="name-username-wrapper">
{{if
this.nameFirst
this.user.name
(format-username this.user.username)
}}
</span>
<span class="card-huge-avatar">{{bound-avatar
this.user
"huge"
}}</span>
{{else}}
<a
{{on "click" this.handleShowUser}}
href={{this.user.path}}
class="user-profile-link"
aria-label={{i18n
"user.profile_link"
username=this.user.username
}}
>
class="card-huge-avatar"
tabindex="-1"
>{{bound-avatar this.user "huge"}}</a>
{{/if}}
<UserAvatarFlair @user={{this.user}} />
<div>
<PluginOutlet
@name="user-card-avatar-flair"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
/>
</div>
</div>
<div class="names">
<div
class="names__primary
{{this.staff}}
{{this.newUser}}
{{if this.nameFirst 'full-name' 'username'}}"
>
{{#if this.contentHidden}}
<span class="name-username-wrapper">
{{if
this.nameFirst
@ -84,45 +76,65 @@
(format-username this.user.username)
}}
</span>
{{user-status this.user currentUser=this.currentUser}}
</a>
{{/if}}
</div>
<PluginOutlet
@name="user-card-after-username"
@connectorTagName="div"
@outletArgs={{hash user=this.user showUser=this.handleShowUser}}
/>
{{#if this.nameFirst}}
<div class="names__secondary username">{{this.user.username}}</div>
{{else}}
{{#if this.user.name}}
<div class="names__secondary full-name">{{this.user.name}}</div>
{{/if}}
{{/if}}
{{#if this.user.title}}
<div class="names__secondary">{{this.user.title}}</div>
{{/if}}
{{#if this.user.staged}}
<div class="names__secondary staged">{{i18n "user.staged"}}</div>
{{/if}}
{{#if this.hasStatus}}
<div class="user-status">
{{html-safe this.userStatusEmoji}}
<span class="user-status__description">
{{this.user.status.description}}
</span>
{{format-date this.user.status.ends_at format="tiny"}}
{{else}}
<a
{{on "click" this.handleShowUser}}
href={{this.user.path}}
class="user-profile-link"
aria-label={{i18n
"user.profile_link"
username=this.user.username
}}
>
<span class="name-username-wrapper">
{{if
this.nameFirst
this.user.name
(format-username this.user.username)
}}
</span>
{{user-status this.user currentUser=this.currentUser}}
</a>
{{/if}}
</div>
{{/if}}
<div>
<PluginOutlet
@name="user-card-post-names"
@name="user-card-after-username"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
@outletArgs={{hash user=this.user showUser=this.handleShowUser}}
/>
{{#if this.nameFirst}}
<div
class="names__secondary username"
>{{this.user.username}}</div>
{{else}}
{{#if this.user.name}}
<div class="names__secondary full-name">{{this.user.name}}</div>
{{/if}}
{{/if}}
{{#if this.user.title}}
<div class="names__secondary">{{this.user.title}}</div>
{{/if}}
{{#if this.user.staged}}
<div class="names__secondary staged">{{i18n "user.staged"}}</div>
{{/if}}
{{#if this.hasStatus}}
<div class="user-status">
{{html-safe this.userStatusEmoji}}
<span class="user-status__description">
{{this.user.status.description}}
</span>
{{format-date this.user.status.ends_at format="tiny"}}
</div>
{{/if}}
<div>
<PluginOutlet
@name="user-card-post-names"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
/>
</div>
</div>
</div>
</PluginOutlet>
<ul class="usercard-controls">
{{#if this.user.can_send_private_message_to_user}}
<li class="compose-pm">
@ -378,20 +390,25 @@
{{#if this.showBadges}}
<div class="card-row">
{{#if this.user.featured_user_badges}}
<div class="badge-section">
{{#each this.user.featured_user_badges as |ub|}}
<UserBadge @badge={{ub.badge}} @user={{this.user}} />
{{/each}}
{{#if this.showMoreBadges}}
<span class="more-user-badges">
<LinkTo @route="user.badges" @model={{this.user}}>
{{i18n "badges.more_badges" count=this.moreBadgesCount}}
</LinkTo>
</span>
{{/if}}
</div>
{{/if}}
<PluginOutlet
@name="user-card-badges"
@outletArgs={{hash user=this.user post=this.post}}
>
{{#if this.user.featured_user_badges}}
<div class="badge-section">
{{#each this.user.featured_user_badges as |ub|}}
<UserBadge @badge={{ub.badge}} @user={{this.user}} />
{{/each}}
{{#if this.showMoreBadges}}
<span class="more-user-badges">
<LinkTo @route="user.badges" @model={{this.user}}>
{{i18n "badges.more_badges" count=this.moreBadgesCount}}
</LinkTo>
</span>
{{/if}}
</div>
{{/if}}
</PluginOutlet>
</div>
{{/if}}
{{/if}}