UX: New layout for group assigned user sidebar

assets/javascripts/discourse/components/group-assigned-filter.js.es6

@@ -1,18 +1,5 @@
-import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 
 export default Component.extend({
-  tagName: "li",
-
-  @discourseComputed(
-    "siteSettings.prioritize_username_in_ux",
-    "filter.username",
-    "filter.name"
-  )
-  displayName(prioritize_username_in_ux, username, name) {
-    if (prioritize_username_in_ux) {
-      return username.trim();
-    }
-    return (name || username).trim();
-  }
+  tagName: "li"
 });

assets/javascripts/discourse/templates/components/group-assigned-filter.hbs

@@ -1,13 +1,25 @@
 {{#if show-avatar}}
   {{#link-to "group.assigned.show" filter.username_lower}}
-    <a href={{filter.userUrl}} data-user-card={{filter.username}} class="assign-image">
-      {{avatar filter imageSize="small"}}
-    </a>
-    <span class="assign-count">({{filter.assignments_count}})</span>
-    <span class="assign-name">{{displayName}}</span>
+    <div class="assign-image">
+      <a href={{filter.userPath}} data-user-card={{filter.username}}>{{avatar filter imageSize="large"}}</a>      
+    </div>
+
+    <div class="assign-names">
+      <div class="assign-username">{{format-username filter.username}}</div>
+      <div class="assign-name">{{filter.name}}</div>
+    </div>
+
+    <div class="assign-count">
+      {{filter.assignments_count}}
+    </div>
   {{/link-to}}
 {{else}}
   {{#link-to "group.assigned.show" filter}}
-    {{i18n 'discourse_assign.group_everyone'}} ({{assignment_count}})
+    <div class="assign-everyone">
+      {{i18n 'discourse_assign.group_everyone'}}
+    </div>
+    <div class="assign-count">
+      {{assignment_count}}
+    </div>
   {{/link-to}}
 {{/if}}

assets/stylesheets/assigns.scss

@@ -95,27 +95,38 @@
 
 .group-assignments {
   // a little extra space for long names
-  min-width: 180px;
+  min-width: 250px;
   li a {
     display: grid;
-    grid-template-areas:
-      "avatar count"
-      "name name";
-    grid-template-columns: auto 1fr;
+    grid-template-areas: " avatar names count";
+    grid-template-columns: auto 1fr auto;
     align-items: center;
-    a {
-      padding: 0px;
-      margin-right: 0.25em;
-      grid-area: avatar;
+    padding: 0.5em 13px;
+
+    .assign-names {
+      font-size: $font-down-1;
+      grid-area: names;
+      overflow: hidden;
     }
     .assign-name {
-      grid-area: name;
-      margin-top: 0.25em;
+      @include ellipsis;
+      margin-top: 3px;
+    }
+    .assign-username {
+      font-weight: bold;
       @include ellipsis;
     }
     .assign-count {
+      font-size: $font-up-2;
       grid-area: count;
     }
+    .assign-image {
+      grid-area: avatar;
+      a {
+        padding: 0;
+        padding-right: 0.5em;
+      }
+    }
   }
   .search {
     height: 1em;