UX: Show user card on load (#7380)
This commit is contained in:
Tim Lange
Régis Hanol
parent
1d0816b2cf
commit
66789d73c9
|
|
@ -53,6 +53,7 @@ export default Ember.Component.extend(
|
|||
showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
|
||||
|
||||
user: null,
|
||||
loading: false,
|
||||
|
||||
// If inside a topic
|
||||
topicPostCount: null,
|
||||
|
|
@ -150,6 +151,10 @@ export default Ember.Component.extend(
|
|||
},
|
||||
|
||||
_showCallback(username, $target) {
|
||||
this._positionCard($target);
|
||||
const currentUser = Discourse.__container__.lookup("current-user:main");
|
||||
this.setProperties({ visible: true, loading: true, user: currentUser });
|
||||
|
||||
const args = { stats: false };
|
||||
args.include_post_count_for = this.get("topic.id");
|
||||
User.findByUsername(username, args)
|
||||
|
|
@ -160,8 +165,7 @@ export default Ember.Component.extend(
|
|||
user.topic_post_count[args.include_post_count_for]
|
||||
);
|
||||
}
|
||||
this._positionCard($target);
|
||||
this.setProperties({ user, visible: true });
|
||||
this.setProperties({ user, loading: false });
|
||||
})
|
||||
.catch(() => this._close())
|
||||
.finally(() => this.set("loading", null));
|
||||
|
|
|
|||
|
|
@ -93,6 +93,21 @@
|
|||
tagName=""}}
|
||||
</div>
|
||||
|
||||
{{#if loading}}
|
||||
<div class="card-row second-row">
|
||||
<div class="animated-placeholder"></div>
|
||||
</div>
|
||||
<div class="card-row third-row">
|
||||
<div class="animated-placeholder"></div>
|
||||
</div>
|
||||
<div class="card-row fourth-row">
|
||||
<div class="animated-placeholder"></div>
|
||||
</div>
|
||||
<div class="card-row sixth-row">
|
||||
<div class="animated-placeholder"></div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if user.profile_hidden}}
|
||||
<div class="card-row second-row">
|
||||
<div class='profile-hidden'>
|
||||
|
|
@ -145,44 +160,46 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="card-row fourth-row">
|
||||
{{#unless user.profile_hidden}}
|
||||
<div class="metadata">
|
||||
{{#if user.last_posted_at}}
|
||||
<h3><span class='desc'>{{i18n 'last_post'}}</span>
|
||||
{{format-date user.last_posted_at leaveAgo="true"}}</h3>
|
||||
{{/if}}
|
||||
<h3><span class='desc'>{{i18n 'joined'}}</span>
|
||||
{{format-date user.created_at leaveAgo="true"}}</h3>
|
||||
{{#if user.time_read}}
|
||||
<h3 title="{{timeReadTooltip}}">
|
||||
<span class='desc'>{{i18n 'time_read'}}</span>
|
||||
{{format-duration user.time_read}}
|
||||
{{#if showRecentTimeRead}}
|
||||
<span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
{{#if showCheckEmail}}
|
||||
<h3 class="email">
|
||||
{{d-icon "far-envelope" title="user.email.title"}}
|
||||
{{#if user.email}}
|
||||
{{user.email}}
|
||||
{{else}}
|
||||
{{d-button
|
||||
action=(action "checkEmail")
|
||||
actionParam=user
|
||||
icon="far-envelope"
|
||||
label="admin.users.check_email.text"
|
||||
class="btn-primary"}}
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-card-metadata" args=(hash user=user)}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
|
||||
</div>
|
||||
{{#unless loading}}
|
||||
<div class="card-row fourth-row">
|
||||
{{#unless user.profile_hidden}}
|
||||
<div class="metadata">
|
||||
{{#if user.last_posted_at}}
|
||||
<h3><span class='desc'>{{i18n 'last_post'}}</span>
|
||||
{{format-date user.last_posted_at leaveAgo="true"}}</h3>
|
||||
{{/if}}
|
||||
<h3><span class='desc'>{{i18n 'joined'}}</span>
|
||||
{{format-date user.created_at leaveAgo="true"}}</h3>
|
||||
{{#if user.time_read}}
|
||||
<h3 title="{{timeReadTooltip}}">
|
||||
<span class='desc'>{{i18n 'time_read'}}</span>
|
||||
{{format-duration user.time_read}}
|
||||
{{#if showRecentTimeRead}}
|
||||
<span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
{{#if showCheckEmail}}
|
||||
<h3 class="email">
|
||||
{{d-icon "far-envelope" title="user.email.title"}}
|
||||
{{#if user.email}}
|
||||
{{user.email}}
|
||||
{{else}}
|
||||
{{d-button
|
||||
action=(action "checkEmail")
|
||||
actionParam=user
|
||||
icon="far-envelope"
|
||||
label="admin.users.check_email.text"
|
||||
class="btn-primary"}}
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-card-metadata" args=(hash user=user)}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
{{#if publicUserFields}}
|
||||
<div class="card-row fifth-row">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,27 @@ $card_width: 580px;
|
|||
$avatar_width: 120px;
|
||||
$avatar_margin: -50px; // negative margin makes avatars extend above cards
|
||||
|
||||
// placeholder
|
||||
@keyframes placeHolderShimmer {
|
||||
0% {
|
||||
background-position: -468px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 468px 0;
|
||||
}
|
||||
}
|
||||
.animated-placeholder {
|
||||
animation-duration: 1.25s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeHolderShimmer;
|
||||
animation-timing-function: linear;
|
||||
background: darkgray;
|
||||
background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// shared styles for user and group cards
|
||||
#user-card,
|
||||
#group-card {
|
||||
|
|
|
|||
Loading…
Reference in New Issue