github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-03 00:53:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
a6bd3994f3
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.

66 lines
1.3 KiB
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 {
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
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid rgba(0, 0, 0, 0);
box-sizing: border-box;
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
font-size: var(--font-down-2);
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
color: var(--primary-very-low);
background: var(--secondary-high);
padding: 0.21em 0.42em;
border-radius: 1em;
text-align: center;
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;
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-container {
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 {
flex-direction: row-reverse;
justify-content: flex-start;
.chat-user-avatar {
&:not(:first-child) {
margin-right: -12px;
}
.avatar {
width: 22px;
height: 22px;
border: 1px solid var(--primary-very-low);
}
}
}
&__other-count {
width: 22px;
height: 22px;
margin-right: -12px;
z-index: 1;
border: 1px solid var(--primary-very-low);
}
}
}
Reference in New Issue Copy Permalink