FEATURE: add flair to avatars using new settings in the groups admin UI

app/assets/javascripts/admin/controllers/admin-group.js.es6

@@ -1,5 +1,6 @@
 import { popupAjaxError } from 'discourse/lib/ajax-error';
 import { propertyEqual } from 'discourse/lib/computed';
+import { escapeExpression } from 'discourse/lib/utilities';
 
 export default Ember.Controller.extend({
   needs: ['adminGroupsType'],
@@ -35,6 +36,23 @@ export default Ember.Controller.extend({
     ];
   }.property(),
 
+  flairPreviewStyle: function() {
+    var style = '';
+    if (this.get('model.flair_url')) {
+      style += 'background-image: url(' + escapeExpression(this.get('model.flair_url')) + '); ';
+    }
+    if (this.get('model.flairBackgroundHexColor')) {
+      style += 'background-color: #' + this.get('model.flairBackgroundHexColor') + ';';
+    }
+    return style;
+  }.property('model.flair_url', 'model.flairBackgroundHexColor'),
+
+  flairPreviewClasses: function() {
+    if (this.get('model.flairBackgroundHexColor')) {
+      return 'rounded';
+    }
+  }.property('model.flairBackgroundHexColor'),
+
   actions: {
     next() {
       if (this.get("showingLast")) { return; }

app/assets/javascripts/admin/templates/group.hbs

@@ -101,6 +101,38 @@
     {{/if}}
   {{/unless}}
 
+  {{#unless model.automatic}}
+    <div class="flair_inputs">
+      <div class="flair_left">
+        <div>
+          <label for="flair_url">{{i18n 'admin.groups.flair_url'}}</label>
+          {{text-field name="flair_url" value=model.flair_url placeholderKey="admin.groups.flair_url_placeholder"}}
+        </div>
+
+        <div>
+          <label for="flair_bg_color">{{i18n 'admin.groups.flair_bg_color'}}</label>
+          {{text-field name="flair_bg_color" class="flair_bg_color" value=model.flair_bg_color placeholderKey="admin.groups.flair_bg_color_placeholder"}}
+        </div>
+      </div>
+
+      {{#if flairPreviewStyle}}
+        <div class="flair_right">
+          <div>
+            <label>{{i18n 'admin.groups.flair_preview'}}</label>
+            <div class="avatar-flair-preview">
+              <div class="avatar-wrapper">
+                <img alt width="45" height="45" src="https://avatars.discourse.org/v3/letter/a/a3d4f5/45.png" class="avatar actor" title="demo">
+              </div>
+              <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}></div>
+            </div>
+          </div>
+        </div>
+      {{/if}}
+
+      <div class="clearfix"></div>
+    </div>
+  {{/unless}}
+
   <div class='buttons'>
     <button {{action "save"}} disabled={{disableSave}} class='btn btn-primary'>{{i18n 'admin.customize.save'}}</button>
     {{#unless model.automatic}}

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

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

app/assets/javascripts/discourse/models/group.js.es6

@@ -90,6 +90,11 @@ const Group = Discourse.Model.extend({
     });
   },
 
+  @computed('flair_bg_color')
+  flairBackgroundHexColor() {
+    return this.get('flair_bg_color') ? this.get('flair_bg_color').replace(new RegExp("[^0-9a-fA-F]", "g"), "") : null;
+  },
+
   asJSON() {
     return {
       name: this.get('name'),
@@ -101,6 +106,8 @@ const Group = Discourse.Model.extend({
       primary_group: !!this.get('primary_group'),
       grant_trust_level: this.get('grant_trust_level'),
       incoming_email: this.get("incoming_email"),
+      flair_url: this.get('flair_url'),
+      flair_bg_color: this.get('flairBackgroundHexColor'),
     };
   },
 

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

@@ -77,6 +77,29 @@ createWidget('reply-to-tab', {
   }
 });
 
+createWidget('post-avatar-flair', {
+  tagName: 'div.avatar-flair',
+
+  title(attrs) {
+    return attrs.primaryGroupName;
+  },
+
+  buildClasses(attrs) {
+    return 'avatar-flair-' + attrs.primaryGroupName + (attrs.primaryGroupFlairBgColor ? ' rounded' : '');
+  },
+
+  buildAttributes(attrs) {
+    var style = '';
+    if (attrs.primaryGroupFlairUrl) {
+      style += 'background-image: url(' + attrs.primaryGroupFlairUrl + '); ';
+    }
+    if (attrs.primaryGroupFlairBgColor) {
+      style += 'background-color: #' + attrs.primaryGroupFlairBgColor + '; ';
+    }
+    return {style: style};
+  }
+});
+
 createWidget('post-avatar', {
   tagName: 'div.topic-avatar',
 
@@ -93,11 +116,21 @@ createWidget('post-avatar', {
         template: attrs.avatar_template,
         username: attrs.username,
         url: attrs.usernameUrl,
-        className: 'main-avatar'
+        className: 'main-avatar',
+        flairUrl: attrs.primaryGroupFlairUrl,
+        flairBgColor: attrs.primaryGroupFlairBgColor
       });
     }
 
-    return [body, h('div.poster-avatar-extra')];
+    const result = [body];
+
+    if (attrs.primaryGroupFlairUrl || attrs.primaryGroupFlairBgColor) {
+      result.push(this.attach('post-avatar-flair', attrs));
+    }
+
+    result.push(h('div.poster-avatar-extra'));
+
+    return result;
   }
 });
 
@@ -406,7 +439,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.primary_group_name) { classNames.push(`group-${attrs.primary_group_name}`); }
+    if (attrs.primaryGroupName) { classNames.push(`group-${attrs.primaryGroupName}`); }
     if (attrs.wiki) { classNames.push(`wiki`); }
     if (attrs.isWhisper) { classNames.push('whisper'); }
     if (attrs.isModeratorAction || (attrs.isWarning && attrs.firstPost)) {

app/assets/javascripts/discourse/widgets/poster-name.js.es6

@@ -35,7 +35,7 @@ export default createWidget('poster-name', {
     if (attrs.moderator) { classNames.push('moderator'); }
     if (attrs.new_user) { classNames.push('new-user'); }
 
-    const primaryGroupName = attrs.primary_group_name;
+    const primaryGroupName = attrs.primaryGroupName;
     if (primaryGroupName && primaryGroupName.length) {
       classNames.push(primaryGroupName);
     }