diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs index c03cc344c79..0c097c46af8 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs @@ -7,7 +7,7 @@ {{@channel.chatable.users.length}} {{else}} - + {{/if}} {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs index 20286950731..43122bfb7f1 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs @@ -5,7 +5,7 @@ >
{{d-icon (if @message.editing "pencil-alt" "reply")}} - + {{@message.user.username}} {{replace-emoji @message.excerpt}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs index a5d3326217a..08c59926d84 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs @@ -16,7 +16,7 @@
- + {{else}} - + {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.hbs index 8557405da6e..2e16cc3d229 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.hbs @@ -10,7 +10,7 @@ >
- diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.hbs deleted file mode 100644 index 4ba128549ba..00000000000 --- a/plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.hbs +++ /dev/null @@ -1,11 +0,0 @@ -
-
- {{avatar @user imageSize=this.avatarSize}} -
-
\ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs index e9fa4b9b446..1dd5843bf8e 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs @@ -1,6 +1,6 @@ {{#if @user}} - + diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-row.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-row.hbs index ef6e94c563e..91785854dba 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-row.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-row.hbs @@ -1,4 +1,4 @@ - + {{#if (gt @content.tracking.unreadCount 0)}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-selection.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-selection.hbs index b5d27780cad..3a7643e2618 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-selection.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-selection.hbs @@ -1,4 +1,4 @@ - + {{@selection.model.username}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message/avatar.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/message/avatar.hbs index 949271d7a20..c393efa893d 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/message/avatar.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/message/avatar.hbs @@ -2,10 +2,6 @@ {{#if @message.chatWebhookEvent.emoji}} {{else}} - + {{/if}}
\ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs index b5dd7ff0c0e..0f8799c2efc 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs @@ -14,7 +14,7 @@ >
- +
{{replace-emoji this.title}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs index cca09b3f96e..e928326cf8b 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs @@ -2,7 +2,7 @@
{{#each @thread.preview.participantUsers as |user|}} - +
+ {{avatar @user imageSize=this.avatarSize}} +
+
\ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.js b/plugins/chat/assets/javascripts/discourse/components/chat/user-avatar.js similarity index 60% rename from plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.js rename to plugins/chat/assets/javascripts/discourse/components/chat/user-avatar.js index eb7f163d9c0..b4a616d78c9 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat/user-avatar.js @@ -8,12 +8,19 @@ export default class ChatUserAvatar extends Component { return this.args.avatarSize || "tiny"; } + get showPresence() { + return this.args.showPresence ?? true; + } + get isOnline() { const users = (this.args.chat || this.chat).presenceChannel?.users; return ( - !!users?.findBy("id", this.args.user?.id) || - !!users?.findBy("username", this.args.user?.username) + this.showPresence && + !!users?.find( + ({ id, username }) => + this.args.user?.id === id || this.args.user?.username === username + ) ); } } diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss index 99010dac2ea..ee156bf2aaa 100644 --- a/plugins/chat/assets/stylesheets/common/base-common.scss +++ b/plugins/chat/assets/stylesheets/common/base-common.scss @@ -186,60 +186,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat { } } -.chat-user-avatar { - @include unselectable; - display: flex; - align-items: center; - - .chat-message-container:not(.has-reply) & { - width: var(--message-left-width); - flex-shrink: 0; - } - - &.is-online { - .chat-user-avatar-container .avatar { - box-shadow: 0px 0px 0px 1px var(--success); - border: 1px solid var(--secondary); - padding: 0; - } - } - - .chat-user-avatar-container { - position: relative; - padding: 1px; // for is-online box-shadow effect, preventing cutoff - - .avatar { - padding: 1px; // for is-online box-shadow effect, preventing shift - } - - .chat-user-presence-flair { - box-sizing: border-box; - position: absolute; - background-color: var(--success); - border: 1px solid var(--secondary); - border-radius: 50%; - - .chat-message & { - width: 10px; - height: 10px; - right: 0px; - bottom: 0px; - } - - .chat-channel-title & { - width: 8px; - height: 8px; - right: -1px; - bottom: -1px; - } - } - } - - .chat-channel-title & { - width: auto; - } -} - .topic-title-chat-icon { display: inline-block; * { diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss index 9aa128ae496..f87d1fb3e01 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message.scss @@ -121,7 +121,7 @@ } } - .chat-message-avatar .chat-user-avatar .chat-user-avatar-container .avatar, + .chat-message-avatar .chat-user-avatar .chat-user-avatar__container .avatar, .chat-emoji-avatar .chat-emoji-avatar-container { width: 28px; height: 28px; diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss index 1cd561c32f8..3fb9cf66f89 100644 --- a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss +++ b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss @@ -11,7 +11,7 @@ align-items: center; justify-content: flex-end; - .chat-user-avatar-container { + .chat-user-avatar__container { padding: 0; } @@ -32,6 +32,7 @@ &__avatar-group { flex-direction: row; justify-content: flex-start; + .chat-user-avatar { &:not(:last-child) { margin-right: -10px; diff --git a/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss b/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss new file mode 100644 index 00000000000..76bd0f0a4cb --- /dev/null +++ b/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss @@ -0,0 +1,53 @@ +.chat-user-avatar { + @include unselectable; + display: flex; + align-items: center; + + .chat-message-container:not(.has-reply) & { + width: var(--message-left-width); + flex-shrink: 0; + } + + &.is-online { + .chat-user-avatar__container .avatar { + box-shadow: 0px 0px 0px 1px var(--success); + border: 1px solid var(--secondary); + padding: 0; + } + } + + &__container { + position: relative; + padding: 1px; // for is-online box-shadow effect, preventing cutoff + + .avatar { + padding: 1px; // for is-online box-shadow effect, preventing shift + } + + .chat-user-presence-flair { + box-sizing: border-box; + position: absolute; + background-color: var(--success); + border: 1px solid var(--secondary); + border-radius: 50%; + + .chat-message & { + width: 10px; + height: 10px; + right: 0px; + bottom: 0px; + } + + .chat-channel-title & { + width: 8px; + height: 8px; + right: -1px; + bottom: -1px; + } + } + } + + .chat-channel-title & { + width: auto; + } +} diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss index 462b89eb073..bb59a5ac2d5 100644 --- a/plugins/chat/assets/stylesheets/common/index.scss +++ b/plugins/chat/assets/stylesheets/common/index.scss @@ -59,3 +59,4 @@ @import "chat-message-error"; @import "chat-new-message-modal"; @import "chat-message-creator"; +@import "chat-user-avatar"; diff --git a/plugins/chat/spec/system/page_objects/chat/components/thread_indicator.rb b/plugins/chat/spec/system/page_objects/chat/components/thread_indicator.rb index f4c8ecf7246..7eab3824b68 100644 --- a/plugins/chat/spec/system/page_objects/chat/components/thread_indicator.rb +++ b/plugins/chat/spec/system/page_objects/chat/components/thread_indicator.rb @@ -33,7 +33,7 @@ module PageObjects def has_participant?(user) find(@context).has_css?( - ".chat-thread-participants__avatar-group .chat-user-avatar .chat-user-avatar-container[data-user-card=\"#{user.username}\"] img", + ".chat-thread-participants__avatar-group .chat-user-avatar .chat-user-avatar__container[data-user-card=\"#{user.username}\"] img", ) end diff --git a/plugins/chat/spec/system/page_objects/chat/components/thread_list.rb b/plugins/chat/spec/system/page_objects/chat/components/thread_list.rb index 92956410099..89cfb06a179 100644 --- a/plugins/chat/spec/system/page_objects/chat/components/thread_list.rb +++ b/plugins/chat/spec/system/page_objects/chat/components/thread_list.rb @@ -32,7 +32,7 @@ module PageObjects end def avatar_selector(user) - ".chat-thread-list-item__om-user-avatar .chat-user-avatar .chat-user-avatar-container[data-user-card=\"#{user.username}\"] img" + ".chat-thread-list-item__om-user-avatar .chat-user-avatar .chat-user-avatar__container[data-user-card=\"#{user.username}\"] img" end def last_reply_datetime_selector(last_reply) diff --git a/plugins/chat/test/javascripts/components/chat-channel-title-test.js b/plugins/chat/test/javascripts/components/chat-channel-title-test.js index 40156d4e0b0..03cbe9a6879 100644 --- a/plugins/chat/test/javascripts/components/chat-channel-title-test.js +++ b/plugins/chat/test/javascripts/components/chat-channel-title-test.js @@ -71,7 +71,7 @@ module("Discourse Chat | Component | chat-channel-title", function (hooks) { const user = this.channel.chatable.users[0]; assert.true( - exists(`.chat-user-avatar-container .avatar[title="${user.username}"]`) + exists(`.chat-user-avatar__container .avatar[title="${user.username}"]`) ); assert.strictEqual( diff --git a/plugins/chat/test/javascripts/components/chat-user-avatar-test.js b/plugins/chat/test/javascripts/components/chat-user-avatar-test.js index dfa8925a2c7..342ec3d3aae 100644 --- a/plugins/chat/test/javascripts/components/chat-user-avatar-test.js +++ b/plugins/chat/test/javascripts/components/chat-user-avatar-test.js @@ -1,50 +1,55 @@ import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { exists } from "discourse/tests/helpers/qunit-helpers"; import hbs from "htmlbars-inline-precompile"; import { module, test } from "qunit"; import { render } from "@ember/test-helpers"; +import fabricators from "discourse/plugins/chat/discourse/lib/fabricators"; -const user = { - id: 1, - username: "markvanlan", - name: null, - avatar_template: "/letter_avatar_proxy/v4/letter/m/48db29/{size}.png", -}; +function containerSelector(user, options = {}) { + let onlineSelector = ":not(.is-online)"; + if (options.online) { + onlineSelector = ".is-online"; + } -module("Discourse Chat | Component | chat-user-avatar", function (hooks) { + return `.chat-user-avatar${onlineSelector} .chat-user-avatar__container[data-user-card=${user.username}] .avatar[title=${user.username}]`; +} + +module("Discourse Chat | Component | ", function (hooks) { setupRenderingTest(hooks); test("user is not online", async function (assert) { - this.set("user", user); - this.set("chat", { presenceChannel: { users: [] } }); + this.user = fabricators.user(); + this.chat = { presenceChannel: { users: [] } }; await render( - hbs`` + hbs`` ); - assert.true( - exists( - `.chat-user-avatar .chat-user-avatar-container[data-user-card=${user.username}] .avatar[title=${user.username}]` - ) - ); - assert.false(exists(".chat-user-avatar.is-online")); + assert.dom(containerSelector(this.user, { online: false })).exists(); }); test("user is online", async function (assert) { - this.set("user", user); - this.set("chat", { - presenceChannel: { users: [{ id: user.id }] }, - }); + this.user = fabricators.user(); + this.chat = { + presenceChannel: { users: [{ id: this.user.id }] }, + }; await render( - hbs`` + hbs`` ); - assert.true( - exists( - `.chat-user-avatar .chat-user-avatar-container[data-user-card=${user.username}] .avatar[title=${user.username}]` - ) + assert.dom(containerSelector(this.user, { online: true })).exists(); + }); + + test("showPresence=false", async function (assert) { + this.user = fabricators.user(); + this.chat = { + presenceChannel: { users: [{ id: this.user.id }] }, + }; + + await render( + hbs`` ); - assert.true(exists(".chat-user-avatar.is-online")); + + assert.dom(containerSelector(this.user, { online: false })).exists(); }); });