diff options
| author | Tusooa Zhu <tusooa@kazv.moe> | 2022-01-08 02:17:59 -0500 |
|---|---|---|
| committer | Tusooa Zhu <tusooa@kazv.moe> | 2022-09-18 13:19:53 -0400 |
| commit | 38861fc6cc1e30c6ef3c429db222a303ed1c321d (patch) | |
| tree | e15643c008ecc2f64aa5f223be13d3e7ab1031b6 /src/components/emoji_picker | |
| parent | d9e428ebab3ea575e622fadd47150c39684648aa (diff) | |
Scroll active tab header into view in emoji picker
Diffstat (limited to 'src/components/emoji_picker')
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.js | 18 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.vue | 6 |
2 files changed, 23 insertions, 1 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 315364d5..26c767ac 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -87,8 +87,26 @@ const EmojiPicker = { this.activeGroup = group.id } }) + this.scrollHeader() }) }, + scrollHeader () { + // Scroll the active tab's header into view + const headerRef = this.$refs['group-header-' + this.activeGroup][0] + const left = headerRef.offsetLeft + const right = left + headerRef.offsetWidth + const headerCont = this.$refs.header + const currentScroll = headerCont.scrollLeft + const currentScrollRight = currentScroll + headerCont.clientWidth + const setScroll = s => { headerCont.scrollLeft = s } + + const margin = 7 // .emoji-tabs-item: padding + if (left - margin < currentScroll) { + setScroll(left - margin) + } else if (right + margin > currentScrollRight) { + setScroll(right + margin - headerCont.clientWidth) + } + }, highlight (key) { const ref = this.$refs['group-' + key] const top = ref.offsetTop diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 19cc46b5..e8d42c24 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -3,9 +3,13 @@ class="emoji-picker panel panel-default panel-body" > <div class="heading"> - <span class="emoji-tabs"> + <span + ref="header" + class="emoji-tabs" + > <span v-for="group in filteredEmojiGroups" + :ref="'group-header-' + group.id" :key="group.id" class="emoji-tabs-item" :class="{ |