From 69b3102fb2396edb63abe98b4a69ebe311e22a70 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 14 Aug 2021 21:10:24 -0400 Subject: [PATCH] Group custom emojis by pack in emoji picker --- src/components/emoji_picker/emoji_picker.js | 29 ++++++++++++++----- src/components/emoji_picker/emoji_picker.scss | 13 +++++++++ src/components/emoji_picker/emoji_picker.vue | 10 +++++++ 3 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index f6920208..9e398176 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -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'), diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index a2f17c51..ccb12a2a 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -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; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index a7269120..16549c08 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -13,7 +13,17 @@ :title="group.text" @click.prevent="highlight(group.id)" > + + +