Group custom emojis by pack in emoji picker
This commit is contained in:
parent
d8730cad60
commit
69b3102fb2
@ -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'),
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user