diff --git a/src/client/app/common/views/components/emoji-picker.vue b/src/client/app/common/views/components/emoji-picker.vue index f9164ad524..47d325fbab 100644 --- a/src/client/app/common/views/components/emoji-picker.vue +++ b/src/client/app/common/views/components/emoji-picker.vue @@ -3,32 +3,31 @@
-
-
-
{{ category.text }}
-
- -
-
- -
-
+
+
{{ categories.find(x => x.isActive).text }}
+
+ +
+
+ +
@@ -48,55 +47,46 @@ export default Vue.extend({ lib, customEmojis: [], categories: [{ - ref: 'customEmojiSection', text: this.$t('custom-emoji'), icon: faAsterisk, isActive: true }, { name: 'people', - ref: 'peopleSection', text: this.$t('people'), icon: ['far', 'laugh'], isActive: false }, { name: 'animals_and_nature', - ref: 'animalsAndNatureSection', text: this.$t('animals-and-nature'), icon: faLeaf, isActive: false }, { name: 'food_and_drink', - ref: 'foodAndDrinkSection', text: this.$t('food-and-drink'), icon: faUtensils, isActive: false }, { name: 'activity', - ref: 'activitySection', text: this.$t('activity'), icon: faFutbol, isActive: false }, { name: 'travel_and_places', - ref: 'travelAndPlacesSection', text: this.$t('travel-and-places'), icon: faCity, isActive: false }, { name: 'objects', - ref: 'objectsSection', text: this.$t('objects'), icon: faDice, isActive: false }, { name: 'symbols', - ref: 'symbolsSection', text: this.$t('symbols'), icon: faHeart, isActive: false }, { name: 'flags', - ref: 'flagsSection', text: this.$t('flags'), icon: faFlag, isActive: false @@ -109,15 +99,9 @@ export default Vue.extend({ }, methods: { - go(ref) { - this.$refs.emojis.scrollTop = this.$refs[ref][0].offsetTop; - }, - - onScroll(e) { - for (const x of this.categories) { - const top = e.target.scrollTop; - const el = this.$refs[x.ref][0]; - x.isActive = el.offsetTop <= top && el.offsetTop + el.offsetHeight > top; + go(category) { + for (const c of this.categories) { + c.isActive = c.name === category.name; } }, @@ -156,47 +140,46 @@ export default Vue.extend({ overflow-y auto overflow-x hidden - > section - > header - position sticky - top 0 - left 0 - z-index 1 - padding 8px - background var(--faceHeader) - color var(--text) - font-size 12px + > header + position sticky + top 0 + left 0 + z-index 1 + padding 8px + background var(--faceHeader) + color var(--text) + font-size 12px - > div - display grid - grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr - gap 4px - padding 8px + > div + display grid + grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr + gap 4px + padding 8px - > button - padding 0 - width 100% + > button + padding 0 + width 100% - &:before - content '' - display block - width 1px - height 0 - padding-bottom 100% - - &:hover - > * - transform scale(1.2) - transition transform 0s + &:before + content '' + display block + width 1px + height 0 + padding-bottom 100% + &:hover > * - position absolute - top 0 - left 0 - width 100% - height 100% - font-size 28px - transition transform 0.2s ease - pointer-events none + transform scale(1.2) + transition transform 0s + + > * + position absolute + top 0 + left 0 + width 100% + height 100% + font-size 28px + transition transform 0.2s ease + pointer-events none