UX: tweaks to msg actions menu (#18966)

- allows to scroll while hovering the menu
- correctly changes message background color while hovering menu
- prevents a bug where it would sometimes close the menu while moving from menu to the 3 dots expanded dropdown. This was caused by the gap between header/body of the 3 dots dropdown, which would sometimes allow to create a mouseover event on a possible different underlying message
- removes recent/favorite reactions on drawer mode
- grayscale reactions until hover
- boxshadow on msgactions container
- removes useless code

app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js

@@ -4,6 +4,7 @@ import { render } from "@ember/test-helpers";
 import I18n from "I18n";
 import { hbs } from "ember-cli-htmlbars";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import { query } from "discourse/tests/helpers/qunit-helpers";
 
 const DEFAULT_CONTENT = [
   { id: 1, name: "foo" },
@@ -391,4 +392,23 @@ module("Integration | Component | select-kit/single-select", function (hooks) {
       })
     );
   });
+
+  test("options.verticalOffset", async function (assert) {
+    setDefaultState(this, { verticalOffset: -50 });
+    await render(hbs`
+      <SingleSelect
+        @value={{this.value}}
+        @content={{this.content}}
+        @nameProperty={{this.nameProperty}}
+        @valueProperty={{this.valueProperty}}
+        @onChange={{this.onChange}}
+        @options={{hash verticalOffset=this.verticalOffset}}
+      />
+    `);
+    await this.subject.expand();
+    const header = query(".select-kit-header").getBoundingClientRect();
+    const body = query(".select-kit-body").getBoundingClientRect();
+
+    assert.ok(header.bottom > body.top, "it correctly offsets the body");
+  });
 });

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -283,6 +283,7 @@ export default Component.extend(
       closeOnChange: true,
       limitMatches: null,
       placement: isDocumentRTL() ? "bottom-end" : "bottom-start",
+      verticalOffset: 3,
       filterComponent: "select-kit/select-kit-filter",
       selectedNameComponent: "selected-name",
       selectedChoiceComponent: "selected-choice",
@@ -898,7 +899,7 @@ export default Component.extend(
             {
               name: "offset",
               options: {
-                offset: [0, 3],
+                offset: [0, this.selectKit.options.verticalOffset],
               },
             },
             {

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

@@ -2,12 +2,16 @@ import Component from "@ember/component";
 import { action } from "@ember/object";
 import { createPopper } from "@popperjs/core";
 import { schedule } from "@ember/runloop";
+import { inject as service } from "@ember/service";
 
-const MSG_ACTIONS_PADDING = 2;
+const MSG_ACTIONS_HORIZONTAL_PADDING = 2;
+const MSG_ACTIONS_VERTICAL_PADDING = -15;
 
 export default Component.extend({
   tagName: "",
 
+  chatPreferredMode: service(),
+
   messageActions: null,
 
   didReceiveAttrs() {
@@ -32,9 +36,9 @@ export default Component.extend({
               options: {
                 offset: ({ popper, placement }) => {
                   return [
-                    MSG_ACTIONS_PADDING,
+                    MSG_ACTIONS_VERTICAL_PADDING,
                     -(placement.includes("left") || placement.includes("right")
-                      ? popper.width + MSG_ACTIONS_PADDING
+                      ? popper.width + MSG_ACTIONS_HORIZONTAL_PADDING
                       : popper.height),
                   ];
                 },

plugins/chat/assets/javascripts/discourse/templates/components/chat-live-pane.hbs

@@ -28,7 +28,6 @@
 <ChatRetentionReminder @chatChannel={{this.chatChannel}} />
 
 <div class="chat-message-actions-mobile-anchor"></div>
-<div class="chat-message-actions-desktop-anchor"></div>
 <div
   class={{concat-class
     "chat-message-emoji-picker-anchor"
@@ -44,6 +43,7 @@
 </div>
 
 <div class="chat-messages-scroll chat-messages-container">
+  <div class="chat-message-actions-desktop-anchor"></div>
   <div class="chat-messages-container">
     {{#if (or this.loading this.loadingMorePast)}}
       <ChatSkeleton @tagName="" />

plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs

@@ -1,8 +1,10 @@
 <div class="chat-msgactions-hover" data-id={{this.message.id}}>
   <div class="chat-msgactions">
+    {{#if this.chatPreferredMode.isFullPage}}
       {{#each this.emojiReactions as |reaction|}}
         <ChatMessageReaction @reaction={{reaction}} @react={{this.messageActions.react}} @class="show" />
       {{/each}}
+    {{/if}}
 
     {{#if this.messageCapabilities.canReact}}
       <DButton @class="btn-flat react-btn" @action={{this.messageActions.startReactionForMsgActions}} @icon="discourse-emojis" @title="chat.react" />

plugins/chat/assets/javascripts/discourse/templates/components/chat-message.hbs

@@ -23,6 +23,7 @@
   {{chat/track-message-visibility}}
   class={{concat-class
     "chat-message-container"
+    (if this.isHovered "is-hovered")
     (if this.selectingMessages "selecting-messages")
   }}
   data-id={{or this.message.id this.message.stagedId}}

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

@@ -14,6 +14,11 @@
   }
 }
 
+.chat-message-actions-desktop-anchor {
+  position: relative;
+  z-index: z("dropdown");
+}
+
 @mixin chat-reaction {
   align-items: center;
   display: inline-flex;
@@ -258,22 +263,14 @@
 
 .chat-msgactions-hover {
   @include unselectable;
-  position: absolute;
-  padding-right: 1rem;
-  padding-top: 0.25rem;
-  right: 0;
-  top: -1.5em;
-  z-index: 2;
-}
-
-.chat-message.is-reply .chat-msgactions-hover {
-  top: 0.5em;
+  position: relative;
 }
 
 .chat-msgactions {
   border-radius: 0.25em;
   background-color: var(--secondary);
   display: flex;
+  box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15);
 
   .emoji-picker-anchor {
     position: absolute;
@@ -318,7 +315,7 @@
     }
 
     .d-icon {
-      color: var(--primary-low-mid);
+      color: var(--primary-medium);
 
       &.bookmark-icon__bookmarked {
         color: var(--tertiary);
@@ -326,12 +323,6 @@
     }
   }
 
-  .reply-btn {
-    .d-icon {
-      color: var(--tertiary);
-    }
-  }
-
   .more-buttons.dropdown-select-box {
     .select-kit-header {
       background: none;
@@ -345,7 +336,6 @@
       &:focus {
         border-color: var(--primary-low);
         border-left-color: transparent;
-        background: var(--primary-low);
 
         .select-kit-header-wrapper .d-icon {
           color: var(--primary);
@@ -356,7 +346,7 @@
         justify-content: center;
 
         .d-icon {
-          color: var(--primary-low-mid);
+          color: var(--primary-medium);
           margin: 0;
         }
       }
@@ -404,9 +394,10 @@
     margin-right: -1px;
     padding: 0.5em 0;
     width: 2.5em;
+    filter: grayscale(100%);
 
     &:hover {
-      z-index: 2;
+      filter: grayscale(0);
     }
 
     &:focus {
@@ -475,7 +466,7 @@
   font-style: italic;
 }
 
-.chat-message-container:hover,
+.chat-message-container.is-hovered,
 .chat-message.chat-message-selected {
   background: var(--primary-very-low);
 }