2 files changed, 33 insertions, 57 deletions
diff --git a/src/components/emoji-picker/emoji-picker.js b/src/components/emoji-picker/emoji-picker.js
index 9d2595aa..92d517b7 100644
--- a/src/components/emoji-picker/emoji-picker.js
+++ b/src/components/emoji-picker/emoji-picker.js
@@ -1,33 +1,17 @@
 const filterByKeyword = (list, keyword = '') => {
-  return list.filter(x => x.shortcode.indexOf(keyword) !== -1)
+  return list.filter(x => x.displayText.includes(keyword))
 }
 
 const EmojiPicker = {
-  mounted () {
-    document.body.addEventListener('click', this.outsideClicked)
-  },
-  destroyed () {
-    document.body.removeEventListener('click', this.outsideClicked)
-  },
   data () {
     return {
-      open: false,
       keyword: '',
       activeGroup: 'standard'
     }
   },
   methods: {
-    togglePanel () {
-      this.open = !this.open
-    },
-    insideClicked (e) {
-      e.stopPropagation()
-    },
-    outsideClicked () {
-      this.open = false
-    },
     onEmoji (emoji) {
-      const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
+      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
       this.$emit('emoji', ` ${value} `)
       this.open = false
     },
@@ -51,20 +35,17 @@ const EmojiPicker = {
       const standardEmojis = this.$store.state.instance.emoji || []
       const customEmojis = this.$store.state.instance.customEmoji || []
       return {
-        standard: {
-          text: 'Standard',
-          icon: 'icon-star',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
-        },
         custom: {
           text: 'Custom',
           icon: 'icon-picture',
           emojis: filterByKeyword(customEmojis, this.keyword)
+        },
+        standard: {
+          text: 'Standard',
+          icon: 'icon-star',
+          emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       }
-    },
-    serverUrl () {
-      return this.$store.state.instance.server
     }
   }
 }
diff --git a/src/components/emoji-picker/emoji-picker.vue b/src/components/emoji-picker/emoji-picker.vue
index 663d9e2e..ea93e6fc 100644
--- a/src/components/emoji-picker/emoji-picker.vue
+++ b/src/components/emoji-picker/emoji-picker.vue
@@ -1,36 +1,31 @@
 <template>
-  <div class="emoji-dropdown" @click.prevent="insideClicked">
-    <span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
-      <i class="icon-smile"></i>
+<div class="emoji-dropdown-menu panel panel-default">
+  <div class="panel-heading emoji-tabs">
+    <span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
+      <i :class="value.icon"></i>
     </span>
-    <div class="emoji-dropdown-menu panel panel-default" v-if="open">
-      <div class="panel-heading emoji-tabs">
-        <span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
-          <i :class="value.icon"></i>
+  </div>
+  <div class="panel-body emoji-dropdown-menu-content">
+    <div class="emoji-search">
+      <input type="text" class="form-control" v-model="keyword" />
+    </div>
+    <div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup">
+      <div v-for="(value, key) in emojis" :key="key" class="emoji-group">
+        <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
+        <span
+          v-for="emoji in value.emojis"
+          :key="key + emoji.displayText"
+          :title="emoji.displayText"
+          class="emoji-item"
+          @click="onEmoji(emoji)"
+          >
+          <span v-if="!emoji.imageUrl">{{emoji.replacement}}</span>
+          <img :src="emoji.imageUrl" v-else>
         </span>
       </div>
-      <div class="panel-body emoji-dropdown-menu-content">
-        <div class="emoji-search">
-          <input type="text" class="form-control" v-model="keyword" />
-        </div>
-        <div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup">
-          <div v-for="(value, key) in emojis" :key="key" class="emoji-group">
-            <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
-            <span
-              v-for="emoji in value.emojis"
-              :key="key + emoji.shortcode"
-              :title="emoji.shortcode"
-              class="emoji-item"
-              @click="onEmoji(emoji)"
-            >
-              <span v-if="!emoji.image_url">{{emoji.utf}}</span>
-              <img :src="serverUrl + emoji.image_url" v-else>
-            </span>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
+</div>
 </template>
 
 <script src="./emoji-picker.js"></script>
@@ -119,14 +114,14 @@
   }
 
   &-item {
-    width: 34px;
-    height: 34px;
+    width: 32px;
+    height: 32px;
     box-sizing: border-box;
     display: flex;
-    font-size: 16px;
+    font-size: 32px;
     align-items: center;
     justify-content: center;
-    padding: 5px;
+    margin: 2px;
     cursor: pointer;
 
     img {