FEATURE: avatar flair on user cards

app/assets/javascripts/discourse/lib/transform-post.js.es6

@@ -28,10 +28,10 @@ export function transformBasicPost(post) {
     isDeleted: post.deleted_at || post.user_deleted,
     deletedByAvatarTemplate: null,
     deletedByUsername: null,
-    primaryGroupName: post.primary_group_name,
-    primaryGroupFlairUrl: post.primary_group_flair_url,
-    primaryGroupFlairBgColor: post.primary_group_flair_bg_color,
-    primaryGroupFlairColor: post.primary_group_flair_color,
+    primary_group_name: post.primary_group_name,
+    primary_group_flair_url: post.primary_group_flair_url,
+    primary_group_flair_bg_color: post.primary_group_flair_bg_color,
+    primary_group_flair_color: post.primary_group_flair_color,
     wiki: post.wiki,
     firstPost: post.post_number === 1,
     post_number: post.post_number,

app/assets/javascripts/discourse/templates/user-card.hbs

@@ -1,7 +1,10 @@
 {{#if visible}}
 <div class="card-content">
 
-  <a href={{user.path}} {{action "showUser"}} class="card-huge-avatar">{{bound-avatar avatar "huge"}}</a>
+  <div class="user-card-avatar">
+    <a href={{user.path}} {{action "showUser"}} class="card-huge-avatar">{{bound-avatar avatar "huge"}}</a>
+    {{mount-widget widget="avatar-flair" args=user}}
+  </div>
 
   <div class="names">
     <span>

app/assets/javascripts/discourse/widgets/avatar-flair.js.es6

@@ -0,0 +1,40 @@
+import { createWidget, applyDecorators } from 'discourse/widgets/widget';
+import { h } from 'virtual-dom';
+
+createWidget('avatar-flair', {
+  tagName: 'div.avatar-flair',
+
+  isIcon(attrs) {
+    return (attrs.primary_group_flair_url && attrs.primary_group_flair_url.substr(0,3) === 'fa-');
+  },
+
+  title(attrs) {
+    return attrs.primary_group_name;
+  },
+
+  buildClasses(attrs) {
+    return 'avatar-flair-' + attrs.primary_group_name + (attrs.primary_group_flair_bg_color ? ' rounded' : '');
+  },
+
+  buildAttributes(attrs) {
+    var style = '';
+    if (!this.isIcon(attrs)) {
+      style += 'background-image: url(' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_url) + '); ';
+    }
+    if (attrs.primary_group_flair_bg_color) {
+      style += 'background-color: #' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_bg_color) + '; ';
+    }
+    if (attrs.primary_group_flair_color) {
+      style += 'color: #' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_color) + '; ';
+    }
+    return {style: style};
+  },
+
+  html(attrs) {
+    if (this.isIcon(attrs)) {
+      return [h('i', { className: 'fa ' + attrs.primary_group_flair_url })];
+    } else {
+      return [];
+    }
+  }
+});

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -77,43 +77,6 @@ createWidget('reply-to-tab', {
   }
 });
 
-createWidget('post-avatar-flair', {
-  tagName: 'div.avatar-flair',
-
-  isIcon(attrs) {
-    return (attrs.primaryGroupFlairUrl && attrs.primaryGroupFlairUrl.substr(0,3) === 'fa-');
-  },
-
-  title(attrs) {
-    return attrs.primaryGroupName;
-  },
-
-  buildClasses(attrs) {
-    return 'avatar-flair-' + attrs.primaryGroupName + (attrs.primaryGroupFlairBgColor ? ' rounded' : '');
-  },
-
-  buildAttributes(attrs) {
-    var style = '';
-    if (!this.isIcon(attrs)) {
-      style += 'background-image: url(' + Handlebars.Utils.escapeExpression(attrs.primaryGroupFlairUrl) + '); ';
-    }
-    if (attrs.primaryGroupFlairBgColor) {
-      style += 'background-color: #' + Handlebars.Utils.escapeExpression(attrs.primaryGroupFlairBgColor) + '; ';
-    }
-    if (attrs.primaryGroupFlairColor) {
-      style += 'color: #' + Handlebars.Utils.escapeExpression(attrs.primaryGroupFlairColor) + '; ';
-    }
-    return {style: style};
-  },
-
-  html(attrs) {
-    if (this.isIcon(attrs)) {
-      return [h('i', { className: 'fa ' + attrs.primaryGroupFlairUrl })];
-    } else {
-      return [];
-    }
-  }
-});
 
 createWidget('post-avatar', {
   tagName: 'div.topic-avatar',
@@ -131,16 +94,14 @@ createWidget('post-avatar', {
         template: attrs.avatar_template,
         username: attrs.username,
         url: attrs.usernameUrl,
-        className: 'main-avatar',
-        flairUrl: attrs.primaryGroupFlairUrl,
-        flairBgColor: attrs.primaryGroupFlairBgColor
+        className: 'main-avatar'
       });
     }
 
     const result = [body];
 
-    if (attrs.primaryGroupFlairUrl || attrs.primaryGroupFlairBgColor) {
-      result.push(this.attach('post-avatar-flair', attrs));
+    if (attrs.primary_group_flair_url || attrs.primary_group_flair_bg_color) {
+      result.push(this.attach('avatar-flair', attrs));
     }
 
     result.push(h('div.poster-avatar-extra'));
@@ -454,7 +415,7 @@ export default createWidget('post', {
     if (attrs.topicOwner) { classNames.push('topic-owner'); }
     if (attrs.hidden) { classNames.push('post-hidden'); }
     if (attrs.deleted) { classNames.push('deleted'); }
-    if (attrs.primaryGroupName) { classNames.push(`group-${attrs.primaryGroupName}`); }
+    if (attrs.primary_group_name) { classNames.push(`group-${attrs.primary_group_name}`); }
     if (attrs.wiki) { classNames.push(`wiki`); }
     if (attrs.isWhisper) { classNames.push('whisper'); }
     if (attrs.isModeratorAction || (attrs.isWarning && attrs.firstPost)) {

app/assets/stylesheets/common/base/topic-post.scss

@@ -153,22 +153,24 @@ aside.quote {
   }
 }
 
-.topic-avatar {
+.topic-avatar, .user-card-avatar {
   position: relative;
 }
 
-.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
+.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .user-card-avatar .avatar-flair {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-size: 20px 20px;
   background-repeat: no-repeat;
   background-position: center;
-  width: 20px;
-  height: 20px;
   position: absolute;
   bottom: 0;
   right: -6px;
+}
+.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
+  background-size: 20px 20px;
+  width: 20px;
+  height: 20px;
   &.rounded {
     background-size: 18px 18px;
     border-radius: 12px;
@@ -178,6 +180,19 @@ aside.quote {
     right: -8px;
   }
 }
+.user-card-avatar .avatar-flair {
+  background-size: 40px 40px;
+  width: 40px;
+  height: 40px;
+  &.rounded {
+    background-size: 30px 30px;
+    border-radius: 24px;
+    width: 40px;
+    height: 40px;
+    bottom: -2px;
+    right: -4px;
+  }
+}
 .topic-avatar .poster-avatar-extra {
   display: none;
 }

app/assets/stylesheets/desktop/user-card.scss

@@ -153,7 +153,7 @@ $user_card_background: $secondary;
     a.mention {
       text-decoration: none;
     }
-    
+
     .overflow {
       max-height: 60px;
       overflow: hidden;
@@ -172,7 +172,7 @@ $user_card_background: $secondary;
     }
   }
 
-  img.avatar {
+  .user-card-avatar {
     float: left;
     margin-right: 10px;
     margin-top: -53px;

app/serializers/user_serializer.rb

@@ -65,7 +65,11 @@ class UserSerializer < BasicUserSerializer
              :user_fields,
              :topic_post_count,
              :pending_count,
-             :profile_view_count
+             :profile_view_count,
+             :primary_group_name,
+             :primary_group_flair_url,
+             :primary_group_flair_bg_color,
+             :primary_group_flair_color
 
   has_one :invited_by, embed: :object, serializer: BasicUserSerializer
   has_many :groups, embed: :object, serializer: BasicGroupSerializer
@@ -253,6 +257,22 @@ class UserSerializer < BasicUserSerializer
     object.suspended?
   end
 
+  def primary_group_name
+    object.primary_group.try(:name)
+  end
+
+  def primary_group_flair_url
+    object.try(:primary_group).try(:flair_url)
+  end
+
+  def primary_group_flair_bg_color
+    object.try(:primary_group).try(:flair_bg_color)
+  end
+
+  def primary_group_flair_color
+    object.try(:primary_group).try(:flair_color)
+  end
+
   ###
   ### STAFF ATTRIBUTES
   ###