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|}} -{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}} + {{#if poster.moreCount}} + {{poster.moreCount}} + {{else}} + {{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}} + {{/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