diff --git a/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs b/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
index 7b870e7ed61..13404a30b83 100644
--- a/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
+++ b/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
@@ -66,9 +66,7 @@ export default class DTooltip extends Component {
>
{{#if this.isDisabled}}
-
+
{{this.group_with_too_many_members}}
{{/if}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs
index 8234dd54b6f..6579127ae97 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs
@@ -1,5 +1,7 @@
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
+import { modifier } from "ember-modifier";
+import UserStatusMessage from "discourse/components/user-status-message";
import userStatus from "discourse/helpers/user-status";
import I18n from "discourse-i18n";
import gt from "truth-helpers/helpers/gt";
@@ -12,6 +14,14 @@ export default class ChatableUser extends Component {
disabledUserLabel = I18n.t("chat.new_message_modal.disabled_user");
+ trackUserStatus = modifier((element, [user]) => {
+ user.statusManager.trackStatus();
+
+ return () => {
+ user.statusManager.stopTrackingStatus();
+ };
+ });
+
+
+
+
{{#unless @item.enabled}}
-
+
{{this.disabledUserLabel}}
{{/unless}}
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
index a524141593e..0ef6c76ff2f 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
@@ -1,310 +1,327 @@
-.chat-message-creator__section {
- display: flex;
- width: 100%;
- padding-inline: 1rem 0.5rem;
- box-sizing: border-box;
-}
-
-.chat-message-creator__add-members {
- display: flex;
- gap: 1rem;
- flex-direction: column;
-}
-
-.chat-message-creator__participants-count {
- white-space: nowrap;
-}
-
-.chat-message-creator__member {
- @media (prefers-reduced-motion: no-preference) {
- animation: popIn 0.1s ease-out;
- }
-}
-
-.chat-message-creator__member {
- padding: 0 0.25rem;
- border-radius: var(--border-radius);
- background: var(--primary-very-low);
- gap: 0.25rem;
-
- //I think this class isnt working atm?
- &.-highlighted {
- border-color: var(--tertiary);
+.chat-message-creator {
+ &__section {
+ display: flex;
+ width: 100%;
+ padding-inline: 1rem 0.5rem;
+ box-sizing: border-box;
}
- &:hover {
- .discourse-no-touch & {
- background: var(--primary-very-low);
- color: var(--primary);
- border-color: var(--tertiary);
+ &__add-members {
+ display: flex;
+ gap: 1rem;
+ flex-direction: column;
+ }
- .d-icon-times {
- color: var(--primary);
+ &__participants-count {
+ white-space: nowrap;
+ }
+
+ &__group-icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .chat-message-creator__member & {
+ height: 24px;
+ width: 24px;
+
+ .d-icon.d-icon-user-friends {
+ color: var(--primary-high);
+ }
+ }
+
+ .-group & {
+ width: 26px;
+ height: 26px;
+ .d-icon-user-friends {
+ padding: 5px 5px;
+ box-sizing: border-box;
+ color: var(--primary-high);
+ background: var(--primary-low);
+ border-radius: 100%;
+ width: 24px;
+ height: 24px;
}
}
}
- .d-icon-times {
- margin-left: 0.25rem;
- }
+ &__member {
+ @media (prefers-reduced-motion: no-preference) {
+ animation: popIn 0.1s ease-out;
+ }
+ padding: 0 0.25rem;
+ border-radius: var(--border-radius);
+ background: var(--primary-very-low);
+ gap: 0.25rem;
- .chat-message-creator__group-icon {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 24px;
- width: 24px;
+ &:hover {
+ .discourse-no-touch & {
+ background: var(--primary-very-low);
+ color: var(--primary);
+ border-color: var(--tertiary);
- .d-icon.d-icon-user-friends {
- color: var(--primary-high);
+ .d-icon-times {
+ color: var(--primary);
+ }
+ }
+ }
+
+ .d-icon-times {
+ margin-left: 0.25rem;
}
}
-}
-.chat-message-creator__add-members__close-btn {
- align-self: flex-start;
- margin-top: 10px;
-}
-
-.chat-message-creator__add-members-header {
- display: flex;
- flex-grow: 1;
- gap: 0.5rem;
-
- &-container {
- display: flex;
+ &__add-members__close-btn {
+ align-self: flex-start;
+ margin-top: 10px;
}
-}
-.chat-message-creator__new-group-header {
- display: flex;
- align-items: center;
- flex-grow: 1;
- padding-inline: 1rem;
-
- &-container {
+ &__add-members-header {
display: flex;
flex-grow: 1;
- padding-bottom: 0.5rem;
- border-bottom: 1px solid var(--primary-low);
+ gap: 0.5rem;
+
+ &-container {
+ display: flex;
+ }
}
- &__input {
- padding-inline: 0 !important;
- width: 100% !important;
- margin: 0 !important;
- border: 0 !important;
- outline: 0 !important;
- }
-}
-
-.chat-message-creator__new-group-footer {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- flex-grow: 1;
- gap: 1rem;
- padding: 1rem 1rem 0;
-
- &-container {
+ &__new-group-header {
display: flex;
+ align-items: center;
flex-grow: 1;
- border-top: 1px solid var(--primary-low);
- }
-}
+ padding-inline: 1rem;
-.chat-message-creator__participants-count {
- white-space: nowrap;
-}
+ &-container {
+ display: flex;
+ flex-grow: 1;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid var(--primary-low);
+ }
-.chat-message-creator__warning-max-members {
- padding-inline: 1rem;
-}
-
-.chat-message-creator__members {
- display: flex;
- align-items: center;
- flex-grow: 1;
- padding: 0.5rem;
- background: var(--primary-low);
- flex-wrap: wrap;
- gap: 0.5rem;
- border-radius: var(--border-radius);
- min-height: 50px;
- box-sizing: border-box;
-
- .d-icon-search {
- color: var(--primary-high);
+ &__input {
+ padding-inline: 0 !important;
+ width: 100% !important;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: 0 !important;
+ }
}
- &-container {
+ &__new-group-footer {
display: flex;
+ align-items: center;
+ justify-content: flex-end;
flex-grow: 1;
+ gap: 1rem;
+ padding: 1rem 1rem 0;
+
+ &-container {
+ display: flex;
+ flex-grow: 1;
+ border-top: 1px solid var(--primary-low);
+ }
}
- &-input {
- background: none !important;
- margin: 0 !important;
- border: 0 !important;
- outline: 0 !important;
- min-width: 200px;
- flex-grow: 1;
- padding-inline: 0 !important;
+ &__participants-count {
+ white-space: nowrap;
}
-}
-.chat-message-creator__members-count {
- white-space: nowrap;
- color: var(--primary-medium);
-
- &.-reached-limit {
- color: var(--danger);
+ &__warning-max-members {
+ padding-inline: 1rem;
}
-}
-.chat-message-creator__add-members-footer {
- display: flex;
- flex-grow: 1;
- justify-content: flex-end;
- padding-top: 1rem;
- border-top: 1px solid var(--primary-low);
-
- &-container {
+ &__members {
display: flex;
- }
-}
-
-.chat-message-creator__list {
- list-style: none;
- margin: 0;
- gap: 0.25rem;
- display: flex;
- flex-direction: column;
-
- [data-disabled] {
- opacity: 0.5;
- cursor: not-allowed;
- }
-
- &-item {
+ align-items: center;
+ flex-grow: 1;
+ padding: 0.5rem;
+ background: var(--primary-low);
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ border-radius: var(--border-radius);
+ min-height: 50px;
box-sizing: border-box;
- cursor: pointer;
- padding: 0.5rem 1rem;
- display: flex;
- align-items: center;
- .d-icon-users {
- padding: 4px 4px;
- box-sizing: border-box;
- color: var(--tertiary);
- background: var(--primary-low);
- border-radius: 100%;
- width: 24px;
- height: 22px;
- }
-
- .btn {
- padding: 0;
- }
-
- &.-highlighted {
- background: var(--tertiary-very-low);
- }
- }
-}
-
-.chat-message-creator__chatable {
- display: flex;
- align-items: center;
- width: 100%;
- flex-wrap: wrap;
-
- &.-user .chat-user-display-name {
- padding-left: 0.5rem;
- }
-
- &.-group {
- .chat-message-creator__group-name {
- flex-shrink: 0;
- padding-left: 0.5rem;
- }
-
- .chat-message-creator__group-icon .d-icon-user-friends {
- padding: 5px 5px;
- box-sizing: border-box;
+ .d-icon-search {
color: var(--primary-high);
- background: var(--primary-low);
- border-radius: 100%;
- width: 24px;
- height: 22px;
+ }
+
+ &-container {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ &-input {
+ background: none !important;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: 0 !important;
+ min-width: 200px;
+ flex-grow: 1;
+ padding-inline: 0 !important;
}
}
- &.-category-channel .chat-channel-title__category-badge {
- display: flex;
- justify-content: center;
- width: 24px;
+ &__members-count {
+ white-space: nowrap;
+ color: var(--primary-medium);
+
+ &.-reached-limit {
+ color: var(--danger);
+ }
}
- &.-disabled-chat {
- padding-left: 0.25rem;
- }
-
- .unread-indicator {
- margin-left: 0.5rem;
- width: 8px;
- height: 8px;
- background: var(--tertiary);
- border-radius: 100%;
- }
-}
-
-.chat-message-creator__search-input {
- display: flex;
- align-items: center;
- border: 1px solid var(--primary-400);
- width: 100%;
- box-sizing: border-box;
- height: 42px;
- padding: 0 0.5rem;
-
- &:focus,
- &:focus-within {
- @include default-focus();
- }
-
- &-container {
+ &__add-members-footer {
display: flex;
flex-grow: 1;
+ justify-content: flex-end;
+ padding-top: 1rem;
+ border-top: 1px solid var(--primary-low);
+
+ &-container {
+ display: flex;
+ }
}
- &__search-icon {
- background: none !important;
- color: var(--primary-medium);
+ &__list {
+ list-style: none;
+ margin: 0;
+ gap: 0.25rem;
+ display: flex;
+ flex-direction: column;
+
+ [data-disabled] {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ padding: 0.5rem 1rem;
+ display: flex;
+ align-items: center;
+
+ .d-icon-users {
+ padding: 4px 4px;
+ box-sizing: border-box;
+ color: var(--tertiary);
+ background: var(--primary-low);
+ border-radius: 100%;
+ width: 24px;
+ height: 22px;
+ }
+
+ .btn {
+ padding: 0;
+ }
+
+ &.-highlighted {
+ background: var(--tertiary-very-low);
+ }
+ }
+
+ .user-status {
+ display: flex;
+ align-items: center;
+ .fk-d-tooltip__trigger-container {
+ display: flex;
+ align-items: center;
+ gap: 0.25em;
+
+ .emoji {
+ width: var(--font-down-2-rem);
+ height: var(--font-down-2-rem);
+ }
+ .user-status-message-description {
+ @include ellipsis;
+ font-size: var(--font-down-2-rem);
+ color: var(--primary-high);
+ margin: 0;
+ }
+ }
+ }
}
- &__input {
- width: 100% !important;
+ &__group-name {
+ flex-shrink: 0;
}
- &__input,
- &__input:focus {
- margin: 0 !important;
- border: 0 !important;
- appearance: none !important;
- outline: none !important;
- background: none !important;
- }
-}
-
-@keyframes popIn {
- 0% {
- transform: scale(0.1);
- opacity: 0;
- }
-
- 100% {
- transform: scale(1);
- opacity: 1;
+ &__chatable {
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ width: 100%;
+ flex-wrap: wrap;
+
+ .chat-user-display-name__name {
+ color: var(--primary-high);
+ font-size: var(--font-down-1-rem);
+ }
+
+ &.-category-channel .chat-channel-title__category-badge {
+ display: flex;
+ justify-content: center;
+ width: 24px;
+ }
+
+ .unread-indicator {
+ margin-left: 0.5rem;
+ width: 8px;
+ height: 8px;
+ background: var(--tertiary);
+ border-radius: 100%;
+ }
+ }
+
+ &__search-input {
+ display: flex;
+ align-items: center;
+ border: 1px solid var(--primary-400);
+ width: 100%;
+ box-sizing: border-box;
+ height: 42px;
+ padding: 0 0.5rem;
+
+ &:focus,
+ &:focus-within {
+ @include default-focus();
+ }
+
+ &-container {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ &__search-icon {
+ background: none !important;
+ color: var(--primary-medium);
+ }
+
+ &__input {
+ width: 100% !important;
+ }
+
+ &__input,
+ &__input:focus {
+ margin: 0 !important;
+ border: 0 !important;
+ appearance: none !important;
+ outline: none !important;
+ background: none !important;
+ }
+ }
+
+ @keyframes popIn {
+ 0% {
+ transform: scale(0.1);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
}
}
diff --git a/plugins/chat/spec/system/chat_message_creator_spec.rb b/plugins/chat/spec/system/chat_message_creator_spec.rb
index 7f8c70e9f06..5d2fc1027ed 100644
--- a/plugins/chat/spec/system/chat_message_creator_spec.rb
+++ b/plugins/chat/spec/system/chat_message_creator_spec.rb
@@ -128,4 +128,20 @@ RSpec.describe "Flag message", type: :system do
chat_page.message_creator.click_row(group)
expect(chat_page.message_creator).to be_listing(group)
end
+
+ it "displays users status next to names" do
+ SiteSetting.enable_user_status = true
+ SiteSetting.chat_allowed_groups = Group::AUTO_GROUPS[:everyone]
+ SiteSetting.direct_message_enabled_groups = Group::AUTO_GROUPS[:everyone]
+
+ current_user.set_status!("gone surfing", "ocean")
+
+ visit("/")
+ chat_page.open_new_message
+ chat_page.message_creator.filter(current_user.username)
+
+ expect(chat_page).to have_selector(
+ ".user-status-message img[alt='#{current_user.user_status.emoji}']",
+ )
+ end
end