hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Scroll active tab header into view in emoji picker

Browse source
This commit is contained in:
Tusooa Zhu 2022-01-08 02:17:59 -05:00
commit 38861fc6cc
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
2 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/emoji_picker/emoji_picker.js
View file

@ -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