UX: Adds +n indicator in PM topic list (#8353)

Shows the number of additional PM recipients in list when there are more than 5.

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;
   },
 

app/assets/javascripts/discourse/templates/list/posters-column.raw.hbs

@@ -1,5 +1,9 @@
 <td class='posters'>
 {{#each posters as |poster|}}
+  {{#if poster.moreCount}}
+    <a class="posters-more-count">{{poster.moreCount}}</a>
+  {{else}}
     <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
+  {{/if}}
 {{/each}}
 </td>

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%);

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