From 2251104e32896ce7d04c73772e8d1a204ad6ee00 Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Fri, 26 Aug 2016 17:15:37 -0400 Subject: [PATCH] FEATURE: avatar flair can be font awesome icons --- .../admin/controllers/admin-group.js.es6 | 31 ++++++++++++++----- .../javascripts/admin/templates/group.hbs | 27 ++++++++++++++-- .../discourse/lib/transform-post.js.es6 | 1 + .../javascripts/discourse/models/group.js.es6 | 6 ++++ .../javascripts/discourse/widgets/post.js.es6 | 17 +++++++++- .../stylesheets/common/admin/admin_base.scss | 6 ++-- .../stylesheets/common/base/topic-post.scss | 4 ++- app/controllers/admin/groups_controller.rb | 1 + app/models/group.rb | 2 +- app/serializers/basic_group_serializer.rb | 3 +- app/serializers/post_serializer.rb | 11 ++++--- config/locales/client.en.yml | 6 ++-- ...0160826195018_add_flair_color_to_groups.rb | 5 +++ .../admin/groups_controller_spec.rb | 3 +- 14 files changed, 101 insertions(+), 22 deletions(-) create mode 100644 db/migrate/20160826195018_add_flair_color_to_groups.rb diff --git a/app/assets/javascripts/admin/controllers/admin-group.js.es6 b/app/assets/javascripts/admin/controllers/admin-group.js.es6 index 8cf02380a4b..bf192931174 100644 --- a/app/assets/javascripts/admin/controllers/admin-group.js.es6 +++ b/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() { diff --git a/app/assets/javascripts/admin/templates/group.hbs b/app/assets/javascripts/admin/templates/group.hbs index aba9559918a..39251a39e1c 100644 --- a/app/assets/javascripts/admin/templates/group.hbs +++ b/app/assets/javascripts/admin/templates/group.hbs @@ -113,12 +113,35 @@ {{text-field name="flair_bg_color" class="flair_bg_color" value=model.flair_bg_color placeholderKey="admin.groups.flair_bg_color_placeholder"}} + + {{#if flairPreviewIcon}} +
+ + {{text-field name="flair_color" class="flair_color" value=model.flair_color placeholderKey="admin.groups.flair_color_placeholder"}} +
+ {{/if}} - {{#if flairPreviewStyle}} + {{#if flairPreviewIcon}}
- + +
+
+ +
+
+ +
+
+
+
+ {{/if}} + + {{#if flairPreviewImage}} +
+
+
diff --git a/app/assets/javascripts/discourse/lib/transform-post.js.es6 b/app/assets/javascripts/discourse/lib/transform-post.js.es6 index 975a86a2a9e..4b971c4c3e6 100644 --- a/app/assets/javascripts/discourse/lib/transform-post.js.es6 +++ b/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, diff --git a/app/assets/javascripts/discourse/models/group.js.es6 b/app/assets/javascripts/discourse/models/group.js.es6 index 0a89e4e060a..5da7628d930 100644 --- a/app/assets/javascripts/discourse/models/group.js.es6 +++ b/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'), }; }, diff --git a/app/assets/javascripts/discourse/widgets/post.js.es6 b/app/assets/javascripts/discourse/widgets/post.js.es6 index f6387fa1105..9ba5fe55158 100644 --- a/app/assets/javascripts/discourse/widgets/post.js.es6 +++ b/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 []; + } } }); diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index b8895181316..8688fdfb53a 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -712,8 +712,10 @@ section.details { } } } -.row.groups input[type='text'].flair_bg_color { - width: 200px; +.row.groups { + input[type='text'].flair_bg_color, input[type='text'].flair_color { + width: 200px; + } } // Customise area diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index ecc352cd7ef..3f54be56e01 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/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; diff --git a/app/controllers/admin/groups_controller.rb b/app/controllers/admin/groups_controller.rb index df24d21bc3c..81923258be7 100644 --- a/app/controllers/admin/groups_controller.rb +++ b/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) diff --git a/app/models/group.rb b/app/models/group.rb index 58388e88e75..133dfdf08fd 100644 --- a/app/models/group.rb +++ b/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, diff --git a/app/serializers/basic_group_serializer.rb b/app/serializers/basic_group_serializer.rb index 972c54698bf..decf144a83f 100644 --- a/app/serializers/basic_group_serializer.rb +++ b/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? diff --git a/app/serializers/post_serializer.rb b/app/serializers/post_serializer.rb index 8ab6b75a000..ea2eec14b6d 100644 --- a/app/serializers/post_serializer.rb +++ b/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.primary_group.try(:flair_url) + object.user.try(:primary_group).try(:flair_url) end def primary_group_flair_bg_color - return nil unless object.user && object.user.primary_group_id - object.user.primary_group.try(:flair_bg_color) + object.user.try(:primary_group).try(:flair_bg_color) + end + + def primary_group_flair_color + object.user.try(:primary_group).try(:flair_color) end def link_counts diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index f5b107a3489..3ee8e3938dd 100644 --- a/config/locales/client.en.yml +++ b/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_placeholder: "(Optional) Image URL" + flair_url: "Avatar Flair Image" + 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" diff --git a/db/migrate/20160826195018_add_flair_color_to_groups.rb b/db/migrate/20160826195018_add_flair_color_to_groups.rb new file mode 100644 index 00000000000..cf96c741e74 --- /dev/null +++ b/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 diff --git a/spec/controllers/admin/groups_controller_spec.rb b/spec/controllers/admin/groups_controller_spec.rb index ce58ec0c35b..5baa846b1f9 100644 --- a/spec/controllers/admin/groups_controller_spec.rb +++ b/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