Scroll active tab header into view in emoji picker

This commit is contained in:
Tusooa Zhu 2022-01-08 02:17:59 -05:00
parent d9e428ebab
commit 38861fc6cc
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 23 additions and 1 deletions

View File

@ -87,8 +87,26 @@ const EmojiPicker = {
this.activeGroup = group.id 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) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]
const top = ref.offsetTop const top = ref.offsetTop

View File

@ -3,9 +3,13 @@
class="emoji-picker panel panel-default panel-body" class="emoji-picker panel panel-default panel-body"
> >
<div class="heading"> <div class="heading">
<span class="emoji-tabs"> <span
ref="header"
class="emoji-tabs"
>
<span <span
v-for="group in filteredEmojiGroups" v-for="group in filteredEmojiGroups"
:ref="'group-header-' + group.id"
:key="group.id" :key="group.id"
class="emoji-tabs-item" class="emoji-tabs-item"
:class="{ :class="{