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