From 9146bee7aa7229f041bcc77814d9fa40809329a6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Sep 2019 21:18:05 +0300
Subject: [PATCH 1/5] better hitbox for status emoji

---
 src/components/status/status.vue              | 23 ++++++++++++++-----
 .../entity_normalizer.service.js              |  2 +-
 .../entity_normalizer.spec.js                 |  4 ++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5e849dd7b..a0756ae4a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -696,6 +696,22 @@ $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;
@@ -707,12 +723,7 @@ $status-margin: 0.75em;
         height: 32px;
         transition: transform 200ms;
         transform: scale(1);
-        z-index: 1;
-
-        &:hover {
-          transform: scale(3);
-          z-index: 2;
-        }
+        pointer-events: none;
       }
     }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 6cc1851d6..17b4a6e04 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'),
-      `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
+      `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>`
     )
   }, 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 20e03cb08..24aef5cd9 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 = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />'
+    const imageHtml = '<span class="emoji-container"><img src="https://example.com/image.png" alt="image" title="image" class="emoji" /></span>'
       .replace(/"/g, '\'')
-    const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />'
+    const thinkHtml = '<span class="emoji-container"><img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" /></span>'
       .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {

From 96512939564aeb00660acd10a409879c1bfb33e4 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 9 Sep 2019 19:42:33 +0000
Subject: [PATCH 2/5] Apply suggestion to
 src/components/emoji_picker/emoji_picker.js

---
 src/components/emoji_picker/emoji_picker.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 03870a99c..d9d41bf63 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -65,7 +65,6 @@ const EmojiPicker = {
     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'
     }

From 4f0195b05c3124104b3e09d4b9d1f73c9d74440a Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Tue, 10 Sep 2019 18:39:45 +0000
Subject: [PATCH 3/5] Apply suggestion to
 src/components/emoji_picker/emoji_picker.vue

---
 src/components/emoji_picker/emoji_picker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 5a8961d2e..1c91c8b76 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -67,7 +67,7 @@
               @click.stop.prevent="onEmoji(emoji)"
               @mouseenter="setZoomEmoji($event, emoji)"
               @mouseleave="setZoomEmoji($event, false)"
-              >
+            >
               <span v-if="!emoji.imageUrl">
                 {{ emoji.replacement }}
               </span>

From ab6ecdddc16453776f447994a56b201360c0a60f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2019 19:15:22 +0300
Subject: [PATCH 4/5] 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 +-
 5 files changed, 3 insertions(+), 64 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d9d41bf63..bce5026ee 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 7e76aa520..472db35b7 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 1c91c8b76..901520aaa 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 a0756ae4a..771615f39 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 17b4a6e04..6cc1851d6 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)
 }

From 203b64c3fb9b2c004af34adb361ee0457ef82e20 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2019 20:14:35 +0300
Subject: [PATCH 5/5] updated logic for hiding picker and also added ability to
 hide suggestions with esc key

---
 src/components/emoji_input/emoji_input.js | 62 +++++++++++++++++------
 1 file changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index c74c531bd..6dc006f8c 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -78,6 +78,7 @@ const EmojiInput = {
       focused: false,
       blurTimeout: null,
       showPicker: false,
+      temporarilyHideSuggestions: false,
       spamMode: false,
       disableClickOutside: false
     }
@@ -102,7 +103,11 @@ const EmojiInput = {
         }))
     },
     showSuggestions () {
-      return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker
+      return this.focused &&
+        this.suggestions &&
+        this.suggestions.length > 0 &&
+        !this.showPicker &&
+        !this.temporarilyHideSuggestions
     },
     textAtCaret () {
       return (this.wordAtCaret || {}).word || ''
@@ -153,6 +158,7 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
+      this.input.elm.focus()
       this.showPicker = !this.showPicker
     },
     replace (replacement) {
@@ -250,44 +256,68 @@ const EmojiInput = {
       this.focused = true
       this.setCaret(e)
       this.resize()
+      this.temporarilyHideSuggestions = false
     },
     onKeyUp (e) {
+      const { key } = e
       this.setCaret(e)
       this.resize()
+
+      // Setting hider in keyUp to prevent suggestions from blinking
+      // when moving away from suggested spot
+      if (key === 'Escape') {
+        this.temporarilyHideSuggestions = true
+      } else {
+        this.temporarilyHideSuggestions = false
+      }
     },
     onPaste (e) {
       this.setCaret(e)
       this.resize()
     },
     onKeyDown (e) {
-      this.setCaret(e)
-      this.resize()
-
       const { ctrlKey, shiftKey, key } = e
-      if (key === 'Tab') {
-        if (shiftKey) {
+      // Disable suggestions hotkeys if suggestions are hidden
+      if (!this.temporarilyHideSuggestions) {
+        if (key === 'Tab') {
+          if (shiftKey) {
+            this.cycleBackward(e)
+          } else {
+            this.cycleForward(e)
+          }
+        }
+        if (key === 'ArrowUp') {
           this.cycleBackward(e)
-        } else {
+        } else if (key === 'ArrowDown') {
           this.cycleForward(e)
         }
-      }
-      if (key === 'ArrowUp') {
-        this.cycleBackward(e)
-      } else if (key === 'ArrowDown') {
-        this.cycleForward(e)
-      }
-      if (key === 'Enter') {
-        if (!ctrlKey) {
-          this.replaceText(e)
+        if (key === 'Enter') {
+          if (!ctrlKey) {
+            this.replaceText(e)
+          }
         }
       }
+      // Probably add optional keyboard controls for emoji picker?
+
+      // Escape hides suggestions, if suggestions are hidden it
+      // de-focuses the element (i.e. default browser behavior)
+      if (key === 'Escape') {
+        if (!this.temporarilyHideSuggestions) {
+          this.input.elm.focus()
+        }
+      }
+
+      this.showPicker = false
+      this.resize()
     },
     onInput (e) {
       this.showPicker = false
       this.setCaret(e)
+      this.resize()
       this.$emit('input', e.target.value)
     },
     onCompositionUpdate (e) {
+      this.showPicker = false
       this.setCaret(e)
       this.resize()
       this.$emit('input', e.target.value)