Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Show user card on load (#7380)

This commit is contained in:
Tim Lange 2019-04-19 09:20:03 +02:00 committed by Régis Hanol
parent 1d0816b2cf
commit 66789d73c9
3 changed files with 82 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/components/user-card-contents.js.es6
View File

@ -53,6 +53,7 @@ export default Ember.Component.extend(
showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"), showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
user: null, user: null,
loading: false,
// If inside a topic // If inside a topic
topicPostCount: null, topicPostCount: null,
@ -150,6 +151,10 @@ export default Ember.Component.extend(
}, },
_showCallback(username, $target) { _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 }; const args = { stats: false };
args.include_post_count_for = this.get("topic.id"); args.include_post_count_for = this.get("topic.id");
User.findByUsername(username, args) User.findByUsername(username, args)
@ -160,8 +165,7 @@ export default Ember.Component.extend(
user.topic_post_count[args.include_post_count_for] user.topic_post_count[args.include_post_count_for]
); );
} }
this._positionCard($target); this.setProperties({ user, loading: false });
this.setProperties({ user, visible: true });
}) })
.catch(() => this._close()) .catch(() => this._close())
.finally(() => this.set("loading", null)); .finally(() => this.set("loading", null));

17
app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
View File

@ -93,6 +93,21 @@
tagName=""}} tagName=""}}
</div> </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}} {{#if user.profile_hidden}}
<div class="card-row second-row"> <div class="card-row second-row">
<div class='profile-hidden'> <div class='profile-hidden'>
@ -145,6 +160,7 @@
</div> </div>
{{/if}} {{/if}}
{{#unless loading}}
<div class="card-row fourth-row"> <div class="card-row fourth-row">
{{#unless user.profile_hidden}} {{#unless user.profile_hidden}}
<div class="metadata"> <div class="metadata">
@ -183,6 +199,7 @@
{{/unless}} {{/unless}}
{{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}} {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
</div> </div>
{{/unless}}
{{#if publicUserFields}} {{#if publicUserFields}}
<div class="card-row fifth-row"> <div class="card-row fifth-row">

21
app/assets/stylesheets/common/components/user-card.scss
View File

@ -2,6 +2,27 @@ $card_width: 580px;
$avatar_width: 120px; $avatar_width: 120px;
$avatar_margin: -50px; // negative margin makes avatars extend above cards $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 // shared styles for user and group cards
#user-card, #user-card,
#group-card { #group-card {