refs #681 Show emoji picker in new toot modal

package-lock.json

@@ -5294,6 +5294,11 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "emoji-mart-vue": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue/-/emoji-mart-vue-2.6.4.tgz",
+      "integrity": "sha512-spiCyVqt87vd3H+INV3ZbqvseASuIKf7Kszx9uDA7QgDEWlxfcUaTP8s80DStzzttcczR4vFpnAoeI1ebBmStA=="
+    },
     "emojilib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.3.0.tgz",
@@ -17350,6 +17355,11 @@
       "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-3.0.5.tgz",
       "integrity": "sha512-RSzsqPl5RF2lEU5LtAOD7zjIPzhChEf+nqk2HpWC9dFEAina0aQ/w/ctDzRoejAGUMYxYIjn9vsUGZlKSWgWvQ=="
     },
+    "vue-click-outside": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
+      "integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
+    },
     "vue-electron": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vue-electron/-/vue-electron-1.0.6.tgz",

package.json

@@ -103,6 +103,7 @@
     "electron-log": "^2.2.14",
     "electron-window-state": "^4.1.1",
     "element-ui": "^2.4.7",
+    "emoji-mart-vue": "^2.6.4",
     "emojilib": "^2.3.0",
     "hawk": "^7.0.7",
     "hoek": "^5.0.3",
@@ -123,6 +124,7 @@
     "tunnel-agent": "^0.6.0",
     "vue": "^2.3.3",
     "vue-awesome": "^3.0.0",
+    "vue-click-outside": "^1.0.7",
     "vue-electron": "^1.0.6",
     "vue-popperjs": "^1.2.6",
     "vue-router": "^3.0.1",

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -34,16 +34,33 @@
       </li>
     </ul>
   </el-popover>
+  <el-button type="text" class="emoji-selector" @click="toggleEmojiPicker" v-click-outside="hideEmojiPicker">
+    <icon name="regular/smile" scale="1.2"></icon>
+  </el-button>
+  <div v-show="openEmojiPicker" class="emoji-picker">
+    <picker
+      set="emojione"
+      :autoFocus="true"
+      />
+  </div>
 </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import emojilib from 'emojilib'
+import { Picker } from 'emoji-mart-vue'
+import ClickOutside from 'vue-click-outside'
 import suggestText from '../../../../utils/suggestText'
 
 export default {
   name: 'status',
+  directives: {
+    ClickOutside
+  },
+  components: {
+    Picker
+  },
   props: {
     value: {
       type: String
@@ -63,7 +80,8 @@ export default {
       highlightedIndex: 0,
       startIndex: null,
       matchWord: null,
-      filteredSuggestion: []
+      filteredSuggestion: [],
+      openEmojiPicker: false
     }
   },
   computed: {
@@ -102,6 +120,7 @@ export default {
         })
       } else if (oldState && !newState) {
         this.closeSuggest()
+        this.openEmojiPicker = false
       }
     }
   },
@@ -259,6 +278,12 @@ export default {
         default:
           return true
       }
+    },
+    toggleEmojiPicker () {
+      this.openEmojiPicker = !this.openEmojiPicker
+    },
+    hideEmojiPicker () {
+      this.openEmojiPicker = false
     }
   }
 }
@@ -266,9 +291,11 @@ export default {
 
 <style lang="scss" scoped>
 .status {
+  position: relative;
+
   textarea {
     display: block;
-    padding: 5px 15px;
+    padding: 4px 32px 4px 16px;
     line-height: 1.5;
     box-sizing: border-box;
     width: 100%;
@@ -321,5 +348,18 @@ export default {
       background-color: #f5f7fa;
     }
   }
+
+  .emoji-selector {
+    position: absolute;
+    top: 4px;
+    right: 8px;
+    padding: 0;
+  }
+
+  .emoji-picker {
+    position: absolute;
+    top: 32px;
+    left: 240px;
+  }
 }
 </style>