discourse/plugins/chat/assets/stylesheets/mobile/chat-message.scss

.mobile-view.has-full-page-chat {
  #skip-link,
  .d-header,
  .chat-message-actions-mobile-outlet,
  .chat-channel,
  .chat-thread {
    > * {
      @include user-select(none);
    }
  }

  .chat-message-container {
    transition: transform 400ms;
    transform: scale(1);

    &.is-long-pressed {
      animation: scale-animation 400ms;
    }
  }

  @keyframes scale-animation {
    0% {
      transform: scale(1);
    }
    80% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }
}
UX: chat mobile tweaks (#21041) - rounded active style for messages - better active state on chat message actions rows - ensures long press on a message is not selecting text - slightly improved messages actions animation and background fading - ensures chat emoji picker is not cutoff on right side - removes old legacy code related to hovered message 2023-04-11 09:03:12 +02:00			`.mobile-view.has-full-page-chat {`
			`#skip-link,`
			`.d-header,`
			`.chat-message-actions-mobile-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 10:23:03 +02:00			`.chat-channel,`
UX: chat mobile tweaks (#21041) - rounded active style for messages - better active state on chat message actions rows - ensures long press on a message is not selecting text - slightly improved messages actions animation and background fading - ensures chat emoji picker is not cutoff on right side - removes old legacy code related to hovered message 2023-04-11 09:03:12 +02:00			`.chat-thread {`
			`> * {`
			`@include user-select(none);`
			`}`
			`}`
UX: improves chat message long press and touch (#21984) This commit attempts to refactor our long press logic to make it more resilient and precise. With this improvement two very UX/UI changes have been made: - scale animation on long press - prevents click on reaction to propagate to the message which would cause the active state of the message to trigger 2023-06-08 08:21:32 +02:00
			`.chat-message-container {`
			`transition: transform 400ms;`
			`transform: scale(1);`

			`&.is-long-pressed {`
			`animation: scale-animation 400ms;`
			`}`
			`}`

			`@keyframes scale-animation {`
			`0% {`
			`transform: scale(1);`
			`}`
			`80% {`
			`transform: scale(0.95);`
			`}`
			`100% {`
			`transform: scale(1);`
			`}`
			`}`
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 10:41:30 -03:00			`}`