From a2a13461626659992f6d22c4e5677e6c577255b8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 1 Jun 2026 20:50:12 +0300 Subject: [PATCH] improve emoji reaction action button behavior and feedback --- src/components/emoji_picker/emoji_picker.js | 12 ++++++++++-- .../status_action_buttons/action_button.js | 8 +++++++- .../status_action_buttons/action_button.vue | 2 ++ .../status_action_buttons/action_button_container.js | 1 + .../action_button_container.vue | 1 + .../status_action_buttons/buttons_definitions.js | 2 +- .../status_action_buttons/status_action_buttons.js | 5 +++++ .../status_action_buttons/status_action_buttons.vue | 1 + 8 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 1d19987ac..36b669622 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/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) diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js index 7abce5420..5f7942162 100644 --- a/src/components/status_action_buttons/action_button.js +++ b/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) diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue index 6070983dc..043cd995d 100644 --- a/src/components/status_action_buttons/action_button.vue +++ b/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" /> diff --git a/src/components/status_action_buttons/action_button_container.js b/src/components/status_action_buttons/action_button_container.js index 0f236b0a9..a5a070dde 100644 --- a/src/components/status_action_buttons/action_button_container.js +++ b/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') diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue index 9c4e84c00..348b158a7 100644 --- a/src/components/status_action_buttons/action_button_container.vue +++ b/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)" /> true, - active: () => false, + active: ({ emojiPickerShown }) => emojiPickerShown, toggleable: true, anonLink: true, }, diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js index 8bdd87277..05809bbe9 100644 --- a/src/components/status_action_buttons/status_action_buttons.js +++ b/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) }, diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue index 3837e6ae5..7017a8cf0 100644 --- a/src/components/status_action_buttons/status_action_buttons.vue +++ b/src/components/status_action_buttons/status_action_buttons.vue @@ -20,6 +20,7 @@ :get-component="getComponent" :close="() => { /* no-op */ }" :do-action="doAction" + @emojiPickerShown="onEmojiPickerShown" />