From 8c58cb4033aaad711b588cd6d933b94b14e07e07 Mon Sep 17 00:00:00 2001 From: David Date: Tue, 2 Aug 2022 13:55:35 -0700 Subject: [PATCH 1/7] Emoji Picker --- src/components/emoji_picker/emoji_picker.js | 87 ++++++++++--------- src/components/emoji_picker/emoji_picker.scss | 22 ++++- src/components/emoji_picker/emoji_picker.vue | 9 +- 3 files changed, 74 insertions(+), 44 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index bd5c2e39..2c590d3c 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -6,7 +6,7 @@ import { faStickyNote, faSmileBeam } from '@fortawesome/free-solid-svg-icons' -import { trim } from 'lodash' +import { trim, escapeRegExp, startCase } from 'lodash' library.add( faBoxOpen, @@ -21,23 +21,6 @@ const LOAD_EMOJI_BY = 60 // When to start loading new batch emoji, in pixels const LOAD_EMOJI_MARGIN = 64 -const filterByKeyword = (list, keyword = '') => { - if (keyword === '') return list - - const keywordLowercase = keyword.toLowerCase() - let orderedEmojiList = [] - for (const emoji of list) { - const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase) - if (indexOfKeyword > -1) { - if (!Array.isArray(orderedEmojiList[indexOfKeyword])) { - orderedEmojiList[indexOfKeyword] = [] - } - orderedEmojiList[indexOfKeyword].push(emoji) - } - } - return orderedEmojiList.flat() -} - const EmojiPicker = { props: { enableStickerPicker: { @@ -49,7 +32,7 @@ const EmojiPicker = { data () { return { keyword: '', - activeGroup: 'custom', + activeGroup: 'standard', showingStickers: false, groupsScrolledClass: 'scrolled-top', keepOpen: false, @@ -80,13 +63,8 @@ const EmojiPicker = { this.triggerLoadMore(target) }, highlight (key) { - const ref = this.$refs['group-' + key] - const top = ref.offsetTop this.setShowStickers(false) this.activeGroup = key - this.$nextTick(() => { - this.$refs['emoji-groups'].scrollTop = top + 1 - }) }, updateScrolledClass (target) { if (target.scrollTop <= 5) { @@ -155,6 +133,13 @@ const EmojiPicker = { }, setShowStickers (value) { this.showingStickers = value + }, + filterByKeyword (list) { + if (this.keyword === '') return list + const regex = new RegExp(escapeRegExp(trim(this.keyword)), 'i') + return list.filter(emoji => { + return regex.test(emoji.displayText) + }) } }, watch: { @@ -175,9 +160,8 @@ const EmojiPicker = { return 0 }, filteredEmoji () { - return filterByKeyword( - this.$store.state.instance.customEmoji || [], - trim(this.keyword) + return this.filterByKeyword( + this.$store.state.instance.customEmoji || [] ) }, customEmojiBuffer () { @@ -185,25 +169,50 @@ const EmojiPicker = { }, emojis () { const standardEmojis = this.$store.state.instance.emoji || [] - const customEmojis = this.customEmojiBuffer - + const customEmojis = this.sortedEmoji + const emojiPacks = [] + customEmojis.forEach((pack, id) => { + emojiPacks.push({ + id: id.substring(5), + text: startCase(id.substring(5)), + first: pack[0], + emojis: this.filterByKeyword(pack) + }) + }) return [ - { - id: 'custom', - text: this.$t('emoji.custom'), - icon: 'smile-beam', - emojis: customEmojis - }, { id: 'standard', text: this.$t('emoji.unicode'), - icon: 'box-open', - emojis: filterByKeyword(standardEmojis, trim(this.keyword)) + first: { + imageUrl: '', + replacement: '🥴' + }, + emojis: this.filterByKeyword(standardEmojis) } - ] + ].concat(emojiPacks) + }, + sortedEmoji () { + const customEmojis = this.$store.state.instance.customEmoji || [] + const sortedEmojiGroups = new Map() + customEmojis.forEach((emoji) => { + if (!sortedEmojiGroups.has(emoji.tags[0])) { + sortedEmojiGroups.set(emoji.tags[0], [emoji]) + } else { + sortedEmojiGroups.get(emoji.tags[0]).push(emoji) + } + }) + return sortedEmojiGroups }, emojisView () { - return this.emojis.filter(value => value.emojis.length > 0) + if (this.keyword === '') { + return this.emojis.filter(pack => { + return pack.id === this.activeGroup + }) + } else { + return this.emojis.filter(pack => { + return pack.emojis.length > 0 + }) + } }, stickerPickerEnabled () { return (this.$store.state.instance.stickers || []).length !== 0 diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 2055e02e..d5b581b3 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -36,7 +36,7 @@ .heading { display: flex; - height: 32px; + // height: 32px; padding: 10px 7px 5px; } @@ -70,11 +70,31 @@ flex-basis: auto; flex-shrink: 1; + white-space: nowrap; + align-items: center; + justify-content: center; + + overflow-x: scroll; + overflow-y: hidden; + // -ms-overflow-style: none; + // scrollbar-width: none; + // &::-webkit-scrollbar { + // display: none; + // } + &-item { padding: 0 7px; cursor: pointer; font-size: 1.85em; + img { + width: 32px; + height: 32px; + object-fit: contain; + max-width: 100%; + max-height: 100%; + } + &.disabled { opacity: 0.5; pointer-events: none; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index a7269120..408048d2 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -13,10 +13,11 @@ :title="group.text" @click.prevent="highlight(group.id)" > - + {{ group.first.replacement }} + Date: Tue, 2 Aug 2022 15:08:12 -0700 Subject: [PATCH 2/7] Sort Custom Emoji Packs by Name --- src/components/emoji_picker/emoji_picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 2c590d3c..edcb8242 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -201,7 +201,7 @@ const EmojiPicker = { sortedEmojiGroups.get(emoji.tags[0]).push(emoji) } }) - return sortedEmojiGroups + return new Map([...sortedEmojiGroups.entries()].sort()) }, emojisView () { if (this.keyword === '') { From f85841aa8068e3015fab67d8b7bef09a173f98e1 Mon Sep 17 00:00:00 2001 From: David Date: Wed, 3 Aug 2022 07:08:00 -0700 Subject: [PATCH 3/7] Replace pack with regex instead of assuming "pack:" --- src/components/emoji_picker/emoji_picker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index edcb8242..49438a4b 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -173,8 +173,8 @@ const EmojiPicker = { const emojiPacks = [] customEmojis.forEach((pack, id) => { emojiPacks.push({ - id: id.substring(5), - text: startCase(id.substring(5)), + id: id.replace(/^pack:/, ''), + text: startCase(id.replace(/^pack:/, '')), first: pack[0], emojis: this.filterByKeyword(pack) }) From f351e2e8dc7e3ac4e713f63d4432b044bbbdc66e Mon Sep 17 00:00:00 2001 From: David Date: Wed, 3 Aug 2022 08:07:22 -0700 Subject: [PATCH 4/7] CSS Cleanup --- src/components/emoji_picker/emoji_picker.scss | 35 ++++++++----------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index d5b581b3..cbd0e5f6 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -65,34 +65,29 @@ .additional-tabs, .emoji-tabs { - display: block; - min-width: 0; - flex-basis: auto; - flex-shrink: 1; - - white-space: nowrap; - align-items: center; - justify-content: center; - + display: flex; + flex-wrap: nowrap; + width: 100%; overflow-x: scroll; - overflow-y: hidden; - // -ms-overflow-style: none; - // scrollbar-width: none; - // &::-webkit-scrollbar { - // display: none; - // } &-item { - padding: 0 7px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 32px; + height: 32px; + padding: .4em; cursor: pointer; - font-size: 1.85em; img { - width: 32px; - height: 32px; - object-fit: contain; max-width: 100%; max-height: 100%; + object-fit: contain; + } + + span { + font-size: 1.9em; } &.disabled { From bc36608a6aa9ad2a0bf73971330caeeb72a8a2be Mon Sep 17 00:00:00 2001 From: David Date: Wed, 3 Aug 2022 08:43:05 -0700 Subject: [PATCH 5/7] Scrollbar fix --- src/components/emoji_picker/emoji_picker.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index cbd0e5f6..b44d675d 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -35,9 +35,8 @@ } .heading { - display: flex; - // height: 32px; - padding: 10px 7px 5px; + overflow-x: auto; + margin-top: 10px; } .content { @@ -67,8 +66,6 @@ .emoji-tabs { display: flex; flex-wrap: nowrap; - width: 100%; - overflow-x: scroll; &-item { display: flex; From a28eef7a0ace0532ddb2eda668c9d7dd508a2e34 Mon Sep 17 00:00:00 2001 From: David Date: Wed, 3 Aug 2022 10:29:03 -0700 Subject: [PATCH 6/7] Added sins --- src/components/emoji_picker/emoji_picker.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index b44d675d..e8320273 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -35,8 +35,8 @@ } .heading { - overflow-x: auto; margin-top: 10px; + height: 4.8em; } .content { @@ -64,9 +64,13 @@ .additional-tabs, .emoji-tabs { + position: absolute; display: flex; flex-wrap: nowrap; + overflow: auto; + width: 100%; + &-item { display: flex; align-items: center; From 302d07af359a23145db7642bf4281025aae0caf5 Mon Sep 17 00:00:00 2001 From: David Date: Wed, 3 Aug 2022 10:46:31 -0700 Subject: [PATCH 7/7] Fixed Scrollbar (again) --- src/components/emoji_picker/emoji_picker.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index e8320273..9c814e15 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -65,17 +65,19 @@ .additional-tabs, .emoji-tabs { position: absolute; - display: flex; + display: block; flex-wrap: nowrap; overflow: auto; width: 100%; + white-space: nowrap; + &-item { - display: flex; + vertical-align: top; + display: inline-flex; align-items: center; justify-content: center; - flex-shrink: 0; width: 32px; height: 32px; padding: .4em;