Merge branch 'emoji-selector-update' into shigusegubu

* emoji-selector-update:
  review/naming + bugfix for stickers
  updated logic for hiding picker and also added ability to hide suggestions with esc key
  Remove emoji zoom

src/components/emoji_input/emoji_input.js

@@ -54,17 +54,28 @@ const EmojiInput = {
       required: true,
       type: String
     },
-    emojiPicker: {
+    enableEmojiPicker: {
+      /**
+       * Enables emoji picker support, this implies that custom emoji are supported
+       */
       required: false,
       type: Boolean,
       default: false
     },
-    emojiPickerExternalTrigger: {
+    hideEmojiButton: {
+      /**
+    enableStickerPicker: {
+       * intended to use with external picker trigger, i.e. you have a button outside
+       * input that will open up the picker, see triggerShowPicker()
+       */
       required: false,
       type: Boolean,
       default: false
     },
-    stickerPicker: {
+    enableStickerPicker: {
+      /**
+       * Enables sticker picker support, only makes sense when enableEmojiPicker=true
+       */
       required: false,
       type: Boolean,
       default: false

src/components/emoji_input/emoji_input.vue

@@ -4,19 +4,19 @@
     class="emoji-input"
   >
     <slot />
-    <template v-if="emojiPicker">
+    <template v-if="enableEmojiPicker">
       <div
-        v-if="!emojiPickerExternalTrigger"
+        v-if="!hideEmojiButton"
         class="emoji-picker-icon"
         @click.prevent="togglePicker"
       >
         <i class="icon-smile" />
       </div>
       <EmojiPicker
-        v-if="emojiPicker"
+        v-if="enableEmojiPicker"
         ref="picker"
         :class="{ hide: !showPicker }"
-        :sticker-picker="stickerPicker"
+        :enable-sticker-picker="enableStickerPicker"
         class="emoji-picker-panel"
         @emoji="insert"
         @sticker-uploaded="onStickerUploaded"

src/components/emoji_picker/emoji_picker.js

@@ -5,7 +5,7 @@ const filterByKeyword = (list, keyword = '') => {
 
 const EmojiPicker = {
   props: {
-    stickerPicker: {
+    enableStickerPicker: {
       required: false,
       type: Boolean,
       default: false
@@ -97,6 +97,9 @@ const EmojiPicker = {
     },
     emojisView () {
       return this.emojis.filter(value => value.emojis.length > 0)
+    },
+    stickerPickerEnabled () {
+      return (this.$store.state.instance.stickers || []).length !== 0
     }
   }
 }

src/components/emoji_picker/emoji_picker.vue

@@ -17,7 +17,7 @@
         </span>
       </span>
       <span
-        v-if="stickerPicker"
+        v-if="stickerPickerEnabled"
         class="additional-tabs"
       >
         <span

src/components/post_status_form/post_status_form.vue

@@ -61,7 +61,7 @@
         <EmojiInput
           v-if="newStatus.spoilerText || alwaysShowSubject"
           v-model="newStatus.spoilerText"
-          emoji-picker
+          enable-emoji-picker
           :suggest="emojiSuggestor"
           class="form-control"
         >
@@ -78,9 +78,9 @@
           v-model="newStatus.status"
           :suggest="emojiUserSuggestor"
           class="form-control main-input"
-          emoji-picker
+          enable-emoji-picker
-          emoji-picker-external-trigger
+          hide-emoji-button
-          sticker-picker
+          enable-sticker-picker
           @sticker-uploaded="addMediaFile"
           @sticker-upload-failed="uploadFailed"
         >

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;

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)
 }

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', () => {