From 0d8b68632b02565e5ba7a833e91e41daabb4a1dc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2019 19:15:22 +0300
Subject: [PATCH] Remove emoji zoom

---
 src/components/emoji_picker/emoji_picker.js   |  7 -------
 src/components/emoji_picker/emoji_picker.scss | 19 ------------------
 src/components/emoji_picker/emoji_picker.vue  | 20 ++-----------------
 src/components/status/status.vue              | 19 ------------------
 .../entity_normalizer.service.js              |  2 +-
 .../entity_normalizer.spec.js                 |  4 ++--
 6 files changed, 5 insertions(+), 66 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d9d41bf6..bce5026e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -17,7 +17,6 @@ const EmojiPicker = {
       keyword: '',
       activeGroup: 'custom',
       showingStickers: false,
-      zoomEmoji: false,
       spamMode: false
     }
   },
@@ -61,12 +60,6 @@ const EmojiPicker = {
     },
     onStickerUploadFailed (e) {
       this.$emit('sticker-upload-failed', e)
-    },
-    setZoomEmoji (e, emoji) {
-      this.zoomEmoji = emoji
-      const { x, y } = e.target.getBoundingClientRect()
-      this.$refs['zoom-portal'].style.left = (x - 32) + 'px'
-      this.$refs['zoom-portal'].style.top = (y - 32) + 'px'
     }
   },
   watch: {
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 7e76aa52..472db35b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,21 +10,6 @@
   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 {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
   .spam-mode {
     padding: 7px;
     line-height: normal;
@@ -150,10 +135,6 @@
 
       cursor: pointer;
 
-      &:hover {
-        opacity: 0
-      }
-
       img {
         object-fit: contain;
         max-width: 100%;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 1c91c8b7..901520aa 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -65,16 +65,12 @@
               :title="emoji.displayText"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
-              @mouseenter="setZoomEmoji($event, emoji)"
-              @mouseleave="setZoomEmoji($event, false)"
             >
-              <span v-if="!emoji.imageUrl">
-                {{ emoji.replacement }}
-              </span>
+              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
               <img
                 v-else
                 :src="emoji.imageUrl"
-                >
+              >
             </span>
           </div>
         </div>
@@ -99,18 +95,6 @@
         />
       </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>
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a0756ae4..771615f3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -696,22 +696,6 @@ $status-margin: 0.75em;
     line-height: 1.4em;
     white-space: pre-wrap;
 
-    .emoji-container {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      z-index: 1;
-
-      &:hover {
-        z-index: 2;
-
-        .emoji {
-          transform: scale(3);
-          z-index: 2;
-        }
-      }
-    }
-
     img, video {
       max-width: 100%;
       max-height: 400px;
@@ -721,9 +705,6 @@ $status-margin: 0.75em;
       &.emoji {
         width: 32px;
         height: 32px;
-        transition: transform 200ms;
-        transform: scale(1);
-        pointer-events: none;
       }
     }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 17b4a6e0..6cc1851d 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => {
   return emojis.reduce((acc, emoji) => {
     return acc.replace(
       new RegExp(`:${emoji.shortcode}:`, 'g'),
-      `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>`
+      `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
     )
   }, string)
 }
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 24aef5cd..20e03cb0 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -323,9 +323,9 @@ describe('API Entities normalizer', () => {
 
   describe('MastoAPI emoji adder', () => {
     const emojis = makeMockEmojiMasto()
-    const imageHtml = '<span class="emoji-container"><img src="https://example.com/image.png" alt="image" title="image" class="emoji" /></span>'
+    const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />'
       .replace(/"/g, '\'')
-    const thinkHtml = '<span class="emoji-container"><img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" /></span>'
+    const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />'
       .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {