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 6670bfb536d..f1c08cca433 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs @@ -11,11 +11,14 @@ @showPresence={{false}} /> {{/each}} - {{#if @thread.preview.otherParticipantCount}} -
- +{{@thread.preview.otherParticipantCount}} -
- {{/if}} + {{#if @thread.preview.otherParticipantCount}} +
+ {{i18n + "chat.thread.participants_other_count" + count=@thread.preview.otherParticipantCount + }} +
+ {{/if}} {{/if}} \ No newline at end of file diff --git a/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss index f7d724fc541..7c875ecc1ef 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss @@ -54,7 +54,6 @@ @include ellipsis; font-weight: bold; color: var(--primary-very-high); - margin-right: 0.25rem; } &__last-reply-info { @@ -66,7 +65,7 @@ &__last-reply-timestamp { color: var(--primary-high); - font-size: var(--font-down-2); + font-size: var(--font-down-3); } &__last-reply-excerpt { @@ -80,7 +79,7 @@ display: flex; align-items: center; justify-content: flex-end; - gap: 0.5rem; + gap: 0.25rem; } &__replies-count { diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss index de5031bed86..1cd561c32f8 100644 --- a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss +++ b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss @@ -1,19 +1,8 @@ .chat-thread-participants { margin-left: 0.5rem; &__other-count { - display: flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - border: 1px solid rgba(0, 0, 0, 0); - box-sizing: border-box; font-size: var(--font-down-2); - color: var(--primary-very-low); - background: var(--secondary-high); - padding: 0.21em 0.42em; - border-radius: 1em; - text-align: center; + color: var(--primary-high); white-space: nowrap; } @@ -41,11 +30,11 @@ @container (max-width: 400px) { .chat-thread-participants { &__avatar-group { - flex-direction: row-reverse; + flex-direction: row; justify-content: flex-start; .chat-user-avatar { - &:not(:first-child) { - margin-right: -12px; + &:not(:last-child) { + margin-right: -10px; } .avatar { width: 22px; @@ -54,12 +43,5 @@ } } } - &__other-count { - width: 22px; - height: 22px; - margin-right: -12px; - z-index: 1; - border: 1px solid var(--primary-very-low); - } } } diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml index 84e144bacc8..2c1e1cf3ffa 100644 --- a/plugins/chat/config/locales/client.en.yml +++ b/plugins/chat/config/locales/client.en.yml @@ -584,8 +584,8 @@ en: title: "Tracking" description: "A count of new replies for this thread will be shown in the thread list and the channel. You will be notified if someone mentions your @name in this thread." participants_other_count: - one: "+%{count} other" - other: "+%{count} others" + one: "+%{count}" + other: "+%{count}" threads: open: "Open Thread" list: "Ongoing discussions"