Merge remote-tracking branch 'upstream/develop' into birthdays

1 files changed, 46 insertions, 19 deletions

diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 5a809847..a813b6fd 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -7,7 +7,8 @@
     :bound-to="{ x: 'container' }"
     remove-padding
     popover-class="ReactButton popover-default"
-    @show="focusInput"
+    @show="onShow"
+    @close="onClose"
   >
     <template #content="{close}">
       <div class="reaction-picker-filter">
@@ -23,7 +24,7 @@
           v-for="emoji in commonEmojis"
           :key="emoji.replacement"
           class="emoji-button"
-          :title="emoji.displayText"
+          :title="maybeLocalizedEmojiName(emoji)"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
@@ -33,7 +34,7 @@
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
-          :title="emoji.displayText"
+          :title="maybeLocalizedEmojiName(emoji)"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
@@ -46,10 +47,24 @@
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
       >
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          :icon="['far', 'smile-beam']"
-        />
+        <FALayers>
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            :icon="['far', 'smile-beam']"
+          />
+          <FAIcon
+            v-show="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="plus"
+          />
+          <FAIcon
+            v-show="expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="times"
+          />
+        </FALayers>
       </span>
     </template>
   </Popover>
@@ -58,7 +73,8 @@
 <script src="./react_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+@import "../../mixins";
 
 .ReactButton {
   .reaction-picker-filter {
@@ -88,20 +104,19 @@
     text-align: center;
     align-content: flex-start;
     user-select: none;
-
-    mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-          linear-gradient(to top, white, white);
+    mask:
+      linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+      linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+      linear-gradient(to top, white, white);
     transition: mask-size 150ms;
     mask-size: 100% 20px, 100% 20px, auto;
 
     /* Autoprefixed seem to ignore this one, and also syntax is different */
-    -webkit-mask-composite: xor;
+    mask-composite: xor;
     mask-composite: exclude;
 
     .emoji-button {
       cursor: pointer;
-
       flex-basis: 20%;
       line-height: 1.5;
       align-content: center;
@@ -112,11 +127,6 @@
     }
   }
 
-  /* override of popover internal stuff */
-  .popover-trigger-button {
-    width: auto;
-  }
-
   .popover-trigger {
     padding: 10px;
     margin: -10px;
@@ -126,6 +136,23 @@
       color: var(--text, $fallback--text);
     }
   }
+
+  .popover-trigger-button {
+    /* override of popover internal stuff */
+    width: auto;
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
+  }
 }
 
 </style>