diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6 index 780ee6fb467..83e83ac9b08 100644 --- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 +++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6 @@ -150,6 +150,9 @@ export default Ember.Component.extend( }, _showCallback(username, $target) { + this._positionCard($target); + this.setProperties({ visible: true, loading: true }); + const args = { stats: false }; args.include_post_count_for = this.get("topic.id"); User.findByUsername(username, args) @@ -160,8 +163,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 }); }) .catch(() => this._close()) .finally(() => this.set("loading", null)); diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs index 32cc458f473..7cad78aad77 100644 --- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs +++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs @@ -1,223 +1,242 @@ {{#if visible}}
- -
-
- {{#if user.profile_hidden}} - {{bound-avatar user "huge"}} - {{else}} - {{bound-avatar user "huge"}} - {{/if}} - {{#if user.primary_group_name}} - {{avatar-flair - flairURL=user.primary_group_flair_url - flairBgColor=user.primary_group_flair_bg_color - flairColor=user.primary_group_flair_color - groupName=user.primary_group_name}} - {{/if}} - {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}} + {{#if loading}} +
+
+
+
-
-

+ +
+
+
+
+
+
+
+
+
+
+
+
+ {{else}} +
+
{{#if user.profile_hidden}} - - {{if nameFirst user.name (format-username username)}} - + {{bound-avatar user "huge"}} {{else}} - {{bound-avatar user "huge"}} + {{/if}} + {{#if user.primary_group_name}} + {{avatar-flair + flairURL=user.primary_group_flair_url + flairBgColor=user.primary_group_flair_bg_color + flairColor=user.primary_group_flair_color + groupName=user.primary_group_name}} + {{/if}} + {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}} +
+
+

+ {{#if user.profile_hidden}} {{if nameFirst user.name (format-username username)}} - {{user-status user currentUser=currentUser}} - - {{/if}} -

- {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser" user)) tagName=''}} - {{#unless nameFirst}} - {{#if user.name}} -

{{user.name}}

- {{/if}} - {{else}} -

{{username}}

- {{/unless}} - {{#if user.title}} -

{{user.title}}

- {{/if}} - {{#if user.staged}} -

{{i18n 'user.staged'}}

- {{/if}} - {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}} -
-
    - {{#if user.can_send_private_message_to_user}} -
  • - {{d-button - class="btn-primary" - action=(route-action "composePrivateMessage" user post) - icon="envelope" - label="user.private_message"}} -
    • - {{/if}} - {{#if showFilter}} -
  • - {{d-button - class="btn-default" - action=(action "togglePosts" user) - icon="filter" - translatedLabel=togglePostsLabel}} -
    • - {{/if}} - {{#if hasUserFilters}} -
  • - {{d-button - action=(action "cancelFilter") - icon="times" - label="topic.filters.cancel"}} -
    • - {{/if}} - {{#if showDelete}} -
  • - {{d-button - class="btn-danger" - action=(action "deleteUser") - actionParam=user - icon="exclamation-triangle" - label="admin.user.delete"}} -
    • - {{/if}} -
- {{plugin-outlet - name="user-card-additional-controls" - args=(hash user=user close=(action "close")) - tagName=""}} -
- - {{#if user.profile_hidden}} -
-
- {{i18n "user.profile_hidden"}} -
-
- {{/if}} - - {{#if isSuspendedOrHasBio}} -
- {{#if user.suspend_reason}} -
-
- {{d-icon "ban"}} - {{i18n 'user.suspended_notice' date=user.suspendedTillDate}} -
-
- {{i18n 'user.suspended_reason'}} - {{user.suspend_reason}} -
-
- {{else}} - {{#if user.bio_cooked}} -
{{text-overflow class="overflow" text=user.bio_excerpt}}
- {{/if}} - {{/if}} -
- {{/if}} - - {{#if hasLocationOrWebsite}} -
-
- {{#if user.location}} - {{d-icon "map-marker-alt"}} - {{user.location}} - {{/if}} - {{#if user.website_name}} - - {{d-icon "globe"}} - {{#if linkWebsite}} - {{user.website_name}} - {{else}} - {{user.website_name}} - {{/if}} - - {{/if}} - {{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}} -
-
- {{/if}} - -
- {{#unless user.profile_hidden}} -
- {{#if user.last_posted_at}} -

{{i18n 'last_post'}} - {{format-date user.last_posted_at leaveAgo="true"}}

- {{/if}} -

{{i18n 'joined'}} - {{format-date user.created_at leaveAgo="true"}}

- {{#if user.time_read}} -

- {{i18n 'time_read'}} - {{format-duration user.time_read}} - {{#if showRecentTimeRead}} - ({{i18n 'time_read_recently' time_read=recentTimeRead}}) - {{/if}} -

- {{/if}} - {{#if showCheckEmail}} - - {{/if}} - {{plugin-outlet name="user-card-metadata" args=(hash user=user)}} -
- {{/unless}} - {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}} -
- - {{#if publicUserFields}} -
-
- {{#each publicUserFields as |uf|}} - {{#if uf.value}} -
- {{uf.field.name}}: - {{uf.value}} -
+ {{else}} + {{/if}} - {{/each}} +

+ {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser" user)) tagName=''}} + {{#unless nameFirst}} + {{#if user.name}} +

{{user.name}}

+ {{/if}} + {{else}} +

{{username}}

+ {{/unless}} + {{#if user.title}} +

{{user.title}}

+ {{/if}} + {{#if user.staged}} +

{{i18n 'user.staged'}}

+ {{/if}} + {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}}
+
    + {{#if user.can_send_private_message_to_user}} +
  • + {{d-button + class="btn-primary" + action=(route-action "composePrivateMessage" user post) + icon="envelope" + label="user.private_message"}} +
    • + {{/if}} + {{#if showFilter}} +
  • + {{d-button + class="btn-default" + action=(action "togglePosts" user) + icon="filter" + translatedLabel=togglePostsLabel}} +
    • + {{/if}} + {{#if hasUserFilters}} +
  • + {{d-button + action=(action "cancelFilter") + icon="times" + label="topic.filters.cancel"}} +
    • + {{/if}} + {{#if showDelete}} +
  • + {{d-button + class="btn-danger" + action=(action "deleteUser") + actionParam=user + icon="exclamation-triangle" + label="admin.user.delete"}} +
    • + {{/if}} +
+ {{plugin-outlet + name="user-card-additional-controls" + args=(hash user=user close=(action "close")) + tagName=""}}
- {{/if}} - {{plugin-outlet name="user-card-before-badges" args=(hash user=user)}} + {{#if user.profile_hidden}} +
+
+ {{i18n "user.profile_hidden"}} +
+
+ {{/if}} - {{#if showBadges}} -
- {{#if user.featured_user_badges}} -
- {{#each user.featured_user_badges as |ub|}} - {{user-badge badge=ub.badge user=user}} - {{/each}} - {{#if showMoreBadges}} - - {{#link-to 'user.badges' user}} - {{i18n 'badges.more_badges' count=moreBadgesCount}} - {{/link-to}} + {{#if isSuspendedOrHasBio}} +
+ {{#if user.suspend_reason}} +
+
+ {{d-icon "ban"}} + {{i18n 'user.suspended_notice' date=user.suspendedTillDate}} +
+
+ {{i18n 'user.suspended_reason'}} + {{user.suspend_reason}} +
+
+ {{else}} + {{#if user.bio_cooked}} +
{{text-overflow class="overflow" text=user.bio_excerpt}}
+ {{/if}} + {{/if}} +
+ {{/if}} + + {{#if hasLocationOrWebsite}} +
+
+ {{#if user.location}} + {{d-icon "map-marker-alt"}} + {{user.location}} + {{/if}} + {{#if user.website_name}} + + {{d-icon "globe"}} + {{#if linkWebsite}} + {{user.website_name}} + {{else}} + {{user.website_name}} + {{/if}} {{/if}} + {{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}}
- {{/if}} -
- {{/if}} +
+ {{/if}} +
+ {{#unless user.profile_hidden}} +
+ {{#if user.last_posted_at}} +

{{i18n 'last_post'}} + {{format-date user.last_posted_at leaveAgo="true"}}

+ {{/if}} +

{{i18n 'joined'}} + {{format-date user.created_at leaveAgo="true"}}

+ {{#if user.time_read}} +

+ {{i18n 'time_read'}} + {{format-duration user.time_read}} + {{#if showRecentTimeRead}} + ({{i18n 'time_read_recently' time_read=recentTimeRead}}) + {{/if}} +

+ {{/if}} + {{#if showCheckEmail}} + + {{/if}} + {{plugin-outlet name="user-card-metadata" args=(hash user=user)}} +
+ {{/unless}} + {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}} +
+ + {{#if publicUserFields}} +
+
+ {{#each publicUserFields as |uf|}} + {{#if uf.value}} +
+ {{uf.field.name}}: + {{uf.value}} +
+ {{/if}} + {{/each}} +
+
+ {{/if}} + + {{plugin-outlet name="user-card-before-badges" args=(hash user=user)}} + + {{#if showBadges}} +
+ {{#if user.featured_user_badges}} +
+ {{#each user.featured_user_badges as |ub|}} + {{user-badge badge=ub.badge user=user}} + {{/each}} + {{#if showMoreBadges}} + + {{#link-to 'user.badges' user}} + {{i18n 'badges.more_badges' count=moreBadgesCount}} + {{/link-to}} + + {{/if}} +
+ {{/if}} +
+ {{/if}} + {{/if}}
-{{/if}} \ No newline at end of file +{{/if}} diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss index 1868d407dd6..0b4d89088dc 100644 --- a/app/assets/stylesheets/common/components/user-card.scss +++ b/app/assets/stylesheets/common/components/user-card.scss @@ -2,6 +2,44 @@ $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: $primary-low; + background: linear-gradient( + to right, + $primary-low 10%, + $primary-low-mid 18%, + $primary-low 33% + ); + height: 20px; + position: relative; +} +.card-avatar-placeholder { + width: $avatar_width; + height: $avatar_width; + border-radius: 100%; + animation-duration: 5s; + background: linear-gradient( + to right, + $primary-low 10%, + $primary-low-mid 38%, + $primary-low 73% + ); +} + // shared styles for user and group cards #user-card, #group-card {