UX: improves assignee display on button and dropdown

- Changes the title attribute to display the name of the assignee
- Displays the assignee’s username in the row when  on mobile view
- Tweaks positioning to attempt good alignment
- Slightly increases icon size to have visually the same size than other topic footer buttons icons

assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6

@@ -8,6 +8,16 @@ import { queryRegistry } from "discourse/widgets/widget";
 import { getOwner } from "discourse-common/lib/get-owner";
 import { htmlSafe } from "@ember/template";
 
+function titleForState(user) {
+  if (user) {
+    return I18n.t("discourse_assign.unassign.help", {
+      username: user.username
+    });
+  } else {
+    return I18n.t("discourse_assign.assign.help");
+  }
+}
+
 function registerTopicFooterButtons(api) {
   api.registerTopicFooterButton({
     id: "assign",
@@ -16,25 +26,35 @@ function registerTopicFooterButtons(api) {
       return hasAssignement ? "user-times" : "user-plus";
     },
     priority: 250,
-    title() {
+    translatedTitle() {
-      const hasAssignement = this.get("topic.assigned_to_user");
+      return titleForState(this.get("topic.assigned_to_user"));
-      return `discourse_assign.${hasAssignement ? "unassign" : "assign"}.help`;
     },
-    ariaLabel() {
+    translatedAriaLabel() {
-      const hasAssignement = this.get("topic.assigned_to_user");
+      return titleForState(this.get("topic.assigned_to_user"));
-      return `discourse_assign.${hasAssignement ? "unassign" : "assign"}.help`;
     },
     translatedLabel() {
       const user = this.get("topic.assigned_to_user");
 
       if (user) {
         const label = I18n.t("discourse_assign.unassign.title");
+
+        if (this.site.mobileView) {
+          return htmlSafe(
+            `<span class="unassign-label"><span class="text">${label}</span><span class="username">${
+              user.username
+            }</span></span>${renderAvatar(user, {
+              imageSize: "small",
+              ignoreTitle: true
+            })}`
+          );
+        } else {
           return htmlSafe(
             `<span class="unassign-label">${label}</span>${renderAvatar(user, {
               imageSize: "tiny",
               ignoreTitle: true
             })}`
           );
+        }
       } else {
         return I18n.t("discourse_assign.assign.title");
       }

assets/stylesheets/assigns.scss

@@ -81,18 +81,25 @@
   }
 }
 
-.topic-footer-button {
+// we can't use flex for buttons yet
+// so this is an attempt to have a pixel perfection positioning
+#topic-footer-button-assign {
+  height: 30px;
+  padding: 0 12px;
+
   .d-button-label {
-    position: relative;
+    display: inline-flex;
+    align-items: center;
 
     .avatar {
-      position: absolute;
+      margin-left: 0.25em;
-      top: -1px;
+      margin-top: -1px;
-      right: -2px;
+    }
   }
 
-    .unassign-label {
+  .d-icon {
-      margin-right: 25px;
+    // special case font-size here to account for the fact that at same font-size
-    }
+    // this icon looks smaller
+    font-size: 1.16em;
   }
 }

assets/stylesheets/mobile/assigns.scss

@@ -7,17 +7,20 @@
 
 .select-kit-row.assign {
   .name {
-    position: relative;
+    display: flex;
-    overflow: visible;
+    align-items: center;
-
+    justify-content: space-between;
-    .avatar {
-      position: absolute;
-      top: -1px;
-      right: -2px;
-    }
 
     .unassign-label {
       margin-right: 25px;
+      display: inline-flex;
+      flex-direction: column;
+      width: auto;
+
+      .username {
+        font-size: $font-down-1;
+        color: $primary-medium;
+      }
     }
   }
 }

config/locales/client.en.yml

@@ -16,7 +16,7 @@ en:
       assign_notification: "<p><span>{{username}}</span> {{description}}</p>"
       unassign:
         title: "Unassign"
-        help: "Unassign Topic"
+        help: "Unassign %{username} from Topic"
       assign:
         title: "Assign"
         help: "Assign Topic to User"
@@ -31,9 +31,9 @@ en:
         title: "claim"
         help: "Assign topic to yourself"
       assign_mailer:
-        never: 'Never'
+        never: "Never"
-        different_users: 'Only if assigner and assignee are different users'
+        different_users: "Only if assigner and assignee are different users"
-        always: 'Always'
+        always: "Always"
       reminders_frequency:
         description: "Frequency for receiving assigned topics reminders"
         never: "Never"