github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-28 13:51:18 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: makes avatar non interactive in thread participants list (#23847)

Browse Source 
It was slightly surprising to have a user card show when click on a thread item list.

More over this commit does:
- moves chat/user-avatar to chat-user-avatar and converts it to gjs
- moves chat/thread/participants to chat-thread-participants
- rewrite the `toggleCheckIfPossible` modifier to only be applied when selecting messages, it prevents the click event to collide with the click of avatars in regular messages
This commit is contained in:
Joffrey JAFFEUX
2023-10-09 21:12:50 +02:00
committed by GitHub
parent 245e9f30a4
commit a39ff830e8
20 changed files with 134 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/chat/test/javascripts/components/chat-thread-participants-test.js
View File

@ -5,18 +5,18 @@ import { render } from "@ember/test-helpers";
import { module, test } from "qunit";
module(
"Discourse Chat | Component | <Chat::Thread::Participants />",
"Discourse Chat | Component | <ChatThreadParticipants />",
function (hooks) {
setupRenderingTest(hooks);
test("no participants", async function (assert) {
this.thread = fabricators.thread();
await render(hbs`<Chat::Thread::Participants @thread={{this.thread}} />`);
await render(hbs`<ChatThreadParticipants @thread={{this.thread}} />`);
assert.dom(".chat-thread-participants").doesNotExist();
});
test("includeOriginalMessageUser=true", async function (assert) {
test("@includeOriginalMessageUser=true", async function (assert) {
const orignalMessageUser = fabricators.user({ username: "bob" });
this.thread = fabricators.thread({
original_message: fabricators.message({ user: orignalMessageUser }),
@ -29,13 +29,12 @@ module(
}),
});
await render(hbs`<Chat::Thread::Participants @thread={{this.thread}} />`);
await render(hbs`<ChatThreadParticipants @thread={{this.thread}} />`);
assert.dom('.chat-user-avatar [data-user-card="bob"]').exists();
assert.dom('.chat-user-avatar [data-user-card="alice"]').exists();
assert.dom(".chat-user-avatar[data-username]").exists({ count: 2 });
});
test("includeOriginalMessageUser=false", async function (assert) {
test("@includeOriginalMessageUser=false", async function (assert) {
const orignalMessageUser = fabricators.user({ username: "bob" });
this.thread = fabricators.thread({
original_message: fabricators.message({ user: orignalMessageUser }),
@ -49,11 +48,11 @@ module(
});
await render(
hbs`<Chat::Thread::Participants @thread={{this.thread}} @includeOriginalMessageUser={{false}} />`
hbs`<ChatThreadParticipants @thread={{this.thread}} @includeOriginalMessageUser={{false}} />`
);
assert.dom('.chat-user-avatar [data-user-card="bob"]').doesNotExist();
assert.dom('.chat-user-avatar [data-user-card="alice"]').exists();
assert.dom('.chat-user-avatar[data-username="bob"]').doesNotExist();
assert.dom('.chat-user-avatar[data-username="alice"]').exists();
});
}
);

22
plugins/chat/test/javascripts/components/chat-user-avatar-test.js
View File

@ -13,15 +13,15 @@ function containerSelector(user, options = {}) {
return `.chat-user-avatar${onlineSelector} .chat-user-avatar__container[data-user-card=${user.username}] .avatar[title=${user.username}]`;
}
module("Discourse Chat | Component | <Chat::UserAvatar />", function (hooks) {
module("Discourse Chat | Component | <ChatUserAvatar />", function (hooks) {
setupRenderingTest(hooks);
test("user is not online", async function (assert) {
test("when user is not online", async function (assert) {
this.user = fabricators.user();
this.chat = { presenceChannel: { users: [] } };
await render(
hbs`<Chat::UserAvatar @chat={{this.chat}} @user={{this.user}} />`
hbs`<ChatUserAvatar @chat={{this.chat}} @user={{this.user}} />`
);
assert.dom(containerSelector(this.user, { online: false })).exists();
@ -34,22 +34,32 @@ module("Discourse Chat | Component | <Chat::UserAvatar />", function (hooks) {
};
await render(
hbs`<Chat::UserAvatar @chat={{this.chat}} @user={{this.user}} />`
hbs`<ChatUserAvatar @chat={{this.chat}} @user={{this.user}} />`
);
assert.dom(containerSelector(this.user, { online: true })).exists();
});
test("showPresence=false", async function (assert) {
test("@showPresence=false", async function (assert) {
this.user = fabricators.user();
this.chat = {
presenceChannel: { users: [{ id: this.user.id }] },
};
await render(
hbs`<Chat::UserAvatar @showPresence={{false}} @chat={{this.chat}} @user={{this.user}} />`
hbs`<ChatUserAvatar @showPresence={{false}} @chat={{this.chat}} @user={{this.user}} />`
);
assert.dom(containerSelector(this.user, { online: false })).exists();
});
test("@interactive=true", async function (assert) {
this.user = fabricators.user();
await render(
hbs`<ChatUserAvatar @interactive={{false}} @user={{this.user}} />`
);
assert.dom(".clickable").doesNotExist();
});
});