github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-12 21:44:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
731fcad3d5
discourse/plugins/chat/assets/stylesheets/mobile/base-mobile.scss

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

74 lines
1.1 KiB
SCSS
Raw Normal View History

DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
:root {
UX: reworks channel index (drawer and mobile) (#18892) - Multiple style improvements - adds last sent message date to the view Co-authored-by: chapoi <charlie@discourse.org> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2022-11-29 01:38:05 +08:00
--channel-list-avatar-size: 38px;
UX: chat header size and alignments (#25239) This commit: - increased the size of chat-header-offset from 46px to 56px on mobile - tweaked navbar padding - Increased the gap between back button and title; this means no more perfect alignment, but I think that's perfectly fine and a fair trade off for an easier click target for the back button without fear of hitting the title
2024-01-12 21:27:44 +08:00
--chat-header-offset: 56px;
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +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
.chat-message-container:not(.-user-info-hidden) {
.chat-message {
padding-top: 0.75em;
}
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
}
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-14 09:38:41 +08:00
html.has-full-page-chat {
body #main-outlet {
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
padding: 0;
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-14 09:38:41 +08:00
.main-chat-outlet {
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi
2023-04-25 16:23:03 +08:00
.chat-channel {
FIX: Overflowing chat content in main-chat-outlet grid (#20301) Follow up to 82b4a53d29b6e043001e37cb448f077a19067a33 On mobile, we just need to add `min-width: 0` to `chat-live-pane` so it will not overflow the grid defined in `main-chat-outlet.chat-view`. The overflow could be triggered by: 1. Replying on mobile to a really long chat message 2. Uploading > 2 files Both of these situations are fixed.
2023-02-15 10:48:18 +08:00
min-width: 0;
}
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-14 09:38:41 +08:00
&.has-side-panel-expanded {
grid-template-columns: 1fr;
FEATURE: allows browse page in chat drawer (#27919) This commit ensures the browse page can be loaded in the drawer and doesn’t force full page mode. Other notable changes of this commit: - be consistent about wrapping each full page route with "c-routes.--route-name" and each drawer container with "c-drawer-routes.--route-name" - move browse channels into its own component, it was before in the template of the channels browse
2024-07-16 18:34:37 +08:00
.c-routes.--channel {
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-14 09:38:41 +08:00
display: none;
}
}
}
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
}
}
.full-page-chat {
grid-template-columns: 100%;
width: 100%;
REFACTOR: handles every chat resource as an URL (#18961) - Note this is also tweaking the UI a little bit as we are now using links/buttons in the header as needed - It disables the find ideal channel in drawer mode, if loading `/chat` in drawer mode it will either reopen at the last position or just stay on index
2022-11-11 13:39:15 +08:00
.btn:active,
.btn:hover {
.d-icon {
color: var(--primary-medium);
}
}
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi
2023-04-25 16:23:03 +08:00
.chat-channel {
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
border-radius: 0;
padding: 0;
}
.chat-drawer {
width: 100%;
}
}
.sidebar-container .channels-list .chat-channel-divider {
padding-left: 1em;
}
.sidebar-container .channels-list .chat-channel-row {
padding: 0.5em;
}
.chat-message-separator {
margin-left: 0;
}
FEATURE: Mobile Chat Notification Badges (#25438) This change adds notification badges to the new footer tabs on mobile chat, to help users easily find areas where there’s new activity to review. When on mobile chat: - Show a badge on the DMs footer when there is unread activity in DMs. - Show a badge on the Channels footer tab when there is unread channel activity. - Show a badge on the Threads footer tab when there is unread activity in a followed thread. - Notification badges should be removed once the unread activity is viewed. Additionally this change will: - Show green notification badges for channel mentions or DMs - Show blue notification badges for unread messages in channels or threads Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-01-29 10:38:14 +08:00
.header-dropdown-toggle.chat-header-icon .icon,
.c-footer .c-footer__item {
&.active .d-icon {
color: var(--primary-medium);
}
.chat-channel-unread-indicator {
border-color: var(--primary-very-low);
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
}
}
Reference in New Issue Copy Permalink