UI: improves participants list in messages (#6320)

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

@@ -1,11 +1,10 @@
-import { iconNode } from "discourse-common/lib/icon-library";
 import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
-import { avatarFor } from "discourse/widgets/post";
+import { avatarFor, avatarImg } from "discourse/widgets/post";
 import hbs from "discourse/widgets/hbs-compiler";
 
 createWidget("pm-remove-group-link", {
-  tagName: "a.remove-invited",
+  tagName: "a.remove-invited.no-text.btn-icon.btn",
   template: hbs`{{d-icon "times"}}`,
 
   click() {
@@ -30,16 +29,20 @@ createWidget("pm-map-user-group", {
   },
 
   template: hbs`
-    {{fa-icon 'users'}}
-    <a href={{transformed.href}}>{{attrs.group.name}}</a>
+    <a href={{transformed.href}} class="group-link">
+      {{d-icon "users"}}
+      <span class="group-name">{{attrs.group.name}}</span>
+    </a>
+    {{#if attrs.isEditing}}
     {{#if attrs.canRemoveAllowedUsers}}
       {{attach widget="pm-remove-group-link" attrs=attrs.group}}
     {{/if}}
+    {{/if}}
   `
 });
 
 createWidget("pm-remove-link", {
-  tagName: "a.remove-invited",
+  tagName: "a.remove-invited.no-text.btn-icon.btn",
   template: hbs`{{d-icon "times"}}`,
 
   click() {
@@ -65,20 +68,36 @@ createWidget("pm-map-user", {
 
   html(attrs) {
     const user = attrs.user;
-    const avatar = avatarFor("tiny", {
-      template: user.avatar_template,
-      username: user.username
-    });
-    const link = h("a", { attributes: { href: user.get("path") } }, [
-      avatar,
-      " ",
-      h("span", user.username)
-    ]);
+    const username = h("span.username", user.username);
+
+    let link;
+
+    if (this.site && this.site.mobileView) {
+      const avatar = avatarImg("tiny", {
+        template: user.avatar_template,
+        username: user.username
+      });
+      link = h("a", { attributes: { href: user.get("path") } }, [
+        avatar,
+        username
+      ]);
+    } else {
+      const avatar = avatarFor("tiny", {
+        template: user.avatar_template,
+        username: user.username
+      });
+
+      link = h(
+        "a",
+        { attributes: { class: "user-link", href: user.get("path") } },
+        [avatar, username]
+      );
+    }
+
     const result = [link];
     const isCurrentUser = attrs.canRemoveSelfId === user.get("id");
 
-    if (attrs.canRemoveAllowedUsers || isCurrentUser) {
-      result.push(" ");
+    if (attrs.isEditing && (attrs.canRemoveAllowedUsers || isCurrentUser)) {
       result.push(this.attach("pm-remove-link", { user, isCurrentUser }));
     }
 
@@ -89,6 +108,12 @@ createWidget("pm-map-user", {
 export default createWidget("private-message-map", {
   tagName: "section.information.private-message-map",
 
+  buildKey: attrs => `private-message-map-${attrs.id}`,
+
+  defaultState() {
+    return { isEditing: false };
+  },
+
   html(attrs) {
     const participants = [];
 
@@ -97,48 +122,52 @@ export default createWidget("private-message-map", {
         attrs.allowedGroups.map(group => {
           return this.attach("pm-map-user-group", {
             group,
-            canRemoveAllowedUsers: attrs.canRemoveAllowedUsers
+            canRemoveAllowedUsers: attrs.canRemoveAllowedUsers,
+            isEditing: this.state.isEditing
           });
         })
       );
     }
 
-    const allowedUsersLength = attrs.allowedUsers.length;
-
-    if (allowedUsersLength) {
+    if (attrs.allowedUsers.length) {
       participants.push(
         attrs.allowedUsers.map(au => {
           return this.attach("pm-map-user", {
             user: au,
             canRemoveAllowedUsers: attrs.canRemoveAllowedUsers,
-            canRemoveSelfId: attrs.canRemoveSelfId
+            canRemoveSelfId: attrs.canRemoveSelfId,
+            isEditing: this.state.isEditing
           });
         })
       );
     }
 
-    const result = [
-      h("h3", [
-        iconNode("envelope"),
-        " ",
-        I18n.t("private_message_info.title")
-      ]),
-      h("div.participants", participants)
+    const result = [h("div.participants", participants)];
+
+    const controls = [
+      this.attach("button", {
+        action: "toggleEditing",
+        label: "private_message_info.edit",
+        className: "btn"
+      })
     ];
 
-    if (attrs.canInvite) {
-      result.push(
-        h(
-          "div.controls",
-          this.attach("button", {
-            action: "showInvite",
-            label: "private_message_info.invite",
-            className: "btn"
-          })
-        )
+    if (attrs.canInvite && this.state.isEditing) {
+      controls.push(
+        this.attach("button", {
+          action: "showInvite",
+          icon: "plus",
+          className: "btn.no-text.btn-icon"
+        })
       );
     }
 
+    result.push(h("div.controls", controls));
+
     return result;
+  },
+
+  toggleEditing() {
+    this.state.isEditing = !this.state.isEditing;
   }
 });

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

@@ -327,62 +327,77 @@ aside.quote {
     }
   }
 
+  .controls {
+    display: flex;
+    align-items: center;
+
+    .btn {
+      margin-right: 0.5em;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+  }
+
   .participants {
-    // PMs
-    box-sizing: border-box;
-    margin: 0 -10px;
-    margin-bottom: 0.5em;
-    display: flex; // IE11
+    display: flex;
     flex-wrap: wrap;
-    justify-content: flex-start;
-    @supports (display: grid) {
-      // Overrides flex fallback above
-      display: grid;
-      grid-template-columns: repeat(4, auto);
-      @include breakpoint(tablet, min-width) {
-        grid-template-columns: repeat(5, auto);
+    align-items: center;
+    margin-bottom: 0.5em;
+
+    .user {
+      border: 1px solid $primary-low;
+      border-radius: 0.25em;
+      padding: 0;
+      margin: 0.125em 0.25em 0.125em 0;
+      display: flex;
+      align-items: center;
+      height: 26px;
+
+      .user-link,
+      .group-link {
+        color: $primary-high;
+
+        &:hover {
+          color: $primary;
+        }
       }
-      @include breakpoint(mobile) {
-        grid-template-columns: repeat(2, auto);
-        font-size: $font-down-1;
+
+      .avatar,
+      .d-icon-users {
+        margin-left: 0.25em;
+        margin-right: 0.25em;
       }
-      @include breakpoint(mobile-small) {
-        grid-template-columns: repeat(1, auto);
+
+      .username,
+      .group-name {
+        margin-right: 0.25em;
+
+        @include breakpoint(mobile) {
+          display: none;
+        }
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .remove-invited {
+        display: flex;
+        height: 100%;
+        padding: 0 0.5em;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        border-radius: 0 0.25em 0.25em 0;
       }
     }
 
-    .user {
-      display: flex;
-      align-items: center;
-      padding: 4px 8px;
-      overflow: hidden;
-      flex: 0 0 auto; // IE11
-      a {
-        color: $primary-high;
-        &[href] {
-          display: flex;
-          align-items: center;
-          white-space: nowrap;
-          min-width: 0;
-        }
-        span {
-          flex: 1 1 auto;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      &.group {
-        margin: 0;
-        .d-icon {
-          margin-right: 4px;
-          width: 20px;
-          text-align: center;
-        }
-      }
-    }
-    .d-icon-times {
-      margin-left: 0.25em;
-      color: dark-light-choose($primary-medium, $secondary-high);
+    .edit-participants-btn {
+      margin: 0.125em 0 0.125em 0;
+      align-self: flex-start;
+      border-radius: 0.25em;
     }
   }
 }

app/assets/stylesheets/desktop/topic-post.scss

@@ -379,7 +379,7 @@ nav.post-controls {
   .avatars,
   .links,
   .information {
-    padding: 7px 10px 15px 10px;
+    padding: 7px 10px 7px 10px;
     color: $primary;
   }
   .buttons {

config/locales/client.en.yml

@@ -1129,6 +1129,7 @@ en:
     private_message_info:
       title: "Message"
       invite: "Invite Others..."
+      edit: "Add or remove participants..."
       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?"