From 29e6e62e7cbddf8e936bdfbdb2ecb935bb297cec Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Oct 2019 20:16:01 +0300 Subject: emoji picker gradual render --- src/components/emoji_picker/emoji_picker.js | 42 ++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 3 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 824412dd..81f7437f 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,3 +1,4 @@ +import { set } from 'vue' const filterByKeyword = (list, keyword = '') => { return list.filter(x => x.displayText.includes(keyword)) @@ -18,7 +19,10 @@ const EmojiPicker = { activeGroup: 'custom', showingStickers: false, groupsScrolledClass: 'scrolled-top', - keepOpen: false + keepOpen: false, + customEmojiBuffer: [], + customEmojiInterval: null, + customEmojiCounter: 0 } }, components: { @@ -57,6 +61,36 @@ const EmojiPicker = { }) }) }, + restartInterval () { + const customEmojis = filterByKeyword( + this.$store.state.instance.customEmoji || [], + this.keyword + ) + const amount = 50 + const interval = 100 + + if (this.customEmojiInterval) { + window.clearInterval(this.customEmojiInterval) + } + window.setTimeout( + window.clearInterval(this.customEmojiInterval), + 1000 + ) + set(this, 'customEmojiBuffer', []) + this.customEmojiCounter = 0 + this.customEmojiInterval = window.setInterval(() => { + console.log(this.customEmojiBuffer.length) + console.log(customEmojis.length) + if (this.customEmojiBuffer.length < customEmojis.length) { + this.customEmojiBuffer.push( + ...customEmojis.slice(this.customEmojiCounter, this.customEmojiCounter + amount) + ) + } else { + window.clearInterval(this.customEmojiInterval) + } + this.customEmojiCounter += amount + }, interval) + }, toggleStickers () { this.showingStickers = !this.showingStickers }, @@ -73,6 +107,7 @@ const EmojiPicker = { watch: { keyword () { this.scrolledGroup() + this.restartInterval() } }, computed: { @@ -87,13 +122,14 @@ const EmojiPicker = { }, emojis () { const standardEmojis = this.$store.state.instance.emoji || [] - const customEmojis = this.$store.state.instance.customEmoji || [] + const customEmojis = this.customEmojiBuffer + return [ { id: 'custom', text: this.$t('emoji.custom'), icon: 'icon-smile', - emojis: filterByKeyword(customEmojis, this.keyword) + emojis: customEmojis }, { id: 'standard', -- cgit v1.2.3-70-g09d2 From 6511a744a29c760aa2613b0902db55be3b59dfa5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Oct 2019 23:46:40 +0300 Subject: arbitrary limit with option to overcome it --- src/App.scss | 12 ++++ src/_variables.scss | 1 + src/components/emoji_picker/emoji_picker.js | 80 ++++++++++++++++-------- src/components/emoji_picker/emoji_picker.scss | 24 ++++--- src/components/emoji_picker/emoji_picker.vue | 11 ++++ src/components/style_switcher/style_switcher.js | 3 + src/components/style_switcher/style_switcher.vue | 7 +++ src/i18n/en.json | 5 +- src/services/style_setter/style_setter.js | 5 ++ 9 files changed, 113 insertions(+), 35 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/App.scss b/src/App.scss index 2190f91a..fe271ce1 100644 --- a/src/App.scss +++ b/src/App.scss @@ -658,6 +658,18 @@ nav { color: var(--alertErrorPanelText, $fallback--text); } } + + &.warning { + background-color: $fallback--alertWarning; + background-color: var(--alertWarning, $fallback--alertWarning); + color: $fallback--text; + color: var(--alertWarningText, $fallback--text); + + .panel-heading & { + color: $fallback--text; + color: var(--alertWarningPanelText, $fallback--text); + } + } } .faint { diff --git a/src/_variables.scss b/src/_variables.scss index 150e4fb5..e18101f0 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -17,6 +17,7 @@ $fallback--cGreen: #0fa00f; $fallback--cOrange: orange; $fallback--alertError: rgba(211,16,20,.5); +$fallback--alertWarning: rgba(111,111,20,.5); $fallback--panelRadius: 10px; $fallback--checkboxRadius: 2px; diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 81f7437f..11dbdf44 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,5 +1,9 @@ import { set } from 'vue' +const LOAD_EMOJI_BY = 50 +const LOAD_EMOJI_INTERVAL = 100 +const LOAD_EMOJI_SANE_AMOUNT = 500 + const filterByKeyword = (list, keyword = '') => { return list.filter(x => x.displayText.includes(keyword)) } @@ -21,13 +25,17 @@ const EmojiPicker = { groupsScrolledClass: 'scrolled-top', keepOpen: false, customEmojiBuffer: [], - customEmojiInterval: null, - customEmojiCounter: 0 + customEmojiTimeout: null, + customEmojiCounter: 0, + customEmojiLoadAllConfirmed: false } }, components: { StickerPicker: () => import('../sticker_picker/sticker_picker.vue') }, + mounted () { + this.startEmojiLoad() + }, methods: { onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement @@ -61,35 +69,39 @@ const EmojiPicker = { }) }) }, - restartInterval () { - const customEmojis = filterByKeyword( - this.$store.state.instance.customEmoji || [], - this.keyword - ) - const amount = 50 - const interval = 100 + loadEmojiInsane () { + this.customEmojiLoadAllConfirmed = true + this.continueEmojiLoad() + }, + loadEmoji () { + const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length + const saneLoaded = this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && + !this.customEmojiLoadAllConfirmed - if (this.customEmojiInterval) { - window.clearInterval(this.customEmojiInterval) + if (allLoaded || saneLoaded) { + return } - window.setTimeout( - window.clearInterval(this.customEmojiInterval), - 1000 + + this.customEmojiBuffer.push( + ...this.filteredEmoji.slice( + this.customEmojiCounter, + this.customEmojiCounter + LOAD_EMOJI_BY + ) ) + this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) + this.customEmojiCounter += LOAD_EMOJI_BY + }, + startEmojiLoad () { + if (this.customEmojiTimeout) { + window.clearTimeout(this.customEmojiTimeout) + } + set(this, 'customEmojiBuffer', []) this.customEmojiCounter = 0 - this.customEmojiInterval = window.setInterval(() => { - console.log(this.customEmojiBuffer.length) - console.log(customEmojis.length) - if (this.customEmojiBuffer.length < customEmojis.length) { - this.customEmojiBuffer.push( - ...customEmojis.slice(this.customEmojiCounter, this.customEmojiCounter + amount) - ) - } else { - window.clearInterval(this.customEmojiInterval) - } - this.customEmojiCounter += amount - }, interval) + this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) + }, + continueEmojiLoad () { + this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) }, toggleStickers () { this.showingStickers = !this.showingStickers @@ -107,7 +119,7 @@ const EmojiPicker = { watch: { keyword () { this.scrolledGroup() - this.restartInterval() + this.startEmojiLoad() } }, computed: { @@ -120,6 +132,20 @@ const EmojiPicker = { } return 0 }, + saneAmount () { + // for UI + return LOAD_EMOJI_SANE_AMOUNT + }, + filteredEmoji () { + return filterByKeyword( + this.$store.state.instance.customEmoji || [], + this.keyword + ) + }, + askForSanity () { + return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && + !this.customEmojiLoadAllConfirmed + }, 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 b0ed00e9..6608f393 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -6,14 +6,20 @@ position: absolute; right: 0; left: 0; - height: 320px; margin: 0 !important; z-index: 1; - .keep-open { + .keep-open, + .too-many-emoji { padding: 7px; line-height: normal; } + + .too-many-emoji { + display: flex; + flex-direction: column; + } + .keep-open-label { padding: 0 7px; display: flex; @@ -28,7 +34,7 @@ .content { display: flex; flex-direction: column; - flex: 1 1 0; + flex: 1 1 auto; min-height: 0px; } @@ -36,12 +42,16 @@ flex-grow: 1; } + .emoji-groups { + min-height: 200px; + } + .additional-tabs { border-left: 1px solid; border-left-color: $fallback--icon; border-left-color: var(--icon, $fallback--icon); padding-left: 7px; - flex: 0 0 0; + flex: 0 0 auto; } .additional-tabs, @@ -72,7 +82,7 @@ } .sticker-picker { - flex: 1 1 0 + flex: 1 1 auto } .stickers, @@ -80,7 +90,7 @@ &-content { display: flex; flex-direction: column; - flex: 1 1 0; + flex: 1 1 auto; min-height: 0; &.hidden { @@ -94,7 +104,7 @@ .emoji { &-search { padding: 5px; - flex: 0 0 0; + flex: 0 0 auto; input { width: 100%; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 42f20130..d9daac3e 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -92,6 +92,17 @@ +
+
+ {{ $t('emoji.load_all_hint', { saneAmount } ) }} +
+ +
+ +

{{ $t('settings.style.advanced_colors.badge') }}

diff --git a/src/i18n/en.json b/src/i18n/en.json index 32c25e3e..c6c98c48 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -114,7 +114,9 @@ "search_emoji": "Search for an emoji", "add_emoji": "Insert emoji", "custom": "Custom emoji", - "unicode": "Unicode emoji" + "unicode": "Unicode emoji", + "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.", + "load_all": "Loading all {emojiAmount} emoji" }, "interactions": { "favs_repeats": "Repeats and Favorites", @@ -387,6 +389,7 @@ "_tab_label": "Advanced", "alert": "Alert background", "alert_error": "Error", + "alert_warning": "Warning", "badge": "Badge background", "badge_notification": "Notification", "panel_header": "Panel header", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 1cf7edc3..eaa495c4 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -215,6 +215,10 @@ const generateColors = (input) => { colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text) colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText) + colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange) + colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text) + colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText) + colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed) colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb @@ -222,6 +226,7 @@ const generateColors = (input) => { if (typeof v === 'undefined') return if (k === 'alert') { colors.alertError.a = v + colors.alertWarning.a = v return } if (k === 'faint') { -- cgit v1.2.3-70-g09d2 From bed109ae46a7ae6db7264b9cfb1d3ed88372e270 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 8 Oct 2019 20:54:30 +0300 Subject: start loading emoji when picker is open --- src/components/emoji_input/emoji_input.js | 2 ++ src/components/emoji_picker/emoji_picker.js | 3 --- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index a586b819..920fd4bd 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -165,6 +165,7 @@ const EmojiInput = { methods: { triggerShowPicker () { this.showPicker = true + this.$refs.picker.startEmojiLoad() this.$nextTick(() => { this.scrollIntoView() }) @@ -181,6 +182,7 @@ const EmojiInput = { this.showPicker = !this.showPicker if (this.showPicker) { this.scrollIntoView() + this.$refs.picker.startEmojiLoad() } }, replace (replacement) { diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 11dbdf44..29e07299 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -33,9 +33,6 @@ const EmojiPicker = { components: { StickerPicker: () => import('../sticker_picker/sticker_picker.vue') }, - mounted () { - this.startEmojiLoad() - }, methods: { onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement -- cgit v1.2.3-70-g09d2 From b02de56fcbe8433597a738a797cfe5fb9f57eb3d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 9 Oct 2019 22:33:15 +0300 Subject: always preload first batch of emoji to avoid unnecessary UI jumps --- src/components/emoji_picker/emoji_picker.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 29e07299..67b08ef8 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -24,9 +24,10 @@ const EmojiPicker = { showingStickers: false, groupsScrolledClass: 'scrolled-top', keepOpen: false, - customEmojiBuffer: [], + customEmojiBuffer: (this.$store.state.instance.customEmoji || []) + .slice(0, LOAD_EMOJI_BY), customEmojiTimeout: null, - customEmojiCounter: 0, + customEmojiCounter: LOAD_EMOJI_BY, customEmojiLoadAllConfirmed: false } }, @@ -88,13 +89,23 @@ const EmojiPicker = { this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) this.customEmojiCounter += LOAD_EMOJI_BY }, - startEmojiLoad () { + startEmojiLoad (forceUpdate = false) { + const bufferSize = this.customEmojiBuffer.length + const bufferPrefilledSane = bufferSize === LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed + const bufferPrefilledAll = bufferSize === this.filteredEmoji.length + if (!forceUpdate || bufferPrefilledSane || bufferPrefilledAll) { + return + } if (this.customEmojiTimeout) { window.clearTimeout(this.customEmojiTimeout) } - set(this, 'customEmojiBuffer', []) - this.customEmojiCounter = 0 + set( + this, + 'customEmojiBuffer', + this.filteredEmoji.slice(0, LOAD_EMOJI_BY) + ) + this.customEmojiCounter = LOAD_EMOJI_BY this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) }, continueEmojiLoad () { @@ -115,8 +126,9 @@ const EmojiPicker = { }, watch: { keyword () { + this.customEmojiLoadAllConfirmed = false this.scrolledGroup() - this.startEmojiLoad() + this.startEmojiLoad(true) } }, computed: { -- cgit v1.2.3-70-g09d2 From 1400d723f25ded6614a6f27cb35b3b25edc2b1ec Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 10 Oct 2019 19:58:00 +0300 Subject: fix picker not filling on opening, removed console log --- src/components/emoji_input/emoji_input.js | 1 - src/components/emoji_picker/emoji_picker.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index c02a9327..2c73faa7 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -312,7 +312,6 @@ const EmojiInput = { this.$nextTick(() => { const { offsetHeight } = this.input.elm const { picker } = this.$refs - console.log(picker) const pickerBottom = picker.$el.getBoundingClientRect().bottom if (pickerBottom > window.innerHeight) { picker.$el.style.top = 'auto' diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 67b08ef8..0d5ffc9b 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -93,7 +93,7 @@ const EmojiPicker = { const bufferSize = this.customEmojiBuffer.length const bufferPrefilledSane = bufferSize === LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed const bufferPrefilledAll = bufferSize === this.filteredEmoji.length - if (!forceUpdate || bufferPrefilledSane || bufferPrefilledAll) { + if (forceUpdate || bufferPrefilledSane || bufferPrefilledAll) { return } if (this.customEmojiTimeout) { -- cgit v1.2.3-70-g09d2 From a38d16273d19e6d6ee4b8066039bc3658f8db9b5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Nov 2019 20:12:01 +0200 Subject: fix search not working, use computer property instead of state --- src/components/emoji_picker/emoji_picker.js | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 76d1f26b..a31adb63 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -24,10 +24,8 @@ const EmojiPicker = { showingStickers: false, groupsScrolledClass: 'scrolled-top', keepOpen: false, - customEmojiBuffer: (this.$store.state.instance.customEmoji || []) - .slice(0, LOAD_EMOJI_BY), + customEmojiBufferSlice: LOAD_EMOJI_BY, customEmojiTimeout: null, - customEmojiCounter: LOAD_EMOJI_BY, customEmojiLoadAllConfirmed: false } }, @@ -81,32 +79,21 @@ const EmojiPicker = { return } - this.customEmojiBuffer.push( - ...this.filteredEmoji.slice( - this.customEmojiCounter, - this.customEmojiCounter + LOAD_EMOJI_BY - ) - ) + this.customEmojiBufferSlice += LOAD_EMOJI_BY this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) - this.customEmojiCounter += LOAD_EMOJI_BY }, startEmojiLoad (forceUpdate = false) { const bufferSize = this.customEmojiBuffer.length const bufferPrefilledSane = bufferSize === LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed const bufferPrefilledAll = bufferSize === this.filteredEmoji.length - if (forceUpdate || bufferPrefilledSane || bufferPrefilledAll) { + if ((bufferPrefilledSane || bufferPrefilledAll) && !forceUpdate) { return } if (this.customEmojiTimeout) { window.clearTimeout(this.customEmojiTimeout) } - set( - this, - 'customEmojiBuffer', - this.filteredEmoji.slice(0, LOAD_EMOJI_BY) - ) - this.customEmojiCounter = LOAD_EMOJI_BY + this.customEmojiBufferSlice = LOAD_EMOJI_BY this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) }, continueEmojiLoad () { @@ -152,6 +139,9 @@ const EmojiPicker = { this.keyword ) }, + customEmojiBuffer () { + return this.filteredEmoji.slice(0, this.customEmojiBufferSlice) + }, askForSanity () { return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed -- cgit v1.2.3-70-g09d2 From 9338c81f4a68d217a70ffeefc4faab130d965df5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Nov 2019 21:25:13 +0200 Subject: replace sanity button with loading on scroll --- src/components/emoji_picker/emoji_picker.js | 81 ++++++++++++++-------------- src/components/emoji_picker/emoji_picker.vue | 17 +----- 2 files changed, 44 insertions(+), 54 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index a31adb63..92abf7a2 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,9 +1,12 @@ import { set } from 'vue' import Checkbox from '../checkbox/checkbox.vue' -const LOAD_EMOJI_BY = 50 -const LOAD_EMOJI_INTERVAL = 100 -const LOAD_EMOJI_SANE_AMOUNT = 500 +// At widest, approximately 20 emoji are visible in a row, +// loading 3 rows, could be overkill for narrow picker +const LOAD_EMOJI_BY = 60 + +// When to start loading new batch emoji, in pixels +const LOAD_EMOJI_MARGIN = 64 const filterByKeyword = (list, keyword = '') => { return list.filter(x => x.displayText.includes(keyword)) @@ -34,10 +37,22 @@ const EmojiPicker = { Checkbox }, methods: { + onStickerUploaded (e) { + this.$emit('sticker-uploaded', e) + }, + onStickerUploadFailed (e) { + this.$emit('sticker-upload-failed', e) + }, onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen }) }, + onScroll (e) { + const target = (e && e.target) || this.$refs['emoji-groups'] + this.updateScrolledClass(target) + this.scrolledGroup(target) + this.triggerLoadMore(target) + }, highlight (key) { const ref = this.$refs['group-' + key] const top = ref[0].offsetTop @@ -47,9 +62,7 @@ const EmojiPicker = { this.$refs['emoji-groups'].scrollTop = top + 1 }) }, - scrolledGroup (e) { - const target = (e && e.target) || this.$refs['emoji-groups'] - const top = target.scrollTop + 5 + updateScrolledClass (target) { if (target.scrollTop <= 5) { this.groupsScrolledClass = 'scrolled-top' } else if (target.scrollTop >= target.scrollTopMax - 5) { @@ -57,6 +70,26 @@ const EmojiPicker = { } else { this.groupsScrolledClass = 'scrolled-middle' } + }, + triggerLoadMore (target) { + const ref = this.$refs['group-end-custom'][0] + const bottom = ref.offsetTop + ref.offsetHeight + + const scrollerBottom = target.scrollTop + target.clientHeight + const scrollerTop = target.scrollTop + + // Loads more emoji when they come into view + const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN + // Always load when at the very top in case there's no scroll space yet + const atTop = scrollerTop < 5 + // Don't load when looking at unicode category + const bottomAboveViewport = bottom < scrollerTop + if (!bottomAboveViewport && (approachingBottom || atTop)) { + this.loadEmoji() + } + }, + scrolledGroup (target) { + const top = target.scrollTop + 5 this.$nextTick(() => { this.emojisView.forEach(group => { const ref = this.$refs['group-' + group.id] @@ -66,56 +99,34 @@ const EmojiPicker = { }) }) }, - loadEmojiInsane () { - this.customEmojiLoadAllConfirmed = true - this.continueEmojiLoad() - }, loadEmoji () { const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length - const saneLoaded = this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && - !this.customEmojiLoadAllConfirmed - if (allLoaded || saneLoaded) { + if (allLoaded) { return } this.customEmojiBufferSlice += LOAD_EMOJI_BY - this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) }, startEmojiLoad (forceUpdate = false) { const bufferSize = this.customEmojiBuffer.length - const bufferPrefilledSane = bufferSize === LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed const bufferPrefilledAll = bufferSize === this.filteredEmoji.length - if ((bufferPrefilledSane || bufferPrefilledAll) && !forceUpdate) { + if (bufferPrefilledAll && !forceUpdate) { return } - if (this.customEmojiTimeout) { - window.clearTimeout(this.customEmojiTimeout) - } - this.customEmojiBufferSlice = LOAD_EMOJI_BY - this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) - }, - continueEmojiLoad () { - this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) }, toggleStickers () { this.showingStickers = !this.showingStickers }, setShowStickers (value) { this.showingStickers = value - }, - onStickerUploaded (e) { - this.$emit('sticker-uploaded', e) - }, - onStickerUploadFailed (e) { - this.$emit('sticker-upload-failed', e) } }, watch: { keyword () { this.customEmojiLoadAllConfirmed = false - this.scrolledGroup() + this.onScroll() this.startEmojiLoad(true) } }, @@ -129,10 +140,6 @@ const EmojiPicker = { } return 0 }, - saneAmount () { - // for UI - return LOAD_EMOJI_SANE_AMOUNT - }, filteredEmoji () { return filterByKeyword( this.$store.state.instance.customEmoji || [], @@ -142,10 +149,6 @@ const EmojiPicker = { customEmojiBuffer () { return this.filteredEmoji.slice(0, this.customEmojiBufferSlice) }, - askForSanity () { - return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && - !this.customEmojiLoadAllConfirmed - }, emojis () { const standardEmojis = this.$store.state.instance.emoji || [] const customEmojis = this.customEmojiBuffer diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 43da6aa2..9998131d 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -47,7 +47,7 @@ ref="emoji-groups" class="emoji-groups" :class="groupsScrolledClass" - @scroll="scrolledGroup" + @scroll="onScroll" >
+
@@ -80,20 +81,6 @@ {{ $t('emoji.keep_open') }}
-
-
- {{ $t('emoji.load_all_hint', { saneAmount } ) }} -
- -
Date: Fri, 8 Nov 2019 21:28:51 +0200 Subject: fix not being able to see unicode emojis when there few of them when searching on emoji-a-ton instances --- src/components/emoji_picker/emoji_picker.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 92abf7a2..782c4dfc 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -77,13 +77,14 @@ const EmojiPicker = { const scrollerBottom = target.scrollTop + target.clientHeight const scrollerTop = target.scrollTop + const scrollerMax = target.scrollHeight // Loads more emoji when they come into view const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN // Always load when at the very top in case there's no scroll space yet const atTop = scrollerTop < 5 - // Don't load when looking at unicode category - const bottomAboveViewport = bottom < scrollerTop + // Don't load when looking at unicode category or at the very bottom + const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax if (!bottomAboveViewport && (approachingBottom || atTop)) { this.loadEmoji() } @@ -126,6 +127,7 @@ const EmojiPicker = { watch: { keyword () { this.customEmojiLoadAllConfirmed = false + this.$refs['emoji-groups'].scrollTop = 0 this.onScroll() this.startEmojiLoad(true) } -- cgit v1.2.3-70-g09d2 From a69946923b3931a8308e44a7d1ad254e6b95855b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Nov 2019 21:35:58 +0200 Subject: eslint fix --- src/components/checkbox/checkbox.vue | 2 +- src/components/emoji_picker/emoji_picker.js | 1 - src/components/emoji_picker/emoji_picker.vue | 2 +- src/components/post_status_form/post_status_form.vue | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 5917598a..1113f81d 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -12,8 +12,8 @@ > diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 782c4dfc..d46dbaa5 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,4 +1,3 @@ -import { set } from 'vue' import Checkbox from '../checkbox/checkbox.vue' // At widest, approximately 20 emoji are visible in a row, diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 9998131d..191b9fa1 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -73,7 +73,7 @@ :src="emoji.imageUrl" > - +
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 13e8b0aa..0094b1aa 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -163,7 +163,7 @@
+ >
Date: Fri, 8 Nov 2019 21:44:36 +0200 Subject: reset position when reopening emoji picker --- src/components/emoji_picker/emoji_picker.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index d46dbaa5..432816be 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -109,6 +109,9 @@ const EmojiPicker = { this.customEmojiBufferSlice += LOAD_EMOJI_BY }, startEmojiLoad (forceUpdate = false) { + this.$nextTick(() => { + this.$refs['emoji-groups'].scrollTop = 0 + }) const bufferSize = this.customEmojiBuffer.length const bufferPrefilledAll = bufferSize === this.filteredEmoji.length if (bufferPrefilledAll && !forceUpdate) { @@ -126,7 +129,6 @@ const EmojiPicker = { watch: { keyword () { this.customEmojiLoadAllConfirmed = false - this.$refs['emoji-groups'].scrollTop = 0 this.onScroll() this.startEmojiLoad(true) } -- cgit v1.2.3-70-g09d2 From a3501d58d8703379d5f60e1bb53dfb0dbb1022b2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Nov 2019 23:57:20 +0200 Subject: clear filter on reopen, fix error message in console --- src/components/emoji_picker/emoji_picker.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 432816be..0f397b59 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -72,6 +72,7 @@ const EmojiPicker = { }, triggerLoadMore (target) { const ref = this.$refs['group-end-custom'][0] + if (!ref) return const bottom = ref.offsetTop + ref.offsetHeight const scrollerBottom = target.scrollTop + target.clientHeight @@ -109,6 +110,9 @@ const EmojiPicker = { this.customEmojiBufferSlice += LOAD_EMOJI_BY }, startEmojiLoad (forceUpdate = false) { + if (!forceUpdate) { + this.keyword = '' + } this.$nextTick(() => { this.$refs['emoji-groups'].scrollTop = 0 }) -- cgit v1.2.3-70-g09d2