FEATURE: avatar flair can be font awesome icons

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

@@ -1,6 +1,7 @@
 import { popupAjaxError } from 'discourse/lib/ajax-error';
 import { propertyEqual } from 'discourse/lib/computed';
 import { escapeExpression } from 'discourse/lib/utilities';
+import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend({
   needs: ['adminGroupsType'],
@@ -36,26 +37,42 @@ export default Ember.Controller.extend({
     ];
   }.property(),
 
-  demoAvatarUrl: function() {
+  @computed
+  demoAvatarUrl() {
     return Discourse.getURL('/images/avatar.png');
-  }.property(),
+  },
 
-  flairPreviewStyle: function() {
+  @computed('model.flair_url')
+  flairPreviewIcon() {
+    return this.get('model.flair_url') && this.get('model.flair_url').substr(0,3) === 'fa-';
+  },
+
+  @computed('flairPreviewIcon')
+  flairPreviewImage() {
+    return this.get('model.flair_url') && !this.get('flairPreviewIcon');
+  },
+
+  @computed('flairPreviewImage', 'model.flair_url', 'model.flairBackgroundHexColor', 'model.flairHexColor')
+  flairPreviewStyle() {
     var style = '';
-    if (this.get('model.flair_url')) {
+    if (this.get('flairPreviewImage')) {
       style += 'background-image: url(' + escapeExpression(this.get('model.flair_url')) + '); ';
     }
     if (this.get('model.flairBackgroundHexColor')) {
       style += 'background-color: #' + this.get('model.flairBackgroundHexColor') + ';';
     }
+    if (this.get('model.flairHexColor')) {
+      style += 'color: #' + this.get('model.flairHexColor') + ';';
+    }
     return style;
-  }.property('model.flair_url', 'model.flairBackgroundHexColor'),
+  },
 
-  flairPreviewClasses: function() {
+  @computed('model.flairBackgroundHexColor')
+  flairPreviewClasses() {
     if (this.get('model.flairBackgroundHexColor')) {
       return 'rounded';
     }
-  }.property('model.flairBackgroundHexColor'),
+  },
 
   actions: {
     next() {

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

@@ -113,12 +113,35 @@
           <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>
+
+        {{#if flairPreviewIcon}}
+          <div>
+            <label for="flair_color">{{i18n 'admin.groups.flair_color'}}</label>
+            {{text-field name="flair_color" class="flair_color" value=model.flair_color placeholderKey="admin.groups.flair_color_placeholder"}}
+          </div>
+        {{/if}}
       </div>
 
-      {{#if flairPreviewStyle}}
+      {{#if flairPreviewIcon}}
         <div class="flair_right">
           <div>
-            <label>{{i18n 'admin.groups.flair_preview'}}</label>
+            <label>{{i18n 'admin.groups.flair_preview'}} Icon</label>
+            <div class="avatar-flair-preview">
+              <div class="avatar-wrapper">
+                <img alt width="45" height="45" src="{{demoAvatarUrl}}" class="avatar actor">
+              </div>
+              <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}>
+                <i class="fa {{model.flair_url}}"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/if}}
+
+      {{#if flairPreviewImage}}
+        <div class="flair_right">
+          <div>
+            <label>{{i18n 'admin.groups.flair_preview'}} Image</label>
             <div class="avatar-flair-preview">
               <div class="avatar-wrapper">
                 <img alt width="45" height="45" src="{{demoAvatarUrl}}" class="avatar actor">

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

@@ -31,6 +31,7 @@ export function transformBasicPost(post) {
     primaryGroupName: post.primary_group_name,
     primaryGroupFlairUrl: post.primary_group_flair_url,
     primaryGroupFlairBgColor: post.primary_group_flair_bg_color,
+    primaryGroupFlairColor: post.primary_group_flair_color,
     wiki: post.wiki,
     firstPost: post.post_number === 1,
     post_number: post.post_number,

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

@@ -95,6 +95,11 @@ const Group = Discourse.Model.extend({
     return this.get('flair_bg_color') ? this.get('flair_bg_color').replace(new RegExp("[^0-9a-fA-F]", "g"), "") : null;
   },
 
+  @computed('flair_color')
+  flairHexColor() {
+    return this.get('flair_color') ? this.get('flair_color').replace(new RegExp("[^0-9a-fA-F]", "g"), "") : null;
+  },
+
   asJSON() {
     return {
       name: this.get('name'),
@@ -108,6 +113,7 @@ const Group = Discourse.Model.extend({
       incoming_email: this.get("incoming_email"),
       flair_url: this.get('flair_url'),
       flair_bg_color: this.get('flairBackgroundHexColor'),
+      flair_color: this.get('flairHexColor'),
     };
   },
 

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

@@ -80,6 +80,10 @@ 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;
   },
@@ -90,13 +94,24 @@ createWidget('post-avatar-flair', {
 
   buildAttributes(attrs) {
     var style = '';
-    if (attrs.primaryGroupFlairUrl) {
+    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 [];
+    }
   }
 });
 

app/assets/stylesheets/common/admin/admin_base.scss

@@ -712,9 +712,11 @@ section.details {
     }
   }
 }
-.row.groups input[type='text'].flair_bg_color {
+.row.groups {
+  input[type='text'].flair_bg_color, input[type='text'].flair_color {
     width: 200px;
   }
+}
 
 // Customise area
 .customize {

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

@@ -158,7 +158,9 @@ aside.quote {
 }
 
 .topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background-size: 20px 20px;
   background-repeat: no-repeat;
   background-position: center;

app/controllers/admin/groups_controller.rb

@@ -67,6 +67,7 @@ class Admin::GroupsController < Admin::AdminController
 
     group.flair_url      = params[:flair_url].presence
     group.flair_bg_color = params[:flair_bg_color].presence
+    group.flair_color    = params[:flair_color].presence
 
     if group.save
       Group.reset_counters(group.id, :group_users)

app/models/group.rb

@@ -28,7 +28,7 @@ class Group < ActiveRecord::Base
   validates_uniqueness_of :name, case_sensitive: false
   validate :automatic_membership_email_domains_format_validator
   validate :incoming_email_validator
-  validates :flair_url, url: true
+  validates :flair_url, url: true, if: Proc.new { |g| g.flair_url && g.flair_url[0,3] != 'fa-' }
 
   AUTO_GROUPS = {
     :everyone => 0,

app/serializers/basic_group_serializer.rb

@@ -16,7 +16,8 @@ class BasicGroupSerializer < ApplicationSerializer
              :is_member,
              :mentionable,
              :flair_url,
-             :flair_bg_color
+             :flair_bg_color,
+             :flair_color
 
   def include_incoming_email?
     scope.is_staff?

app/serializers/post_serializer.rb

@@ -36,6 +36,7 @@ class PostSerializer < BasicPostSerializer
              :primary_group_name,
              :primary_group_flair_url,
              :primary_group_flair_bg_color,
+             :primary_group_flair_color,
              :version,
              :can_edit,
              :can_delete,
@@ -153,13 +154,15 @@ class PostSerializer < BasicPostSerializer
   end
 
   def primary_group_flair_url
-    return nil unless object.user && object.user.primary_group_id
+    object.user.try(:primary_group).try(:flair_url)
-    object.user.primary_group.try(:flair_url)
   end
 
   def primary_group_flair_bg_color
-    return nil unless object.user && object.user.primary_group_id
+    object.user.try(:primary_group).try(:flair_bg_color)
-    object.user.primary_group.try(:flair_bg_color)
+  end
+
+  def primary_group_flair_color
+    object.user.try(:primary_group).try(:flair_color)
   end
 
   def link_counts

config/locales/client.en.yml

@@ -2402,10 +2402,12 @@ en:
         add_owners: Add owners
         incoming_email: "Custom incoming email address"
         incoming_email_placeholder: "enter email address"
-        flair_url: "Avatar Flair URL"
+        flair_url: "Avatar Flair Image"
-        flair_url_placeholder: "(Optional) Image URL"
+        flair_url_placeholder: "(Optional) Image URL or Font Awesome class"
         flair_bg_color: "Avatar Flair Background Color"
         flair_bg_color_placeholder: "(Optional) Hex color value"
+        flair_color: "Avatar Flair Color"
+        flair_color_placeholder: "(Optional) Hex color value"
         flair_preview: "Preview"
 
 

db/migrate/20160826195018_add_flair_color_to_groups.rb

@@ -0,0 +1,5 @@
+class AddFlairColorToGroups < ActiveRecord::Migration
+  def change
+    add_column :groups, :flair_color, :string
+  end
+end

spec/controllers/admin/groups_controller_spec.rb

@@ -37,7 +37,8 @@ describe Admin::GroupsController do
         "is_member"=>true,
         "mentionable"=>false,
         "flair_url"=>nil,
-        "flair_bg_color"=>nil
+        "flair_bg_color"=>nil,
+        "flair_color"=>nil
       }])
     end