From 2c8c900e09245f8282a748cee7d28191e8dff422 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 02:17:59 -0500
Subject: [PATCH] Scroll active tab header into view in emoji picker
---
src/components/emoji_picker/emoji_picker.js | 18 ++++++++++++++++++
src/components/emoji_picker/emoji_picker.vue | 6 +++++-
2 files changed, 23 insertions(+), 1 deletion(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index c0e90434..612e0c19 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -86,8 +86,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 b2dae51e..b202df91 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="{