Reuse the emoji picker for reactions #7

Merged
floatingghost merged 4 commits from reuse-emoji-picker into develop 2022-06-16 11:41:08 +00:00
3 changed files with 11 additions and 73 deletions

View file

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

View file

@ -1,4 +1,5 @@
import Popover from '../popover/popover.vue'
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
@ -12,10 +13,12 @@ const ReactButton = {
}
},
components: {
Popover
Popover,
EmojiPicker
},
methods: {
addReaction (event, emoji, close) {
addReaction (event, close) {
const emoji = event.insertion
const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
if (existingReaction && existingReaction.me) {
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
@ -32,40 +35,6 @@ const ReactButton = {
}
},
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 () {
return this.$store.getters.mergedConfig
}

View file

@ -9,43 +9,10 @@
@show="focusInput"
>
<template v-slot:content="{close}">
<div class="reaction-picker-filter">
<input
v-model="filterWord"
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>
<EmojiPicker
:enableStickerPicker="false"
@emoji="addReaction($event, close)"
/>
</template>
<template v-slot:trigger>
<button