discourse
/
discourse-assign
mirror of https://github.com/discourse/discourse-assign.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Unassign label sometimes touches avatar (#561) 

The label touches the avatar when a topic has several assignments, 
and those contain assignments to users _and_ to groups. We don't show 
avatars for groups, but the code sees there are several assignees and 
applies overlapping styling.

This commit corrects the logic and fixes the issue.

Here is how avatars on the button behave:
1. If there are from one to many assignments on the topic, but all 
the assignees are groups, we don't show avatars, only label.
2. If there are from one to many assignments to the same user, we show 
the avatar of that user.
3. And if there are from two to many assignments to different users, we 
show avatars of first two users.
This commit is contained in:
Andrei Prigorshnev 2024-04-10 17:36:38 +04:00 committed by GitHub
parent 3507a7dd98
commit 6070678a1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
assets/javascripts/discourse/components/topic-level-assign-menu.js
View File

@ -62,13 +62,7 @@ export default {
},
noneItem() {
const topic = this.topic;
if (topic.assigned_to_user || topic.hasAssignedPosts()) {
return unassignUsersButton(topic.uniqueAssignees());
} else if (topic.assigned_to_group) {
return unassignGroupButton(topic.assigned_to_group);
}
return topicLevelUnassignButton(this.topic.uniqueAssignees());
},
content() {
const content = [];
@ -99,39 +93,6 @@ export default {
},
};
function unassignGroupButton(group) {
const label = I18n.t("discourse_assign.unassign.title");
return {
id: null,
name: I18n.t("discourse_assign.reassign_modal.title"),
label: htmlSafe(
`<span class="unassign-label">${label}</span> @${group.name}...`
),
};
}
function unassignUsersButton(users) {
let avatars = "";
if (users.length === 1) {
avatars = avatarHtml(users[0], "tiny");
} else if (users.length > 1) {
avatars =
avatarHtml(users[0], "tiny", "overlap") + avatarHtml(users[1], "tiny");
}
const label = `<span class="unassign-label">${I18n.t(
"discourse_assign.topic_level_menu.unassign_with_ellipsis"
)}</span>`;
return {
id: null,
name: htmlSafe(
I18n.t("discourse_assign.topic_level_menu.unassign_with_ellipsis")
),
label: htmlSafe(`${avatars}${label}`),
};
}
function avatarHtml(user, size, classes) {
return renderAvatar(user, {
imageSize: size,
@ -225,3 +186,31 @@ function unassignFromPostButton(postId, assignment) {
label: htmlSafe(`${icon} ${label}`),
};
}
function topicLevelUnassignButton(assignees) {
const avatars = topicLevelUnassignButtonAvatars(assignees);
const label = `<span class="unassign-label">${I18n.t(
"discourse_assign.topic_level_menu.unassign_with_ellipsis"
)}</span>`;
return {
id: null,
name: htmlSafe(
I18n.t("discourse_assign.topic_level_menu.unassign_with_ellipsis")
),
label: htmlSafe(`${avatars}${label}`),
};
}
function topicLevelUnassignButtonAvatars(assignees) {
const users = assignees.filter((a) => a.username);
let avatars = "";
if (users.length === 1) {
avatars = avatarHtml(users[0], "tiny");
} else if (users.length > 1) {
avatars =
avatarHtml(users[0], "tiny", "overlap") + avatarHtml(users[1], "tiny");
}
return avatars;
}