Reuse the emoji picker for reactions (#7)

Fixes #6

Co-authored-by: FloatingGhost <hannah@coffee-and-dreams.uk>
Reviewed-on: http://akkoma.dev/AkkomaGang/pleroma-fe/pulls/7
This commit is contained in:
floatingghost 2022-06-16 11:41:08 +00:00
parent 52644ec5cb
commit 8c9356b9fd
3 changed files with 11 additions and 73 deletions

View file

@ -3,6 +3,7 @@ pipeline:
when: when:
event: event:
- push - push
- pull_request
image: node:16 image: node:16
commands: commands:
- yarn - yarn
@ -13,6 +14,7 @@ pipeline:
when: when:
event: event:
- push - push
- pull_request
image: node:16 image: node:16
commands: commands:
- apt update - apt update

View file

@ -1,4 +1,5 @@
import Popover from '../popover/popover.vue' import Popover from '../popover/popover.vue'
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons' import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
@ -12,10 +13,12 @@ const ReactButton = {
} }
}, },
components: { components: {
Popover Popover,
EmojiPicker
}, },
methods: { methods: {
addReaction (event, emoji, close) { addReaction (event, close) {
const emoji = event.insertion
const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji) const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
if (existingReaction && existingReaction.me) { if (existingReaction && existingReaction.me) {
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji }) this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
@ -32,40 +35,6 @@ const ReactButton = {
} }
}, },
computed: { computed: {
commonEmojis () {
return [
{ displayText: 'thumbsup', replacement: '👍' },
{ displayText: 'angry', replacement: '😠' },
{ displayText: 'eyes', replacement: '👀' },
{ displayText: 'joy', replacement: '😂' },
{ displayText: 'fire', replacement: '🔥' }
]
},
emojis () {
if (this.filterWord !== '') {
const filterWordLowercase = this.filterWord.toLowerCase()
let orderedEmojiList = []
for (const emoji of [
...this.$store.state.instance.emoji,
...this.$store.state.instance.customEmoji
]) {
if (emoji.replacement === this.filterWord) return [emoji]
const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
if (indexOfFilterWord > -1) {
if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
orderedEmojiList[indexOfFilterWord] = []
}
orderedEmojiList[indexOfFilterWord].push(emoji)
}
}
return orderedEmojiList.flat()
}
return [
...this.$store.state.instance.emoji,
...this.$store.state.instance.customEmoji
] || []
},
mergedConfig () { mergedConfig () {
return this.$store.getters.mergedConfig return this.$store.getters.mergedConfig
} }

View file

@ -9,43 +9,10 @@
@show="focusInput" @show="focusInput"
> >
<template v-slot:content="{close}"> <template v-slot:content="{close}">
<div class="reaction-picker-filter"> <EmojiPicker
<input :enableStickerPicker="false"
v-model="filterWord" @emoji="addReaction($event, close)"
size="1" />
:placeholder="$t('emoji.search_emoji')"
>
</div>
<div class="reaction-picker">
<span
v-for="emoji in commonEmojis"
:key="emoji.replacement"
class="emoji-button"
:title="emoji.displayText"
@click="addReaction($event, emoji.replacement, close)"
>
{{ emoji.replacement }}
</span>
<div class="reaction-picker-divider" />
<span
v-for="(emoji, key) in emojis"
:key="key"
class="emoji-button"
:title="emoji.displayText"
@click="addReaction($event, emoji.replacement, close)"
>
<img
v-if="emoji.imageUrl !== false"
:src="emoji.imageUrl"
width="30px"
class="custom-reaction"
>
<span v-else>
{{ emoji.replacement }}
</span>
</span>
<div class="reaction-bottom-fader" />
</div>
</template> </template>
<template v-slot:trigger> <template v-slot:trigger>
<button <button