diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 2716d93f..6617a937 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,3 +1,4 @@ +import { defineAsyncComponent } from 'vue' import Checkbox from '../checkbox/checkbox.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -5,6 +6,7 @@ import { faStickyNote, faSmileBeam } from '@fortawesome/free-solid-svg-icons' +import { trim, escapeRegExp, startCase } from 'lodash' library.add( faBoxOpen, @@ -19,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: { @@ -47,7 +32,7 @@ const EmojiPicker = { data () { return { keyword: '', - activeGroup: 'custom', + activeGroup: 'standard', showingStickers: false, groupsScrolledClass: 'scrolled-top', keepOpen: false, @@ -57,7 +42,7 @@ const EmojiPicker = { } }, components: { - StickerPicker: () => import('../sticker_picker/sticker_picker.vue'), + StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')), Checkbox }, methods: { @@ -77,14 +62,13 @@ const EmojiPicker = { this.scrolledGroup(target) this.triggerLoadMore(target) }, + onWheel (e) { + e.preventDefault() + this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0) + }, highlight (key) { - const ref = this.$refs['group-' + key] - const top = ref[0].offsetTop this.setShowStickers(false) this.activeGroup = key - this.$nextTick(() => { - this.$refs['emoji-groups'].scrollTop = top + 1 - }) }, updateScrolledClass (target) { if (target.scrollTop <= 5) { @@ -96,7 +80,7 @@ const EmojiPicker = { } }, triggerLoadMore (target) { - const ref = this.$refs['group-end-custom'][0] + const ref = this.$refs['group-end-custom'] if (!ref) return const bottom = ref.offsetTop + ref.offsetHeight @@ -119,7 +103,7 @@ const EmojiPicker = { this.$nextTick(() => { this.emojisView.forEach(group => { const ref = this.$refs['group-' + group.id] - if (ref[0].offsetTop <= top) { + if (ref.offsetTop <= top) { this.activeGroup = group.id } }) @@ -153,6 +137,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) || (!emoji.imageUrl && emoji.replacement === this.keyword)) + }) } }, watch: { @@ -173,9 +164,8 @@ const EmojiPicker = { return 0 }, filteredEmoji () { - return filterByKeyword( - this.$store.state.instance.customEmoji || [], - this.keyword + return this.filterByKeyword( + this.$store.state.instance.customEmoji || [] ) }, customEmojiBuffer () { @@ -183,28 +173,53 @@ 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.replace(/^pack:/, ''), + text: startCase(id.replace(/^pack:/, '')), + 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, 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 new Map([...sortedEmojiGroups.entries()].sort()) }, 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 + return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker } } } diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 3d79afe7..a37b2a40 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -26,7 +26,7 @@ right: 0; left: 0; margin: 0 !important; - z-index: 1; + z-index: 100; background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; @@ -54,9 +54,8 @@ } .heading { - display: flex; - height: 32px; - padding: 10px 7px 5px; + margin-top: 10px; + height: 4.8em; } .content { @@ -84,20 +83,40 @@ .additional-tabs, .emoji-tabs { + position: absolute; display: block; - min-width: 0; - flex-basis: auto; - flex-shrink: 1; + flex-wrap: nowrap; + + overflow: auto; + width: 100%; + + white-space: nowrap; &-item { - padding: 0 7px; + vertical-align: top; + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: .4em; cursor: pointer; - font-size: 24px; + + img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + span { + font-size: 1.9em; + } &.disabled { opacity: 0.5; pointer-events: none; } + &.active { border-bottom: 4px solid; @@ -106,6 +125,9 @@ color: var(--lightText, $fallback--lightText); } } + .fa-sticky-note { + font-size: 2em; + } } } @@ -170,9 +192,10 @@ justify-content: left; &-title { - font-size: 12px; + font-size: 0.85em; width: 100%; margin: 0; + &.disabled { display: none; } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 3262a3d9..00ffb9d2 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -1,7 +1,11 @@