Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
discourse/plugins/chat/assets/stylesheets/common/chat-thread.scss

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

31 lines
682 B
SCSS
Raw Normal View History

FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. **NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel**
2023-02-13 20:38:41 -05:00
.chat-thread {
display: flex;
flex-direction: column;
height: 100%;
&__header {
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 09:19:52 -04:00
height: var(--chat-header-offset);
min-height: var(--chat-header-offset);
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. **NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel**
2023-02-13 20:38:41 -05:00
border-bottom: 1px solid var(--primary-low);
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 09:19:52 -04:00
border-top: 1px solid var(--primary-low);
box-sizing: border-box;
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. **NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel**
2023-02-13 20:38:41 -05:00
display: flex;
align-items: center;
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 09:19:52 -04:00
justify-content: space-between;
FEATURE: Reacting to MessageBus in chat thread panel (#21070) This commit introduces a ChatChannelPaneSubscriptionsManager and a ChatChannelThreadPaneSubscriptionsManager that inherits from the first service that handle MessageBus subscriptions for the main channel and the thread panel respectively. This necessitated a change to Chat::Publisher to be able to send MessageBus messages to multiple channels based on whether a message was an OM for a thread, a thread reply, or a regular channel message. An initial change to update the thread indicator with new replies has been done too, but that will be improved in future as we have more data to update on the indicators. Still remaining is to fully move over the handleSentMessage functionality which includes scrolling and new message indicator things. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-13 08:45:50 -04:00
padding-inline: 1rem;
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. **NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel**
2023-02-13 20:38:41 -05:00
}
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 09:19:52 -04:00
&__body {
overflow-y: scroll;
@include chat-scrollbar();
margin: 2px;
padding-right: 2px;
box-sizing: border-box;
flex-grow: 1;
overscroll-behavior: contain;
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. **NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel**
2023-02-13 20:38:41 -05:00
display: flex;
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 09:19:52 -04:00
flex-direction: column-reverse;
will-change: transform;
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. **NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel**
2023-02-13 20:38:41 -05:00
}
}