refs #1281 Add emoji picker on reaction button

src/renderer/components/organisms/Toot.vue

@@ -103,7 +103,7 @@
             <bdi v-html="username(message.account)"></bdi>
           </span>
         </div>
-        <div class="tool-box">
+        <div class="tool-box" v-click-outside="hideEmojiPicker">
           <el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
             <icon name="reply" scale="0.9"></icon>
           </el-button>
@@ -137,6 +137,21 @@
           <span class="count">
             {{ favouritesCount }}
           </span>
+          <el-button class="emoji" type="text" @click="toggleEmojiPicker">
+            <icon name="regular/smile" scale="0.9"></icon>
+          </el-button>
+          <div v-if="openEmojiPicker" class="emoji-picker">
+            <picker
+              set="emojione"
+              :autoFocus="true"
+              @select="selectEmoji"
+              :sheetSize="32"
+              :perLine="7"
+              :emojiSize="24"
+              :showPreview="false"
+              :emojiTooltip="true"
+            />
+          </div>
           <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
             <icon name="thumbtack" scale="0.9"></icon>
           </el-button>
@@ -184,6 +199,8 @@
 <script>
 import moment from 'moment'
 import { mapState } from 'vuex'
+import { Picker } from 'emoji-mart-vue'
+import ClickOutside from 'vue-click-outside'
 import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
 import DisplayStyle from '~/src/constants/displayStyle'
 import TimeFormat from '~/src/constants/timeFormat'
@@ -194,9 +211,13 @@ import { setInterval, clearInterval } from 'timers'
 
 export default {
   name: 'toot',
+  directives: {
+    ClickOutside
+  },
   components: {
     FailoverImg,
-    Poll
+    Poll,
+    Picker
   },
   data() {
     return {
@@ -204,7 +225,8 @@ export default {
       showAttachments: this.$store.state.App.ignoreNFSW,
       hideAllAttachments: this.$store.state.App.hideAllAttachments,
       now: Date.now(),
-      pollResponse: null
+      pollResponse: null,
+      openEmojiPicker: false
     }
   },
   props: {
@@ -240,7 +262,7 @@ export default {
       language: state => state.language
     }),
     shortcutEnabled: function () {
-      return this.focused && !this.overlaid
+      return this.focused && !this.overlaid && !this.openEmojiPicker
     },
     timestamp: function () {
       return this.parseDatetime(this.originalMessage.created_at, this.now)
@@ -581,6 +603,15 @@ export default {
     async refresh(id) {
       const res = await this.$store.dispatch('organisms/Toot/refresh', id)
       this.pollResponse = res
+    },
+    toggleEmojiPicker() {
+      this.openEmojiPicker = !this.openEmojiPicker
+    },
+    hideEmojiPicker() {
+      this.openEmojiPicker = false
+    },
+    selectEmoji(emoji) {
+      console.log(emoji)
     }
   }
 }
@@ -593,6 +624,7 @@ export default {
 
 .toot {
   padding: 8px 0 0 16px;
+  position: relative;
 
   .fa-icon {
     font-size: 0.9em;
@@ -833,6 +865,12 @@ export default {
   .action-pop-over {
     color: #303133;
   }
+
+  .emoji-picker {
+    position: absolute;
+    margin-top: 4px;
+    z-index: 10;
+  }
 }
 
 .filtered {