diff --git a/app/assets/javascripts/discourse/lib/transform-post.js.es6 b/app/assets/javascripts/discourse/lib/transform-post.js.es6 index 4b971c4c3e6..d9742501d6c 100644 --- a/app/assets/javascripts/discourse/lib/transform-post.js.es6 +++ b/app/assets/javascripts/discourse/lib/transform-post.js.es6 @@ -28,10 +28,10 @@ export function transformBasicPost(post) { isDeleted: post.deleted_at || post.user_deleted, deletedByAvatarTemplate: null, deletedByUsername: null, - primaryGroupName: post.primary_group_name, - primaryGroupFlairUrl: post.primary_group_flair_url, - primaryGroupFlairBgColor: post.primary_group_flair_bg_color, - primaryGroupFlairColor: post.primary_group_flair_color, + primary_group_name: post.primary_group_name, + primary_group_flair_url: post.primary_group_flair_url, + primary_group_flair_bg_color: post.primary_group_flair_bg_color, + primary_group_flair_color: 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/templates/user-card.hbs b/app/assets/javascripts/discourse/templates/user-card.hbs index 7fcaa7f2ef6..4131225eb04 100644 --- a/app/assets/javascripts/discourse/templates/user-card.hbs +++ b/app/assets/javascripts/discourse/templates/user-card.hbs @@ -1,7 +1,10 @@ {{#if visible}}
- {{bound-avatar avatar "huge"}} +
+ {{bound-avatar avatar "huge"}} + {{mount-widget widget="avatar-flair" args=user}} +
diff --git a/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6 b/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6 new file mode 100644 index 00000000000..5af09d5123b --- /dev/null +++ b/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6 @@ -0,0 +1,40 @@ +import { createWidget, applyDecorators } from 'discourse/widgets/widget'; +import { h } from 'virtual-dom'; + +createWidget('avatar-flair', { + tagName: 'div.avatar-flair', + + isIcon(attrs) { + return (attrs.primary_group_flair_url && attrs.primary_group_flair_url.substr(0,3) === 'fa-'); + }, + + title(attrs) { + return attrs.primary_group_name; + }, + + buildClasses(attrs) { + return 'avatar-flair-' + attrs.primary_group_name + (attrs.primary_group_flair_bg_color ? ' rounded' : ''); + }, + + buildAttributes(attrs) { + var style = ''; + if (!this.isIcon(attrs)) { + style += 'background-image: url(' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_url) + '); '; + } + if (attrs.primary_group_flair_bg_color) { + style += 'background-color: #' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_bg_color) + '; '; + } + if (attrs.primary_group_flair_color) { + style += 'color: #' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_color) + '; '; + } + return {style: style}; + }, + + html(attrs) { + if (this.isIcon(attrs)) { + return [h('i', { className: 'fa ' + attrs.primary_group_flair_url })]; + } else { + return []; + } + } +}); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/widgets/post.js.es6 b/app/assets/javascripts/discourse/widgets/post.js.es6 index 9ba5fe55158..8ebe96aa21c 100644 --- a/app/assets/javascripts/discourse/widgets/post.js.es6 +++ b/app/assets/javascripts/discourse/widgets/post.js.es6 @@ -77,43 +77,6 @@ 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; - }, - - buildClasses(attrs) { - return 'avatar-flair-' + attrs.primaryGroupName + (attrs.primaryGroupFlairBgColor ? ' rounded' : ''); - }, - - buildAttributes(attrs) { - var style = ''; - 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 []; - } - } -}); createWidget('post-avatar', { tagName: 'div.topic-avatar', @@ -131,16 +94,14 @@ createWidget('post-avatar', { template: attrs.avatar_template, username: attrs.username, url: attrs.usernameUrl, - className: 'main-avatar', - flairUrl: attrs.primaryGroupFlairUrl, - flairBgColor: attrs.primaryGroupFlairBgColor + className: 'main-avatar' }); } const result = [body]; - if (attrs.primaryGroupFlairUrl || attrs.primaryGroupFlairBgColor) { - result.push(this.attach('post-avatar-flair', attrs)); + if (attrs.primary_group_flair_url || attrs.primary_group_flair_bg_color) { + result.push(this.attach('avatar-flair', attrs)); } result.push(h('div.poster-avatar-extra')); @@ -454,7 +415,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.primaryGroupName) { classNames.push(`group-${attrs.primaryGroupName}`); } + if (attrs.primary_group_name) { classNames.push(`group-${attrs.primary_group_name}`); } if (attrs.wiki) { classNames.push(`wiki`); } if (attrs.isWhisper) { classNames.push('whisper'); } if (attrs.isModeratorAction || (attrs.isWarning && attrs.firstPost)) { diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 3f54be56e01..2d50402a9d7 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -153,22 +153,24 @@ aside.quote { } } -.topic-avatar { +.topic-avatar, .user-card-avatar { position: relative; } -.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair { +.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .user-card-avatar .avatar-flair { display: flex; align-items: center; justify-content: center; - background-size: 20px 20px; background-repeat: no-repeat; background-position: center; - width: 20px; - height: 20px; position: absolute; bottom: 0; right: -6px; +} +.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair { + background-size: 20px 20px; + width: 20px; + height: 20px; &.rounded { background-size: 18px 18px; border-radius: 12px; @@ -178,6 +180,19 @@ aside.quote { right: -8px; } } +.user-card-avatar .avatar-flair { + background-size: 40px 40px; + width: 40px; + height: 40px; + &.rounded { + background-size: 30px 30px; + border-radius: 24px; + width: 40px; + height: 40px; + bottom: -2px; + right: -4px; + } +} .topic-avatar .poster-avatar-extra { display: none; } diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss index f79eb81c47b..69f951077eb 100644 --- a/app/assets/stylesheets/desktop/user-card.scss +++ b/app/assets/stylesheets/desktop/user-card.scss @@ -153,7 +153,7 @@ $user_card_background: $secondary; a.mention { text-decoration: none; } - + .overflow { max-height: 60px; overflow: hidden; @@ -172,7 +172,7 @@ $user_card_background: $secondary; } } - img.avatar { + .user-card-avatar { float: left; margin-right: 10px; margin-top: -53px; diff --git a/app/serializers/user_serializer.rb b/app/serializers/user_serializer.rb index 48ddfa89ccf..40163f2450b 100644 --- a/app/serializers/user_serializer.rb +++ b/app/serializers/user_serializer.rb @@ -65,7 +65,11 @@ class UserSerializer < BasicUserSerializer :user_fields, :topic_post_count, :pending_count, - :profile_view_count + :profile_view_count, + :primary_group_name, + :primary_group_flair_url, + :primary_group_flair_bg_color, + :primary_group_flair_color has_one :invited_by, embed: :object, serializer: BasicUserSerializer has_many :groups, embed: :object, serializer: BasicGroupSerializer @@ -253,6 +257,22 @@ class UserSerializer < BasicUserSerializer object.suspended? end + def primary_group_name + object.primary_group.try(:name) + end + + def primary_group_flair_url + object.try(:primary_group).try(:flair_url) + end + + def primary_group_flair_bg_color + object.try(:primary_group).try(:flair_bg_color) + end + + def primary_group_flair_color + object.try(:primary_group).try(:flair_color) + end + ### ### STAFF ATTRIBUTES ###