github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-25 02:53:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
f75c43713b
discourse/plugins/chat/assets/stylesheets/common/chat-channel.scss

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

27 lines
528 B
SCSS
Raw Normal View History

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 {
display: flex;
flex-direction: column;
UX: chat channel header icons (#21887) * UX: BEM fix for has-unreads * UX: small refactor for chat channel header icons * UX: refactor chat thread unread indicator * UX: channel header thread icon hover styling * DEV: Spec fixes * UX: fix font + line-height --------- Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-02 16:34:19 +08:00
width: 100%;
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
min-height: 1px;
position: relative;
overflow: hidden;
grid-area: main;
FIX: correctly homogenizes panels min width (#21294) `.chat-channel` had `300px` min width, when `.chat-drawer` was `250px`, resulting in overflowing channel when in drawer. This commits ensures the limits are always set at `250px`.
2023-04-28 19:05:00 +08:00
min-width: 250px;
FIX: Make long thread titles readable (#25456) When reaching the top of a thread, the full thread title will be displayed if it was too long to fit. It works in mobile, drawer mode, and fullscreen. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-01-30 21:18:00 +08:00
@include chat-height(var(--chat-header-offset, 0px));
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
FEATURE: implements last read message for threads (#26702) This commit will now allow us to track read position in a thread and returns to this position when you open the thread. Note this commit is also extracting the following components to make it possible: - `<ChatMessagesScroller />` - `<ChatMessagesContainer />` The `UpdateUserThreadLastRead` has been updated to allow this. Various refactorings have also been done to the code and specs to improve the support of last read.
2024-04-25 16:47:54 +08:00
.join-channel-btn.in-float {
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 10px;
z-index: 10;
}
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
FEATURE: implements last read message for threads (#26702) This commit will now allow us to track read position in a thread and returns to this position when you open the thread. Note this commit is also extracting the following components to make it possible: - `<ChatMessagesScroller />` - `<ChatMessagesContainer />` The `UpdateUserThreadLastRead` has been updated to allow this. Various refactorings have also been done to the code and specs to improve the support of last read.
2024-04-25 16:47:54 +08:00
.all-loaded-message {
text-align: center;
color: var(--primary-medium);
font-size: var(--font-down-1);
padding: 0.5em 0.25em 0.25em;
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
}
}
Reference in New Issue Copy Permalink