added emoji zoom for picker

src/components/emoji_picker/emoji_picker.js

@@ -17,6 +17,7 @@ const EmojiPicker = {
       keyword: '',
       activeGroup: 'custom',
       showingStickers: false,
+      zoomEmoji: false,
       spamMode: false
     }
   },
@@ -60,6 +61,13 @@ const EmojiPicker = {
     },
     onStickerUploadFailed (e) {
       this.$emit('sticker-upload-failed', e)
+    },
+    setZoomEmoji (e, emoji) {
+      this.zoomEmoji = emoji
+      const { x, y } = e.target.getBoundingClientRect()
+      console.log(e.target)
+      this.$refs['zoom-portal'].style.left = (x - 32) + 'px'
+      this.$refs['zoom-portal'].style.top = (y - 32) + 'px'
     }
   },
   watch: {

src/components/emoji_picker/emoji_picker.scss

@@ -10,6 +10,20 @@
   margin: 0 !important;
   z-index: 1;
 
+  .zoom-portal {
+    position: fixed;
+    pointer-events: none;
+    width: 96px;
+    height: 96px;
+    font-size: 96px;
+    line-height: 96px;
+    z-index: 10;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   .spam-mode {
     padding: 7px;
     line-height: normal;
@@ -135,6 +149,10 @@
 
       cursor: pointer;
 
+      &:hover {
+        opacity: 0
+      }
+
       img {
         max-width: 100%;
         max-height: 100%;

src/components/emoji_picker/emoji_picker.vue

@@ -65,12 +65,16 @@
               :title="emoji.displayText"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
-            >
+              @mouseenter="setZoomEmoji($event, emoji)"
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              @mouseleave="setZoomEmoji($event, false)"
+              >
+              <span v-if="!emoji.imageUrl">
+                {{ emoji.replacement }}
+              </span>
               <img
                 v-else
                 :src="emoji.imageUrl"
-              >
+                >
             </span>
           </div>
         </div>
@@ -95,6 +99,18 @@
         />
       </div>
     </div>
+    <div ref="zoom-portal" class="zoom-portal">
+      <span v-if="zoomEmoji">
+        <span v-if="!zoomEmoji.imageUrl">
+          {{ zoomEmoji.replacement }}
+        </span>
+        <img
+          v-else
+          :key="zoomEmoji.imageUrl"
+          :src="zoomEmoji.imageUrl"
+          >
+      </span>
+    </div>
   </div>
 </template>