improve emoji reaction action button behavior and feedback

src/components/emoji_picker/emoji_picker.js

@@ -129,6 +129,7 @@ const EmojiPicker = {
       hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
+      popoverShown: false,
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
@@ -176,6 +177,13 @@ const EmojiPicker = {
       const fullEmojiSize = emojiSizeReal + 2 * 0.2 * fontSizeMultiplier * 14
       this.emojiSize = fullEmojiSize
     },
+    togglePicker() {
+      if (this.popoverShown) {
+        this.hidePicker()
+      } else {
+        this.showPicker()
+      }
+    },
     showPicker() {
       this.$refs.popover.showPopover()
       this.$nextTick(() => {
@@ -194,10 +202,10 @@ const EmojiPicker = {
       }
     },
     onPopoverShown() {
-      this.$emit('show')
+      this.popoverShown = true
     },
     onPopoverClosed() {
-      this.$emit('close')
+      this.popoverShown = false
     },
     onStickerUploaded(e) {
       this.$emit('sticker-uploaded', e)

src/components/status_action_buttons/action_button.js

@@ -131,6 +131,12 @@ export default {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
     },
+    onShowEmojiPicker() {
+      this.$emit('emojiPickerShown', true)
+    },
+    onHideEmojiPicker() {
+      this.$emit('emojiPickerShown', false)
+    },
     doActionWrap(
       button,
       close = () => {
@@ -142,7 +148,7 @@ export default {
       )
         return
       if (button.name === 'emoji') {
-        this.$refs.picker.showPicker()
+        this.$refs.picker.togglePicker()
       } else {
         this.animationState = true
         this.getComponent(button) === 'button' && this.doAction(button)

src/components/status_action_buttons/action_button.vue

@@ -100,6 +100,8 @@
       :hide-custom-emoji="hideCustomEmoji"
       class="emoji-picker-panel"
       @emoji="addReaction"
+      @show="onShowEmojiPicker"
+      @close="onHideEmojiPicker"
     />
   </div>
 </template>

src/components/status_action_buttons/action_button_container.js

@@ -20,6 +20,7 @@ export default {
     UserTimedFilterModal,
   },
   props: ['button', 'status'],
+  emits: ['emojiPickerShown'],
   mounted() {
     if (this.button.name === 'mute') {
       this.$store.dispatch('fetchDomainMutes')

src/components/status_action_buttons/action_button_container.vue

@@ -79,6 +79,7 @@
       :button="button"
       :status="status"
       v-bind="$attrs"
+      @emojiPickerShown="e => $emit('emojiPickerShown', e)"
     />
     <teleport to="#modal">
       <MuteConfirm

src/components/status_action_buttons/buttons_definitions.js

@@ -98,7 +98,7 @@ export const BUTTONS = [
     label: 'tool_tip.add_reaction',
     icon: ['far', 'smile-beam'],
     interactive: () => true,
-    active: () => false,
+    active: ({ emojiPickerShown }) => emojiPickerShown,
     toggleable: true,
     anonLink: true,
   },

src/components/status_action_buttons/status_action_buttons.js

@@ -28,6 +28,7 @@ const StatusActionButtons = {
         /* no-op */
       },
       randomSeed: genRandomSeed(),
+      emojiPickerShown: false,
     }
   },
   components: {
@@ -56,6 +57,7 @@ const StatusActionButtons = {
       return {
         status: this.status,
         replying: this.replying,
+        emojiPickerShown: this.emojiPickerShown,
         emit: this.$emit,
         dispatch: this.$store.dispatch,
         state: this.$store.state,
@@ -107,6 +109,9 @@ const StatusActionButtons = {
     onExtraClose() {
       this.showPin = false
     },
+    onEmojiPickerShown(state) {
+      this.emojiPickerShown = state
+    },
     isPinned(button) {
       return this.pinnedItems.has(button.name)
     },

src/components/status_action_buttons/status_action_buttons.vue

@@ -20,6 +20,7 @@
           :get-component="getComponent"
           :close="() => { /* no-op */ }"
           :do-action="doAction"
+          @emojiPickerShown="onEmojiPickerShown"
         />
         <button
           v-if="showPin && currentUser"