UI: minor tweaks to new message participants list (#6328)

* Icon for button
* Display name when editing on mobile
* Always display name on mobile when less/or 4 participants involved

app/assets/javascripts/discourse/widgets/private-message-map.js.es6

@@ -142,13 +142,24 @@ export default createWidget("private-message-map", {
       );
     }
 
-    const result = [h("div.participants", participants)];
+    let hideNamesClass = "";
+    if (
+      !this.state.isEditing &&
+      this.site.mobileView &&
+      Ember.makeArray(participants[0]).length > 4
+    ) {
+      hideNamesClass = ".hide-names";
+    }
+
+    const result = [h(`div.participants${hideNamesClass}`, participants)];
 
     const controls = [
       this.attach("button", {
         action: "toggleEditing",
         label: "private_message_info.edit",
-        className: "btn"
+        icon: "user",
+        iconRight: true,
+        className: "btn add-remove-participant-btn"
       })
     ];
 

app/assets/stylesheets/common/base/topic-post.scss

@@ -346,6 +346,13 @@ aside.quote {
     align-items: center;
     margin-bottom: 0.5em;
 
+    &.hide-names .user {
+      .username,
+      .group-name {
+        display: none;
+      }
+    }
+
     .user {
       border: 1px solid $primary-low;
       border-radius: 0.25em;
@@ -373,10 +380,6 @@ aside.quote {
       .username,
       .group-name {
         margin-right: 0.25em;
-
-        @include breakpoint(mobile) {
-          display: none;
-        }
       }
 
       &:last-child {
@@ -392,11 +395,11 @@ aside.quote {
         border-radius: 0 0.25em 0.25em 0;
       }
     }
+  }
 
-    .edit-participants-btn {
-      margin: 0.125em 0 0.125em 0;
-      align-self: flex-start;
-      border-radius: 0.25em;
+  .add-remove-participant-btn {
+    .d-icon {
+      margin-left: 0.25em;
     }
   }
 }

config/locales/client.en.yml

@@ -1130,7 +1130,7 @@ en:
     private_message_info:
       title: "Message"
       invite: "Invite Others..."
-      edit: "Add or remove participants..."
+      edit: "Add or remove"
       leave_message: "Do you really want to leave this message?"
       remove_allowed_user: "Do you really want to remove {{name}} from this message?"
       remove_allowed_group: "Do you really want to remove {{name}} from this message?"