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 () {
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 () {
const standardEmojis = this.$store.state.instance.emoji || []
const customEmojis = this.customEmojiBuffer
// const customEmojis = this.customEmojiBuffer
return [
{
id: 'custom',
text: this.$t('emoji.custom'),
icon: 'smile-beam',
emojis: customEmojis
},
...Object
.keys(this.groupedCustomEmojis)
.map(k => this.groupedCustomEmojis[k]),
{
id: 'standard',
text: this.$t('emoji.unicode'),

View File

@ -19,6 +19,19 @@
--lightText: var(--popoverLightText, $fallback--lightText);
--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,
.too-many-emoji {
padding: 7px;

View File

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