Merge branch 'emoji-selector-update' into shigusegubu

* emoji-selector-update:
  updated logic for hiding picker and also added ability to hide suggestions with esc key
  Remove emoji zoom
  Apply suggestion to src/components/emoji_picker/emoji_picker.vue
  Apply suggestion to src/components/emoji_picker/emoji_picker.js
  better hitbox for status emoji

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') {
+      // Disable suggestions hotkeys if suggestions are hidden
-        if (shiftKey) {
+      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 === 'Enter') {
-      if (key === 'ArrowUp') {
+          if (!ctrlKey) {
-        this.cycleBackward(e)
+            this.replaceText(e)
-      } else if (key === 'ArrowDown') {
+          }
-        this.cycleForward(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)

src/components/emoji_picker/emoji_picker.js

@@ -17,7 +17,6 @@ const EmojiPicker = {
       keyword: '',
       activeGroup: 'custom',
       showingStickers: false,
-      zoomEmoji: false,
       spamMode: false
     }
   },
@@ -61,13 +60,6 @@ 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,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%;

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>
 

src/components/status/status.vue

@@ -721,9 +721,6 @@ $status-margin: 0.75em;
       &.emoji {
         width: 32px;
         height: 32px;
-        transition: transform 200ms;
-        transform: scale(1);
-        pointer-events: none;
       }
     }