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

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

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();
});
});