github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-12 02:15:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
cd5a9a2775
discourse/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

49 lines
869 B
SCSS
Raw Normal View History

FEATURE: Thread indicator improvements and participants (#21909) This commit adds the initial part of thread indicator improvements: * Show the reply count, last reply date and excerpt, and the participants of the thread's avatars and count of additional participants * Add a participants component for the thread that can be reused for the list * Add a query class to get the thread participants * Live update the thread indicator more consistently with the last reply and participant details image image In subsequent PRs we will cache the participants since they do not change often, and improve the thread list further with participants. This commit also adds a showPresence boolean (default true) to ChatUserAvatar, since we don't want to show the online indicator for thread participants. --------- Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 08:49:27 +08:00
.chat-thread-participants {
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
margin-left: 0.5rem;
FEATURE: Thread indicator improvements and participants (#21909) This commit adds the initial part of thread indicator improvements: * Show the reply count, last reply date and excerpt, and the participants of the thread's avatars and count of additional participants * Add a participants component for the thread that can be reused for the list * Add a query class to get the thread participants * Live update the thread indicator more consistently with the last reply and participant details image image In subsequent PRs we will cache the participants since they do not change often, and improve the thread list further with participants. This commit also adds a showPresence boolean (default true) to ChatUserAvatar, since we don't want to show the online indicator for thread participants. --------- Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 08:49:27 +08:00
&__other-count {
font-size: var(--font-down-2);
UX: Thread indicator small fixes (#22389) * UX: make timestamp font size smaller * UX: participants use copy instead of avatar * FIX: Move thread participant count into i18n --------- Co-authored-by: Martin Brennan <martin@discourse.org>
2023-07-04 16:32:09 +08:00
color: var(--primary-high);
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
white-space: nowrap;
FEATURE: Thread indicator improvements and participants (#21909) This commit adds the initial part of thread indicator improvements: * Show the reply count, last reply date and excerpt, and the participants of the thread's avatars and count of additional participants * Add a participants component for the thread that can be reused for the list * Add a query class to get the thread participants * Live update the thread indicator more consistently with the last reply and participant details image image In subsequent PRs we will cache the participants since they do not change often, and improve the thread list further with participants. This commit also adds a showPresence boolean (default true) to ChatUserAvatar, since we don't want to show the online indicator for thread participants. --------- Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 08:49:27 +08:00
}
&__avatar-group {
display: flex;
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
align-items: center;
FEATURE: Thread indicator improvements and participants (#21909) This commit adds the initial part of thread indicator improvements: * Show the reply count, last reply date and excerpt, and the participants of the thread's avatars and count of additional participants * Add a participants component for the thread that can be reused for the list * Add a query class to get the thread participants * Live update the thread indicator more consistently with the last reply and participant details image image In subsequent PRs we will cache the participants since they do not change often, and improve the thread list further with participants. This commit also adds a showPresence boolean (default true) to ChatUserAvatar, since we don't want to show the online indicator for thread participants. --------- Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 08:49:27 +08:00
justify-content: flex-end;
FIX: makes chat user avatar show presence by default (#22490) It's way more common to have presence enabled than disabled, so we should have been making it the default from start. This commit also changes the namespace of `<ChatUserAvatar />` into `<Chat::UserAvatar />` and refactors tests.
2023-07-10 15:36:20 +08:00
.chat-user-avatar__container {
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
padding: 0;
}
FEATURE: Thread indicator improvements and participants (#21909) This commit adds the initial part of thread indicator improvements: * Show the reply count, last reply date and excerpt, and the participants of the thread's avatars and count of additional participants * Add a participants component for the thread that can be reused for the list * Add a query class to get the thread participants * Live update the thread indicator more consistently with the last reply and participant details image image In subsequent PRs we will cache the participants since they do not change often, and improve the thread list further with participants. This commit also adds a showPresence boolean (default true) to ChatUserAvatar, since we don't want to show the online indicator for thread participants. --------- Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 08:49:27 +08:00
.chat-user-avatar {
width: auto !important;
.avatar {
width: 24px;
height: 24px;
padding: 0;
}
}
}
}
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
@container (max-width: 400px) {
.chat-thread-participants {
&__avatar-group {
UX: Thread indicator small fixes (#22389) * UX: make timestamp font size smaller * UX: participants use copy instead of avatar * FIX: Move thread participant count into i18n --------- Co-authored-by: Martin Brennan <martin@discourse.org>
2023-07-04 16:32:09 +08:00
flex-direction: row;
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
justify-content: flex-start;
FIX: makes chat user avatar show presence by default (#22490) It's way more common to have presence enabled than disabled, so we should have been making it the default from start. This commit also changes the namespace of `<ChatUserAvatar />` into `<Chat::UserAvatar />` and refactors tests.
2023-07-10 15:36:20 +08:00
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
.chat-user-avatar {
UX: Thread indicator small fixes (#22389) * UX: make timestamp font size smaller * UX: participants use copy instead of avatar * FIX: Move thread participant count into i18n --------- Co-authored-by: Martin Brennan <martin@discourse.org>
2023-07-04 16:32:09 +08:00
&:not(:last-child) {
margin-right: -10px;
UX: chat message thread indicator improvements (#22224) - gridified the thread message indicator, alleviating some problems with positioning and overflow participant avatars will overlap/smush on smaller size and mobile - the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size - dropped the copy of "last reply" - fixed wrong line height - moved the "x replies" over to the right near the participants, as that makes more sense - using a bubble to indicate other participants, instead of copy This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 20:47:13 +08:00
}
.avatar {
width: 22px;
height: 22px;
border: 1px solid var(--primary-very-low);
}
}
}
}
}
Reference in New Issue Copy Permalink