FEATURE: show avatar flair on group, badges and directory pages (#6732)

FEATURE: show avatar flair on group, badges and directory pages (#6732)
From 1d649e147b6f8caaeccadb4acc256b83e517fad0 Mon Sep 17 00:00:00 2001
From: Maja Komel <maja.komel@gmail.com>
Date: Thu, 6 Dec 2018 12:18:52 +0100
Subject: [PATCH] FEATURE: show avatar flair on group, badges and directory
 pages (#6732)


diff --git a/app/assets/javascripts/discourse/templates/components/user-info.hbs b/app/assets/javascripts/discourse/templates/components/user-info.hbs
index ef2e2c0..7870de1 100644
--- a/app/assets/javascripts/discourse/templates/components/user-info.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-info.hbs
@@ -1,5 +1,14 @@
 <div class="user-image">
-  <a href="{{unbound userPath}}" data-user-card="{{unbound user.username}}">{{avatar user imageSize="large"}}</a>
+  <div class="user-image-inner">
+    <a href="{{unbound userPath}}" data-user-card="{{unbound user.username}}">{{avatar user imageSize="large"}}</a>
+    {{#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}}
+  </div>
 </div>
 
 <div class="user-detail">
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 9003472..5d9e5ea 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -62,6 +62,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-repeat: no-repeat;
 
     .d-icon {
       height: $icon-size;
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 373b8bf..883a157 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -228,6 +228,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      background-repeat: no-repeat;
 
       .d-icon {
         height: $icon-size;
diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss
index 0dbacd6..a71e7ef 100644
--- a/app/assets/stylesheets/common/components/user-info.scss
+++ b/app/assets/stylesheets/common/components/user-info.scss
@@ -7,6 +7,12 @@
   .user-image {
     float: left;
     padding-right: 4px;
+    margin-right: 10px;
+  }
+
+  .user-image-inner {
+    position: relative;
+    display: inline-block;
   }
 
   .user-detail {
@@ -39,6 +45,18 @@
     }
   }
 
+  .avatar-flair {
+    background-repeat: no-repeat;
+    background-position: center;
+    position: absolute;
+    bottom: -2px;
+    right: -8px;
+    background-size: 18px 18px;
+    border-radius: 12px;
+    width: 24px;
+    height: 24px;
+  }
+
   &.small {
     width: 333px;
     @media screen and (max-width: $small-width) {
diff --git a/app/assets/stylesheets/desktop/components/user-info.scss b/app/assets/stylesheets/desktop/components/user-info.scss
index ba13a6e..d135a42 100644
--- a/app/assets/stylesheets/desktop/components/user-info.scss
+++ b/app/assets/stylesheets/desktop/components/user-info.scss
@@ -12,6 +12,7 @@
     }
     .user-image {
       width: 55px;
+      margin-right: 0;
     }
   }
 }
diff --git a/app/controllers/directory_items_controller.rb b/app/controllers/directory_items_controller.rb
index 1a66c74..5045660 100644
--- a/app/controllers/directory_items_controller.rb
+++ b/app/controllers/directory_items_controller.rb
@@ -7,11 +7,12 @@ class DirectoryItemsController < ApplicationController
     period = params.require(:period)
     period_type = DirectoryItem.period_types[period.to_sym]
     raise Discourse::InvalidAccess.new(:period_type) unless period_type
-
     result = DirectoryItem.where(period_type: period_type).includes(:user)
 
     if params[:group]
       result = result.includes(user: :groups).where(users: { groups: { name: params[:group] } })
+    else
+      result = result.includes(user: :primary_group)
     end
 
     if params[:exclude_usernames]
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index 2a191d7..19ae0b4 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -241,11 +241,13 @@ class GroupsController < ApplicationController
       .order(username_lower: dir)
       .limit(limit)
       .offset(offset)
+      .includes(:primary_group)
 
     owners = users
       .order(order)
       .order(username_lower: dir)
       .where('group_users.owner')
+      .includes(:primary_group)
 
     render json: {
       members: serialize_data(members, GroupUserSerializer),
diff --git a/app/controllers/user_badges_controller.rb b/app/controllers/user_badges_controller.rb
index c830798..b3852a6 100644
--- a/app/controllers/user_badges_controller.rb
+++ b/app/controllers/user_badges_controller.rb
@@ -6,7 +6,7 @@ class UserBadgesController < ApplicationController
 
     badge = fetch_badge_from_params
     user_badges = badge.user_badges.order('granted_at DESC, id DESC').limit(96)
-    user_badges = user_badges.includes(:user, :granted_by, badge: :badge_type, post: :topic)
+    user_badges = user_badges.includes(:user, :granted_by, badge: :badge_type, post: :topic, user: :primary_group)
 
     grant_count = nil
 
diff --git a/app/serializers/concerns/user_primary_group_mixin.rb b/app/serializers/concerns/user_primary_group_mixin.rb
new file mode 100644
index 0000000..43f7d90
--- /dev/null
+++ b/app/serializers/concerns/user_primary_group_mixin.rb
@@ -0,0 +1,42 @@
+module UserPrimaryGroupMixin
+
+  def self.included(klass)
+    klass.attributes :primary_group_name,
+                     :primary_group_flair_url,
+                     :primary_group_flair_bg_color,
+                     :primary_group_flair_color
+  end
+
+  def primary_group_name
+    object&.primary_group&.name
+  end
+
+  def include_primary_group_name?
+    object&.primary_group.present?
+  end
+
+  def primary_group_flair_url
+    object&.primary_group&.flair_url
+  end
+
+  def include_primary_group_flair_url?
+    object&.primary_group&.flair_url.present?
+  end
+
+  def primary_group_flair_bg_color
+    object&.primary_group&.flair_bg_color
+  end
+
+  def include_primary_group_flair_bg_color?
+    object&.primary_group&.flair_bg_color.present?
+  end
+
+  def primary_group_flair_color
+    object&.primary_group&.flair_color
+  end
+
+  def include_primary_group_flair_color?
+    object&.primary_group&.flair_color.present?
+  end
+
+end
diff --git a/app/serializers/directory_item_serializer.rb b/app/serializers/directory_item_serializer.rb
index 753d7a8..a81430b 100644
--- a/app/serializers/directory_item_serializer.rb
+++ b/app/serializers/directory_item_serializer.rb
@@ -1,9 +1,13 @@
 class DirectoryItemSerializer < ApplicationSerializer
 
+  class UserSerializer < UserNameSerializer
+    include UserPrimaryGroupMixin
+  end
+
   attributes :id,
              :time_read
 
-  has_one :user, embed: :objects, serializer: UserNameSerializer
+  has_one :user, embed: :objects, serializer: UserSerializer
   attributes *DirectoryItem.headings
 
   def id
diff --git a/app/serializers/group_user_serializer.rb b/app/serializers/group_user_serializer.rb
index c254088..43f7fbc 100644
--- a/app/serializers/group_user_serializer.rb
+++ b/app/serializers/group_user_serializer.rb
@@ -1,7 +1,14 @@
 class GroupUserSerializer < BasicUserSerializer
-  attributes :name, :title, :last_posted_at, :last_seen_at, :added_at
+  include UserPrimaryGroupMixin
+
+  attributes :name,
+             :title,
+             :last_posted_at,
+             :last_seen_at,
+             :added_at
 
   def include_added_at
     object.respond_to? :added_at
   end
+
 end
diff --git a/app/serializers/user_badge_serializer.rb b/app/serializers/user_badge_serializer.rb
index 9a5e6d9..3c73951 100644
--- a/app/serializers/user_badge_serializer.rb
+++ b/app/serializers/user_badge_seri

GitHub

This commit has been mentioned on Discourse Meta. There might be relevant details there: