discourse/plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss

.chat-side-panel-resizer {
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
  transition: background-color 0.15s 0.15s;
  background-color: transparent;

  .touch & {
    left: -6px;
    width: 10px;

    &:active {
      cursor: col-resize;
      background: var(--tertiary);
    }
  }

  .no-touch & {
    left: -3px;
    width: 5px;

    &:hover,
    &:active {
      cursor: col-resize;
      background: var(--tertiary);
    }
  }
}
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 10:23:03 +02:00			`.chat-side-panel-resizer {`
			`top: 0;`
			`bottom: 0;`
			`position: absolute;`
FIX: do not store 0 has min width for thead panel (#30818) When we had no width stored for the side panel in the local storage, essentially the computation would end up being: ```javascript Math.min(null, 1000); ``` Which would output: 0. This commit ensures we have a default for store width: MIN_PANEL_WIDTH. And also uses the same value in CSS and JS. I had to change z-layers of chat-side-panel resizer as it was interfering with system specs changing the notification level of a thread, when trying to click the option in the dropdown, it would instead click the resizer as it would appear on top of the dropdown. Tried to write a test but couldn't get something reliable. 2025-01-16 16:03:35 +01:00			`z-index: 1;`
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 10:23:03 +02:00			`transition: background-color 0.15s 0.15s;`
			`background-color: transparent;`

FIX: allows to resize panels on tablets (#22640) On tablets like iPad where we allow channel and thread to be on the same screen, it was not possible to resize the panels due to code being thought for mouse events. This commit should now correctly allow for this. The "resizer" has also been made larger to simplify touching. No test as it's hard to test on iPad and dragging events are also complex. 2023-07-17 15:11:51 +02:00			`.touch & {`
			`left: -6px;`
			`width: 10px;`

			`&:active {`
			`cursor: col-resize;`
			`background: var(--tertiary);`
			`}`
			`}`

			`.no-touch & {`
			`left: -3px;`
			`width: 5px;`

			`&:hover,`
			`&:active {`
			`cursor: col-resize;`
			`background: var(--tertiary);`
			`}`
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 10:23:03 +02:00			`}`
			`}`