diff --git a/app/assets/javascripts/discourse/models/topic.js.es6 b/app/assets/javascripts/discourse/models/topic.js.es6
index 4b29cce2774..94b778f65d0 100644
--- a/app/assets/javascripts/discourse/models/topic.js.es6
+++ b/app/assets/javascripts/discourse/models/topic.js.es6
@@ -70,8 +70,8 @@ const Topic = RestModel.extend({
return user || this.creator;
},
- @discourseComputed("posters.[]", "participants.[]")
- featuredUsers(posters, participants) {
+ @discourseComputed("posters.[]", "participants.[]", "allowed_user_count")
+ featuredUsers(posters, participants, allowedUserCount) {
let users = posters;
const maxUserCount = 5;
const posterCount = users.length;
@@ -97,6 +97,13 @@ const Topic = RestModel.extend({
});
}
+ if (this.isPrivateMessage && allowedUserCount > maxUserCount) {
+ users.splice(maxUserCount - 2, 1); // remove second-last avatar
+ users.push({
+ moreCount: `+${allowedUserCount - maxUserCount + 1}`
+ });
+ }
+
return users;
},
diff --git a/app/assets/javascripts/discourse/templates/list/posters-column.raw.hbs b/app/assets/javascripts/discourse/templates/list/posters-column.raw.hbs
index 6b1009f91c6..38d50d468b3 100644
--- a/app/assets/javascripts/discourse/templates/list/posters-column.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/list/posters-column.raw.hbs
@@ -1,5 +1,9 @@
{{#each posters as |poster|}}
-
+ {{#if poster.moreCount}}
+ {{poster.moreCount}}
+ {{else}}
+
+ {{/if}}
{{/each}}
|
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 0e15c47fa68..03ab18a8b9b 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -88,6 +88,9 @@
}
}
+ $td-posters-height: 29px; // min-height of td with avatar glow
+ $td-posters-more-lh: $td-posters-height - 4;
+
.posters {
// we know there are up to 5 avatars of fixed size
// will be overridden by media width queries on narrow displays to 1 avatar's width
@@ -98,10 +101,17 @@
&:last-of-type {
margin-right: 0;
}
+
+ &.posters-more-count {
+ cursor: default;
+ color: dark-light-choose($primary-medium, $secondary-medium);
+ line-height: $td-posters-more-lh;
+ font-size: $font-down-1;
+ }
}
}
td.posters {
- height: 29px; // min-height of td with avatar glow
+ height: $td-posters-height;
}
.posters a:first-child .avatar.latest:not(.single) {
box-shadow: 0 0 3px 1px desaturate($tertiary-medium, 35%);
diff --git a/app/serializers/topic_list_item_serializer.rb b/app/serializers/topic_list_item_serializer.rb
index 658df936143..0e45de727e9 100644
--- a/app/serializers/topic_list_item_serializer.rb
+++ b/app/serializers/topic_list_item_serializer.rb
@@ -14,7 +14,8 @@ class TopicListItemSerializer < ListableTopicSerializer
:bookmarked_post_numbers,
:liked_post_numbers,
:featured_link,
- :featured_link_root_domain
+ :featured_link_root_domain,
+ :allowed_user_count
has_many :posters, serializer: TopicPosterSerializer, embed: :objects
has_many :participants, serializer: TopicPosterSerializer, embed: :objects
@@ -86,4 +87,12 @@ class TopicListItemSerializer < ListableTopicSerializer
SiteSetting.topic_featured_link_enabled && object.featured_link.present?
end
+ def allowed_user_count
+ return object.allowed_users.count
+ end
+
+ def include_allowed_user_count?
+ object.private_message?
+ end
+
end