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 238ea83..0cee0cc 100644 --- a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6 +++ b/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 + })} ${label}` + ); + } else { + return I18n.t("discourse_assign.assign.title"); + } }, action() { if (!this.get("currentUser.can_assign")) { diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss index 39f2be1..abd4ce2 100644 --- a/assets/stylesheets/assigns.scss +++ b/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; + } + } +} diff --git a/assets/stylesheets/mobile/assigns.scss b/assets/stylesheets/mobile/assigns.scss index a37fd64..60a644f 100644 --- a/assets/stylesheets/mobile/assigns.scss +++ b/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; + } + } +}