make emoji picker more scalable

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

src/components/emoji_picker/emoji_picker.scss

@@ -1,8 +1,3 @@
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
 .emoji-picker {
   width: 25em;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
@@ -13,10 +8,10 @@ $emoji-picker-emoji-size: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: $emoji-picker-header-picture-width;
-    max-width: $emoji-picker-header-picture-width;
-    height: $emoji-picker-header-picture-height;
-    max-height: $emoji-picker-header-picture-height;
+    width: var(--emoji-size);
+    max-width: var(--emoji-size);
+    height: var(--emoji-size);
+    max-height: var(--emoji-size);
 
     .still-image {
       max-width: 100%;
@@ -30,7 +25,7 @@ $emoji-picker-emoji-size: 32px;
   .keep-open,
   .too-many-emoji,
   .hide-custom-emoji {
-    padding: 7px;
+    padding: 0.5em;
     line-height: normal;
   }
 
@@ -44,13 +39,13 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding: 0 0.5em;
     display: flex;
   }
 
   .heading {
     display: flex;
-    padding: 10px 7px 5px;
+    padding: 10px 0.5em 0.3em;
   }
 
   .content {
@@ -71,7 +66,7 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     border-left: 1px solid;
     border-left-color: var(--border);
-    padding-left: 7px;
+    padding-left: 0.5em;
     flex: 0 0 auto;
   }
 
@@ -82,13 +77,13 @@ $emoji-picker-emoji-size: 32px;
     align-content: center;
 
     &-item {
-      padding: 0 7px;
+      padding: 0 0.5em;
       cursor: pointer;
       font-size: 1.85em;
-      width: $emoji-picker-header-picture-width;
-      max-width: $emoji-picker-header-picture-width;
-      height: $emoji-picker-header-picture-height;
-      max-height: $emoji-picker-header-picture-height;
+      width: var(--emoji-size);
+      max-width: var(--emoji-size);
+      height: var(--emoji-size);
+      max-height: var(--emoji-size);
       display: flex;
       align-items: center;
 
@@ -98,7 +93,7 @@ $emoji-picker-emoji-size: 32px;
       }
 
       &.toggled {
-        border-bottom: 4px solid;
+        border-bottom: 0.2em solid;
       }
     }
   }
@@ -125,7 +120,7 @@ $emoji-picker-emoji-size: 32px;
 
   .emoji {
     &-search {
-      padding: 5px;
+      padding: 0.3em;
       flex: 0 0 auto;
 
       input {
@@ -139,6 +134,7 @@ $emoji-picker-emoji-size: 32px;
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      scrollbar-gutter: stable both-edges;
       user-select: none;
       mask:
         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
@@ -165,13 +161,13 @@ $emoji-picker-emoji-size: 32px;
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      padding-left: 5px;
       justify-content: left;
 
       &-title {
         font-size: 0.85em;
         width: 100%;
         margin: 0;
+        padding-left: 0.3em;
 
         &.disabled {
           display: none;
@@ -180,14 +176,14 @@ $emoji-picker-emoji-size: 32px;
     }
 
     &-item {
-      width: $emoji-picker-emoji-size;
-      height: $emoji-picker-emoji-size;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       box-sizing: border-box;
       display: flex;
-      line-height: $emoji-picker-emoji-size;
+      line-height: var(--emoji-size);
       align-items: center;
       justify-content: center;
-      margin: 4px;
+      margin: 0.2em;
       cursor: pointer;
 
       .emoji-picker-emoji.-custom {
@@ -197,7 +193,7 @@ $emoji-picker-emoji-size: 32px;
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: 24px;
+        font-size: 20.2em;
         overflow: hidden;
       }
     }