logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 69b3102fb2396edb63abe98b4a69ebe311e22a70
parent d8730cad602fe5ba7faf7cefc4a1a67cd0896d9d
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Sat, 14 Aug 2021 21:10:24 -0400

Group custom emojis by pack in emoji picker

Diffstat:

Msrc/components/emoji_picker/emoji_picker.js29++++++++++++++++++++++-------
Msrc/components/emoji_picker/emoji_picker.scss13+++++++++++++
Msrc/components/emoji_picker/emoji_picker.vue10++++++++++
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 @@ -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 @@ -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 @@ -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 />