From 8b7f89823de58d847d0dfa00672f4dd046ce1300 Mon Sep 17 00:00:00 2001
From: jjaffeux <j.jaffeux@gmail.com>
Date: Tue, 12 May 2020 15:49:13 +0200
Subject: [PATCH] UX: improves assignee display on button and dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../initializers/extend-for-assigns.js.es6    | 44 ++++++++++++++-----
 assets/stylesheets/assigns.scss               | 25 +++++++----
 assets/stylesheets/mobile/assigns.scss        | 19 ++++----
 config/locales/client.en.yml                  |  8 ++--
 4 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6 b/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6
index c76de99..f3514e6 100644
--- a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6
+++ b/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() {
-      const hasAssignement = this.get("topic.assigned_to_user");
-      return `discourse_assign.${hasAssignement ? "unassign" : "assign"}.help`;
+    translatedTitle() {
+      return titleForState(this.get("topic.assigned_to_user"));
     },
-    ariaLabel() {
-      const hasAssignement = this.get("topic.assigned_to_user");
-      return `discourse_assign.${hasAssignement ? "unassign" : "assign"}.help`;
+    translatedAriaLabel() {
+      return titleForState(this.get("topic.assigned_to_user"));
     },
     translatedLabel() {
       const user = this.get("topic.assigned_to_user");
 
       if (user) {
         const label = I18n.t("discourse_assign.unassign.title");
-        return htmlSafe(
-          `<span class="unassign-label">${label}</span>${renderAvatar(user, {
-            imageSize: "tiny",
-            ignoreTitle: true
-          })}`
-        );
+
+        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");
       }
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss
index f908e02..e91a5fd 100644
--- a/assets/stylesheets/assigns.scss
+++ b/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;
-      top: -1px;
-      right: -2px;
-    }
-
-    .unassign-label {
-      margin-right: 25px;
+      margin-left: 0.25em;
+      margin-top: -1px;
     }
   }
+
+  .d-icon {
+    // special case font-size here to account for the fact that at same font-size
+    // this icon looks smaller
+    font-size: 1.16em;
+  }
 }
diff --git a/assets/stylesheets/mobile/assigns.scss b/assets/stylesheets/mobile/assigns.scss
index 3a7b9af..761b50f 100644
--- a/assets/stylesheets/mobile/assigns.scss
+++ b/assets/stylesheets/mobile/assigns.scss
@@ -7,17 +7,20 @@
 
 .select-kit-row.assign {
   .name {
-    position: relative;
-    overflow: visible;
-
-    .avatar {
-      position: absolute;
-      top: -1px;
-      right: -2px;
-    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     .unassign-label {
       margin-right: 25px;
+      display: inline-flex;
+      flex-direction: column;
+      width: auto;
+
+      .username {
+        font-size: $font-down-1;
+        color: $primary-medium;
+      }
     }
   }
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index a31b00a..8d3afca 100644
--- a/config/locales/client.en.yml
+++ b/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'
-        different_users: 'Only if assigner and assignee are different users'
-        always: 'Always'
+        never: "Never"
+        different_users: "Only if assigner and assignee are different users"
+        always: "Always"
       reminders_frequency:
         description: "Frequency for receiving assigned topics reminders"
         never: "Never"