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

plugins/chat/assets/javascripts/discourse/components/chat-message.js

@@ -123,7 +123,7 @@ export default class ChatMessage extends Component {
       return;
     }
 
-    if (this.pane.hoveredMessageId === this.args.message.id) {
+    if (this.chat.activeMessage?.model?.id === this.args.message.id) {
       return;
     }
 
@@ -166,11 +166,12 @@ export default class ChatMessage extends Component {
       model: this.args.message,
       context: this.args.context,
     };
-    this.pane.hoveredMessageId = this.args.message.id;
   }
 
   @action
-  handleTouchStart() {
+  handleTouchStart(event) {
+    event.stopPropagation();
+
     // if zoomed don't track long press
     if (isZoomed()) {
       return;
@@ -188,12 +189,16 @@ export default class ChatMessage extends Component {
   }
 
   @action
-  handleTouchMove() {
+  handleTouchMove(event) {
+    event.stopPropagation();
+
     cancel(this._isPressingHandler);
   }
 
   @action
-  handleTouchEnd() {
+  handleTouchEnd(event) {
+    event.stopPropagation();
+
     cancel(this._isPressingHandler);
   }
 

plugins/chat/assets/javascripts/discourse/services/chat-channel-pane.js

@@ -12,7 +12,6 @@ export default class ChatChannelPane extends Service {
 
   @tracked reacting = false;
   @tracked selectingMessages = false;
-  @tracked hoveredMessageId = false;
   @tracked lastSelectedMessage = null;
   @tracked sendingLoading = false;
 

plugins/chat/assets/javascripts/discourse/services/chat.js

@@ -9,7 +9,6 @@ import { and } from "@ember/object/computed";
 import { computed } from "@ember/object";
 import discourseLater from "discourse-common/lib/later";
 import ChatMessageDraft from "discourse/plugins/chat/discourse/models/chat-message-draft";
-import { MESSAGE_CONTEXT_THREAD } from "discourse/plugins/chat/discourse/components/chat-message";
 
 const CHAT_ONLINE_OPTIONS = {
   userUnseenTime: 300000, // 5 minutes seconds with no interaction
@@ -78,17 +77,8 @@ export default class Chat extends Service {
   }
 
   set activeMessage(hash) {
-    this.chatChannelPane.hoveredMessageId = null;
-    this.chatChannelThreadPane.hoveredMessageId = null;
-
     if (hash) {
       this._activeMessage = hash;
-
-      if (hash.context === MESSAGE_CONTEXT_THREAD) {
-        this.chatChannelThreadPane.hoveredMessageId = hash.model.id;
-      } else {
-        this.chatChannelPane.hoveredMessageId = hash.model.id;
-      }
     } else {
       this._activeMessage = null;
     }

plugins/chat/assets/stylesheets/common/chat-message-separator.scss

@@ -95,7 +95,7 @@
     }
 
     & + .chat-message-separator__line-container {
-      padding: 20px 0 20px 1em;
+      padding: 20px 0;
       box-sizing: border-box;
 
       .chat-message-separator__line {

plugins/chat/assets/stylesheets/common/chat-message.scss

@@ -197,6 +197,7 @@
     .touch & {
       &:active {
         background: var(--primary-very-low);
+        border-radius: 5px;
       }
 
       &.chat-message-bookmarked {

plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss

@@ -11,6 +11,7 @@
     box-shadow: shadow("card");
     z-index: z("header") + 2;
     max-width: 100vw;
+    box-sizing: border-box;
 
     &__backdrop {
       position: fixed;

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

@@ -6,8 +6,11 @@
   display: flex;
   flex-direction: column;
   border-radius: 8px 8px 0 0;
-  margin: 0 2px;
+  margin: 0 5px;
-  transition: bottom 0.2s ease;
+  transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility cubic-bezier(0.4, 0, 0.2, 1);
+  visibility: hidden;
+  box-sizing: border-box;
 
   .selected-message-container {
     padding: 0.5em 0.5em 1em 0.5em;
@@ -82,6 +85,10 @@
     .bookmark-btn {
       flex-grow: 1;
       height: 42px;
+
+      &:active {
+        background: var(--primary-low);
+      }
     }
 
     .bookmark-btn,
@@ -112,14 +119,15 @@
       border-bottom: 1px solid var(--primary-low);
       width: 100%;
       list-style: none;
-      padding-bottom: 0.25em;
+      padding: 0.25em 0;
-      margin-bottom: 0.25em;
       display: flex;
 
+      &:active {
+        background: var(--primary-low);
+      }
+
       &:last-child {
-        border: 0;
+        border-bottom: 0;
-        margin: 0;
-        padding: 0;
       }
 
       .chat-message-action {
@@ -146,7 +154,7 @@
   height: 100%;
   width: 100%;
   z-index: z("header") + 1;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.4s ease;
 
   .collapse-area {
     width: 100%;
@@ -154,10 +162,11 @@
   }
 
   &.fade-in {
-    background-color: rgba(0, 0, 0, 0.35);
+    background: rgba(var(--always-black-rgb), 0.75);
 
     .chat-message-actions {
-      bottom: 0;
+      bottom: 0px;
+      visibility: visible;
     }
   }
 }

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

@@ -1,6 +1,11 @@
-.chat-message *,
+.mobile-view.has-full-page-chat {
-.chat-composer-row,
+  #skip-link,
-.chat-reply,
+  .d-header,
-.replying-text {
+  .chat-message-actions-mobile-outlet,
-  @include unselectable;
+  .chat-live-pane,
+  .chat-thread {
+    > * {
+      @include user-select(none);
+    }
+  }
 }