Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FEATURE: avatar flair can be font awesome icons

This commit is contained in:
Neil Lalonde 2016-08-26 17:15:37 -04:00
parent 58cb43884d
commit 2251104e32
14 changed files with 101 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/javascripts/admin/controllers/admin-group.js.es6
View File

@ -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() {

27
app/assets/javascripts/admin/templates/group.hbs
View File

@ -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">

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

@ -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,

6
app/assets/javascripts/discourse/models/group.js.es6
View File

@ -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'),
};
},

17
app/assets/javascripts/discourse/widgets/post.js.es6
View File

@ -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 [];
}
}
});

6
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -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

4
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -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;

1
app/controllers/admin/groups_controller.rb
View File

@ -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)

2
app/models/group.rb
View File

@ -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,

3
app/serializers/basic_group_serializer.rb
View File

@ -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?

11
app/serializers/post_serializer.rb
View File

@ -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

6
config/locales/client.en.yml
View File

@ -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"

5
db/migrate/20160826195018_add_flair_color_to_groups.rb Normal file
View File

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

3
spec/controllers/admin/groups_controller_spec.rb
View File

@ -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