From 89814484485d13f3de4a8cea0e17390528b99767 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 25 Jun 2024 23:30:08 +0300
Subject: make emoji picker more scalable

---
 src/components/emoji_picker/emoji_picker.js | 38 ++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index eb665c40..862f6aa4 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,6 +106,9 @@ const EmojiPicker = {
     }
   },
   inject: ['popoversZLayer'],
+  mounted () {
+    this.updateEmojiSize()
+  },
   data () {
     return {
       keyword: '',
@@ -120,6 +123,7 @@ const EmojiPicker = {
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
+      emojiSize: 0,
       width: 0
     }
   },
@@ -130,6 +134,23 @@ const EmojiPicker = {
     Popover
   },
   methods: {
+    updateEmojiSize () {
+      const css = window.getComputedStyle(this.$refs.popover.$el)
+      const emojiSize = css.getPropertyValue('--emojiSize')
+      const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+      let emojiSizeReal
+      if (emojiSizeUnit.endsWith('em')) {
+        emojiSizeReal = emojiSizeValue * fontSize
+      } else {
+        emojiSizeReal = emojiSizeValue
+      }
+
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+      this.emojiSize = fullEmojiSize
+    },
     showPicker () {
       this.$refs.popover.showPopover()
       this.onShowing()
@@ -268,14 +289,25 @@ const EmojiPicker = {
     minItemSize () {
       return this.emojiHeight
     },
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
+    },
     emojiHeight () {
-      return 32 + 4
+      return this.emojiSize
     },
     emojiWidth () {
-      return 32 + 4
+      return this.emojiSize
     },
     itemPerRow () {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+      console.log(
+        this.emojiWidth,
+        this.width
+      )
+      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
-- 
cgit v1.2.3-70-g09d2


From c27bbfd21cbdc222e442c3f020d2f5592e42e5f9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 02:15:32 +0300
Subject: some improvements from testing prod

---
 src/components/emoji_picker/emoji_picker.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 862f6aa4..f86c4330 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,9 +106,6 @@ const EmojiPicker = {
     }
   },
   inject: ['popoversZLayer'],
-  mounted () {
-    this.updateEmojiSize()
-  },
   data () {
     return {
       keyword: '',
@@ -138,7 +135,7 @@ const EmojiPicker = {
       const css = window.getComputedStyle(this.$refs.popover.$el)
       const emojiSize = css.getPropertyValue('--emojiSize')
       const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
-      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+      const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
       const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
 
       let emojiSizeReal
@@ -245,6 +242,7 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.updateEmojiSize()
       this.recalculateItemPerRow()
       this.$nextTick(() => {
         this.$refs.search.focus()
@@ -287,7 +285,7 @@ const EmojiPicker = {
   },
   computed: {
     minItemSize () {
-      return this.emojiHeight
+      return this.emojiSize
     },
     // used to watch it
     fontSize () {
@@ -299,15 +297,12 @@ const EmojiPicker = {
     emojiHeight () {
       return this.emojiSize
     },
-    emojiWidth () {
-      return this.emojiSize
-    },
     itemPerRow () {
       console.log(
-        this.emojiWidth,
+        this.emojiSize,
         this.width
       )
-      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
+      return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
-- 
cgit v1.2.3-70-g09d2


From 169f71c006af4e409a72d84c115106e65ded01dd Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 22 Jul 2024 19:53:06 +0000
Subject: Apply 1 suggestion(s) to 1 file(s)

---
 src/components/emoji_picker/emoji_picker.js | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index f86c4330..d71bc1bb 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -298,10 +298,6 @@ const EmojiPicker = {
       return this.emojiSize
     },
     itemPerRow () {
-      console.log(
-        this.emojiSize,
-        this.width
-      )
       return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {
-- 
cgit v1.2.3-70-g09d2