Merge branch 'appearance-tab' into 'develop'

Themes 3: Intermission: Appearance Tab and fixes

See merge request pleroma/pleroma-fe!1920

1 files changed, 29 insertions, 6 deletions

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index eb665c40..d71bc1bb 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -120,6 +120,7 @@ const EmojiPicker = {
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
+      emojiSize: 0,
       width: 0
     }
   },
@@ -130,6 +131,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 = Number(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()
@@ -224,6 +242,7 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.updateEmojiSize()
       this.recalculateItemPerRow()
       this.$nextTick(() => {
         this.$refs.search.focus()
@@ -266,16 +285,20 @@ const EmojiPicker = {
   },
   computed: {
     minItemSize () {
-      return this.emojiHeight
+      return this.emojiSize
     },
-    emojiHeight () {
-      return 32 + 4
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
     },
-    emojiWidth () {
-      return 32 + 4
+    emojiHeight () {
+      return this.emojiSize
     },
     itemPerRow () {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+      return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup