From 83f45167b61d5f10f00ea8e3e3e946c72e5fc33f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Sep 2019 16:56:54 +0300
Subject: added emoji zoom for picker

---
 src/components/emoji_picker/emoji_picker.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

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

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 901520aa..5a8961d2 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -65,12 +65,16 @@
               :title="emoji.displayText"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
-            >
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              @mouseenter="setZoomEmoji($event, emoji)"
+              @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>
 
-- 
cgit v1.2.3-70-g09d2