github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 19:01:52 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
0923f5e3a7
discourse/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss

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

87 lines
1.6 KiB
SCSS
Raw Normal View History

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-message {
container-type: inline-size;
}
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +08:00
.chat-message-thread-indicator {
cursor: pointer;
grid-area: threadindicator;
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
box-sizing: border-box;
display: grid;
grid-template-columns: auto 1fr auto auto;
UX: chat thread hover (#21181) * UX: switch standard message hover to new hover colour var * UX: chat thread indication minor design changes
2023-04-20 22:32:21 +08:00
background-color: var(--primary-very-low);
margin: 4px 0 -2px calc(var(--message-left-width) - 0.25rem);
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.5rem;
Remove border radius from chat (#22437) * add border-radius-large variable * UX: replace chat border-radius with variable
2023-07-10 21:07:38 +08:00
border-radius: var(--d-border-radius-large);
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
color: var(--primary);
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +08:00
FIX: various mobile chat improvements (#22132) - FIX: improves reactions and thread indicator touch event on mobile These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent. - DEV: moves state on top level message node - FIX: ensures popover arrow has the correct border - FIX: makes a message expanded by default - FIX applies the same ios scroll fix on thread and channel - UI: better active/hover state for thread indicator - UI: attempts to follow more closely our BEM naming scheme - FIX: reduces bottom padding on message with thread indicator and user info hidden - UI: add padding for first message in thread - FIX: prevents actions backdrop to open thread - UI: makes thread indicator resizable
2023-06-16 17:36:43 +08:00
> * {
pointer-events: none;
}
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
&:visited,
&:hover {
color: var(--primary);
}
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
&:hover {
.chat-message-thread-indicator__replies-count {
text-decoration: underline;
}
}
FIX: various mobile chat improvements (#22132) - FIX: improves reactions and thread indicator touch event on mobile These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent. - DEV: moves state on top level message node - FIX: ensures popover arrow has the correct border - FIX: makes a message expanded by default - FIX applies the same ios scroll fix on thread and channel - UI: better active/hover state for thread indicator - UI: attempts to follow more closely our BEM naming scheme - FIX: reduces bottom padding on message with thread indicator and user info hidden - UI: add padding for first message in thread - FIX: prevents actions backdrop to open thread - UI: makes thread indicator resizable
2023-06-16 17:36:43 +08:00
.no-touch & {
&:hover {
box-shadow: var(--shadow-dropdown);
}
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
}
&__last-reply-avatar {
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
grid-area: avatar;
margin-right: 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
.chat-user-avatar {
width: auto !important;
}
}
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
&__last-reply-username {
@include ellipsis;
font-weight: bold;
color: var(--primary-very-high);
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +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
&__last-reply-info {
grid-area: info;
display: flex;
align-items: center;
gap: 0.25rem;
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
}
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +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
&__last-reply-timestamp {
color: var(--primary-high);
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
font-size: var(--font-down-3);
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
}
&__last-reply-excerpt {
@include ellipsis;
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
grid-area: excerpt;
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +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-thread-participants {
grid-area: participants;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
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
gap: 0.25rem;
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
margin-left: 0.5rem;
FIX: various mobile chat improvements (#22132) - FIX: improves reactions and thread indicator touch event on mobile These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent. - DEV: moves state on top level message node - FIX: ensures popover arrow has the correct border - FIX: makes a message expanded by default - FIX applies the same ios scroll fix on thread and channel - UI: better active/hover state for thread indicator - UI: attempts to follow more closely our BEM naming scheme - FIX: reduces bottom padding on message with thread indicator and user info hidden - UI: add padding for first message in thread - FIX: prevents actions backdrop to open thread - UI: makes thread indicator resizable
2023-06-16 17:36:43 +08:00
}
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
&__replies-count {
FIX: various mobile chat improvements (#22132) - FIX: improves reactions and thread indicator touch event on mobile These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent. - DEV: moves state on top level message node - FIX: ensures popover arrow has the correct border - FIX: makes a message expanded by default - FIX applies the same ios scroll fix on thread and channel - UI: better active/hover state for thread indicator - UI: attempts to follow more closely our BEM naming scheme - FIX: reduces bottom padding on message with thread indicator and user info hidden - UI: add padding for first message in thread - FIX: prevents actions backdrop to open thread - UI: makes thread indicator resizable
2023-06-16 17:36:43 +08:00
@include ellipsis;
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
color: var(--tertiary);
FIX: various mobile chat improvements (#22132) - FIX: improves reactions and thread indicator touch event on mobile These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent. - DEV: moves state on top level message node - FIX: ensures popover arrow has the correct border - FIX: makes a message expanded by default - FIX applies the same ios scroll fix on thread and channel - UI: better active/hover state for thread indicator - UI: attempts to follow more closely our BEM naming scheme - FIX: reduces bottom padding on message with thread indicator and user info hidden - UI: add padding for first message in thread - FIX: prevents actions backdrop to open thread - UI: makes thread indicator resizable
2023-06-16 17:36:43 +08:00
font-size: var(--font-down-1);
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
text-align: right;
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +08:00
}
}
Reference in New Issue Copy Permalink