FEATURE: displays assignee avatar in button and dropdown (#66)

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

@@ -1,3 +1,4 @@
+import { renderAvatar } from "discourse/helpers/user-avatar";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { default as computed } from "discourse-common/utils/decorators";
 import { iconNode } from "discourse-common/lib/icon-library";
@@ -5,22 +6,38 @@ import { h } from "virtual-dom";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { queryRegistry } from "discourse/widgets/widget";
 import { getOwner } from "discourse-common/lib/get-owner";
+import { htmlSafe } from "@ember/template";
 
 function registerTopicFooterButtons(api) {
   api.registerTopicFooterButton({
     id: "assign",
     icon() {
       const hasAssignement = this.get("topic.assigned_to_user");
-      return hasAssignement ? "user-times" : "user-plus";
+      return hasAssignement ? null : "user-plus";
     },
     priority: 250,
     title() {
       const hasAssignement = this.get("topic.assigned_to_user");
       return `discourse_assign.${hasAssignement ? "unassign" : "assign"}.help`;
     },
-    label() {
+    ariaLabel() {
       const hasAssignement = this.get("topic.assigned_to_user");
-      return `discourse_assign.${hasAssignement ? "unassign" : "assign"}.title`;
+      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");
+        return htmlSafe(
+          `${renderAvatar(user, {
+            imageSize: "tiny",
+            ignoreTitle: true
+          })} <span class="unassign-label">${label}</span>`
+        );
+      } else {
+        return I18n.t("discourse_assign.assign.title");
+      }
     },
     action() {
       if (!this.get("currentUser.can_assign")) {

assets/stylesheets/assigns.scss

@@ -80,3 +80,19 @@
     margin-right: 5px;
   }
 }
+
+.topic-footer-button {
+  .d-button-label {
+    position: relative;
+
+    .avatar {
+      position: absolute;
+      top: -2px;
+      left: -2px;
+    }
+
+    .avatar + .unassign-label {
+      margin-left: 25px;
+    }
+  }
+}

assets/stylesheets/mobile/assigns.scss

@@ -4,3 +4,20 @@
     margin-top: 1em;
   }
 }
+
+.select-kit-row.assign {
+  .name {
+    position: relative;
+    overflow: visible;
+
+    .avatar {
+      position: absolute;
+      top: -1px;
+      left: -2px;
+    }
+
+    .avatar + .unassign-label {
+      margin-left: 25px;
+    }
+  }
+}