Group custom emojis by pack in emoji picker

This commit is contained in:
Tusooa Zhu 2021-08-14 21:10:24 -04:00
parent d8730cad60
commit 69b3102fb2
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
3 changed files with 45 additions and 7 deletions

View File

@ -183,17 +183,32 @@ const EmojiPicker = {
customEmojiBuffer () { customEmojiBuffer () {
return this.filteredEmoji.slice(0, this.customEmojiBufferSlice) return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
}, },
groupedCustomEmojis () {
const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
return this.customEmojiBuffer.reduce((res, emoji) => {
const pack = packOf(emoji)
if (!res[pack]) {
res[pack] = {
id: `custom-${pack}`,
text: pack,
/// FIXME
// icon: 'smile-beam',
image: emoji.imageUrl,
emojis: []
}
}
res[pack].emojis.push(emoji)
return res
}, {})
},
emojis () { emojis () {
const standardEmojis = this.$store.state.instance.emoji || [] const standardEmojis = this.$store.state.instance.emoji || []
const customEmojis = this.customEmojiBuffer // const customEmojis = this.customEmojiBuffer
return [ return [
{ ...Object
id: 'custom', .keys(this.groupedCustomEmojis)
text: this.$t('emoji.custom'), .map(k => this.groupedCustomEmojis[k]),
icon: 'smile-beam',
emojis: customEmojis
},
{ {
id: 'standard', id: 'standard',
text: this.$t('emoji.unicode'), text: this.$t('emoji.unicode'),

View File

@ -19,6 +19,19 @@
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon); --icon: var(--popoverIcon, $fallback--icon);
&-header-image {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 24px;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
.keep-open, .keep-open,
.too-many-emoji { .too-many-emoji {
padding: 7px; padding: 7px;

View File

@ -13,7 +13,17 @@
:title="group.text" :title="group.text"
@click.prevent="highlight(group.id)" @click.prevent="highlight(group.id)"
> >
<span
v-if="group.image"
class="emoji-picker-header-image"
>
<img
:alt="group.text"
:src="group.image"
>
</span>
<FAIcon <FAIcon
v-else
:icon="group.icon" :icon="group.icon"
fixed-width fixed-width
/> />