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"}}
+
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
###