From 69b3102fb2396edb63abe98b4a69ebe311e22a70 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 14 Aug 2021 21:10:24 -0400 Subject: Group custom emojis by pack in emoji picker --- src/components/emoji_picker/emoji_picker.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'src/components/emoji_picker/emoji_picker.scss') 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; -- cgit v1.2.3-70-g09d2 From 992d57ef69540f4c63939fbc5abed9b1ea28ed2f Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 14 Aug 2021 21:50:58 -0400 Subject: Display all emoji groups on emoji picker header --- src/components/emoji_picker/emoji_picker.js | 28 +++++++++++++++++++++++++-- src/components/emoji_picker/emoji_picker.scss | 6 +++++- src/components/emoji_picker/emoji_picker.vue | 4 ++-- 3 files changed, 33 insertions(+), 5 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 7d5a3d8f..d04649dc 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -38,6 +38,8 @@ const filterByKeyword = (list, keyword = '') => { return orderedEmojiList.flat() } +const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5) + const EmojiPicker = { props: { enableStickerPicker: { @@ -174,9 +176,12 @@ const EmojiPicker = { } return 0 }, + allEmojis () { + return this.$store.state.instance.customEmoji || [] + }, filteredEmoji () { return filterByKeyword( - this.$store.state.instance.customEmoji || [], + this.allEmojis, trim(this.keyword) ) }, @@ -184,7 +189,6 @@ const EmojiPicker = { 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]) { @@ -201,6 +205,26 @@ const EmojiPicker = { return res }, {}) }, + allEmojiGroups () { + return this.allEmojis + .reduce((res, emoji) => { + const packName = packOf(emoji) + const packId = `custom-${packName}` + if (res.filter(k => k.id === packId).length === 0) { + res.push({ + id: packId, + text: packName, + image: emoji.imageUrl + }) + } + return res + }, []) + .concat({ + id: 'standard', + text: this.$t('emoji.unicode'), + icon: 'box-open' + }) + }, emojis () { const standardEmojis = this.$store.state.instance.emoji || [] // const customEmojis = this.customEmojiBuffer diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index ccb12a2a..0bd4363c 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -52,6 +52,7 @@ display: flex; height: 32px; padding: 10px 7px 5px; + overflow-x: auto; } .content { @@ -63,6 +64,9 @@ .emoji-tabs { flex-grow: 1; + display: flex; + flex-direction: row; + flex-wrap: nowrap; } .emoji-groups { @@ -70,6 +74,7 @@ } .additional-tabs { + display: block; border-left: 1px solid; border-left-color: $fallback--icon; border-left-color: var(--icon, $fallback--icon); @@ -79,7 +84,6 @@ .additional-tabs, .emoji-tabs { - display: block; min-width: 0; flex-basis: auto; flex-shrink: 1; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 16549c08..fe60cb5e 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -3,12 +3,12 @@
Date: Fri, 8 Oct 2021 14:10:17 -0400 Subject: Fix vertical scrollbar of emoji picker header Ref: grouped-emoji-picker --- src/components/emoji_picker/emoji_picker.scss | 29 ++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 0bd4363c..e315d2d7 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -1,5 +1,10 @@ @import '../../_variables.scss'; +$emoji-picker-header-height: 36px; +$emoji-picker-header-picture-width: 32px; +$emoji-picker-header-picture-height: 32px; +$emoji-picker-emoji-size: 32px; + .emoji-picker { display: flex; flex-direction: column; @@ -23,9 +28,11 @@ display: inline-flex; justify-content: center; align-items: center; - width: 30px; - height: 24px; - img { + width: $emoji-picker-header-picture-width; + max-width: $emoji-picker-header-picture-width; + height: $emoji-picker-header-picture-height; + max-height: $emoji-picker-header-picture-height; + .still-image { max-width: 100%; max-height: 100%; object-fit: contain; @@ -50,7 +57,7 @@ .heading { display: flex; - height: 32px; + //height: $emoji-picker-header-height; padding: 10px 7px 5px; overflow-x: auto; } @@ -87,11 +94,19 @@ min-width: 0; flex-basis: auto; flex-shrink: 1; + display: flex; + align-content: center; &-item { padding: 0 7px; cursor: pointer; font-size: 1.85em; + width: $emoji-picker-header-picture-width; + max-width: $emoji-picker-header-picture-width; + height: $emoji-picker-header-picture-height; + max-height: $emoji-picker-header-picture-height; + display: flex; + align-items: center; &.disabled { opacity: 0.5; @@ -181,11 +196,11 @@ } &-item { - width: 32px; - height: 32px; + width: $emoji-picker-emoji-size; + height: $emoji-picker-emoji-size; box-sizing: border-box; display: flex; - font-size: 32px; + font-size: $emoji-picker-emoji-size; align-items: center; justify-content: center; margin: 4px; -- cgit v1.2.3-70-g09d2 From 9aeffd7634e049123d3ffc8addf9c223652b0bbb Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Fri, 8 Oct 2021 14:46:00 -0400 Subject: Fix sticker picker heading tab Ref: grouped-emoji-picker --- src/components/emoji_picker/emoji_picker.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index e315d2d7..ea8b6037 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -57,9 +57,7 @@ $emoji-picker-emoji-size: 32px; .heading { display: flex; - //height: $emoji-picker-header-height; padding: 10px 7px 5px; - overflow-x: auto; } .content { @@ -74,6 +72,7 @@ $emoji-picker-emoji-size: 32px; display: flex; flex-direction: row; flex-wrap: nowrap; + overflow-x: auto; } .emoji-groups { @@ -81,7 +80,8 @@ $emoji-picker-emoji-size: 32px; } .additional-tabs { - display: block; + display: flex; + flex: 1; border-left: 1px solid; border-left-color: $fallback--icon; border-left-color: var(--icon, $fallback--icon); @@ -91,9 +91,8 @@ $emoji-picker-emoji-size: 32px; .additional-tabs, .emoji-tabs { - min-width: 0; flex-basis: auto; - flex-shrink: 1; + // flex-shrink: 1; display: flex; align-content: center; -- cgit v1.2.3-70-g09d2 From d9e428ebab3ea575e622fadd47150c39684648aa Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 8 Jan 2022 01:37:19 -0500 Subject: Clean up emoji picker css --- src/components/emoji_picker/emoji_picker.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index ea8b6037..222749d0 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -92,7 +92,6 @@ $emoji-picker-emoji-size: 32px; .additional-tabs, .emoji-tabs { flex-basis: auto; - // flex-shrink: 1; display: flex; align-content: center; -- cgit v1.2.3-70-g09d2 From 0fd0d6c4c2c7791f889135727f8afef10a36472d Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Fri, 29 Apr 2022 22:40:06 -0400 Subject: Limit the width of unsupported multichar emojis --- src/components/emoji_picker/emoji_picker.scss | 8 ++++++-- src/components/emoji_picker/emoji_picker.vue | 7 +++++-- 2 files changed, 11 insertions(+), 4 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 222749d0..af01b3ec 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -198,18 +198,22 @@ $emoji-picker-emoji-size: 32px; height: $emoji-picker-emoji-size; box-sizing: border-box; display: flex; - font-size: $emoji-picker-emoji-size; + line-height: $emoji-picker-emoji-size; align-items: center; justify-content: center; margin: 4px; cursor: pointer; - img { + .emoji-picker-emoji.-custom { object-fit: contain; max-width: 100%; max-height: 100%; } + .emoji-picker-emoji.-unicode { + font-size: 24px; + overflow: hidden; + } } } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index a6a63411..e5a5958c 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -92,10 +92,13 @@ class="emoji-item" @click.stop.prevent="onEmoji(emoji)" > - {{ emoji.replacement }} + {{ emoji.replacement }} Date: Thu, 18 Aug 2022 13:10:24 +0000 Subject: Fix non-square emojis being truncated --- src/components/emoji_picker/emoji_picker.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index af01b3ec..016c46d7 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -35,6 +35,8 @@ $emoji-picker-emoji-size: 32px; .still-image { max-width: 100%; max-height: 100%; + height: 100%; + width: 100%; object-fit: contain; } } -- cgit v1.2.3-70-g09d2