Feature: Support an Emoji selector in the chat widget (#773)

* Adds emoji widget to web widget
* Style fixes for the send button
* Adds cursor to emoji widget action buttons

app/javascript/dashboard/assets/scss/_woot.scss

@@ -9,7 +9,6 @@
 @import 'widgets/conv-header';
 @import 'widgets/conversation-card';
 @import 'widgets/conversation-view';
-@import 'widgets/emojiinput';
 @import 'widgets/forms';
 @import 'widgets/login';
 @import 'widgets/modal';

app/javascript/dashboard/assets/scss/widgets/_emojiinput.scss

@@ -1,3 +1,6 @@
+@import '../variables';
+@import '../mixins';
+
 .emoji-dialog {
   @include elegant-card;
   background: $color-white;
@@ -15,15 +18,15 @@
   }
 
   .emojione {
-    @include margin($zero);
-    font-size: $font-size-medium;
+    font-size: $font-size-default;
+    margin: $zero;
   }
 
   .emoji-row {
-    @include padding($space-small);
     box-sizing: border-box;
     height: 180px;
     overflow-y: auto;
+    padding: $space-small;
 
     .emoji {
       border-radius: 4px;
@@ -52,27 +55,33 @@
 }
 
 .emoji-dialog-header {
-  @include padding($zero $space-smaller);
-  background-color: $light-gray;
+  background-color: $color-body;
   border-top-left-radius: $space-small;
   border-top-right-radius: $space-small;
+  padding: $zero $space-smaller;
 
   ul {
+    display: flex;
     list-style: none;
     margin: 0;
     padding: $space-smaller 0 0;
 
-    > li {
-      @include padding($space-smaller $space-small);
-      box-sizing: border-box;
+    >li {
+      align-items: center;
       cursor: pointer;
-      display: inline-block;
-      height: 3.4rem;
-      text-align: center;
+      display: flex;
+      height: $space-medium;
+      justify-content: center;
+      padding: $space-smaller $space-small;
     }
 
-    > .active {
-      background: $white;
+    .emojione {
+      height: $space-two;
+      width: $space-normal;
+    }
+
+    >.active {
+      background: $color-white;
       border-top-left-radius: $space-small;
       border-top-right-radius: $space-small;
     }
@@ -84,13 +93,14 @@
   }
 
   .active {
+
     img,
     svg {
       filter: grayscale(0);
     }
   }
 
-  > * {
+  >* {
     display: table-cell;
     vertical-align: middle;
   }

app/javascript/dashboard/components/widgets/emoji/EmojiInput.vue

@@ -3,37 +3,39 @@
     <header class="emoji-dialog-header" role="menu">
       <ul>
         <li
-          v-bind:class="{ 'active': selectedKey === category.key }"
           v-for="category in categoryList"
+          :key="category.key"
+          :class="{ active: selectedKey === category.key }"
           @click="changeCategory(category)"
         >
           <div
-            @click="changeCategory(category)"
             role="menuitem"
             class="emojione"
-            v-html="getEmojiUnicode(`:${category.emoji}:`)"
-          >
-          </div>
+            @click="changeCategory(category)"
+            v-html="` ${getEmojiUnicode(`:${category.emoji}:`)}`"
+          ></div>
         </li>
       </ul>
     </header>
     <div class="emoji-row">
-      <h5 class="emoji-category-title">{{selectedKey}}</h5>
+      <h5 class="emoji-category-title">
+        {{ selectedKey }}
+      </h5>
       <div
-        v-for="(emoji, key) in selectedEmojis"
+        v-for="emoji in filteredSelectedEmojis"
+        :key="emoji.shortname"
         role="menuitem"
-        :class="`emojione`"
-        v-html="getEmojiUnicode(emoji[emoji.length - 1].shortname)"
-        v-if="filterEmoji(emoji[emoji.length - 1].shortname)"
+        class="emojione"
         track-by="$index"
-        @click="onClick(emoji[emoji.length - 1])"
+        @click="onClick(emoji)"
+        v-html="getEmojiUnicode(emoji.shortname)"
       />
-      </div>
     </div>
   </div>
 </template>
 
 <script>
+/* eslint-disable no-restricted-syntax */
 import strategy from 'emojione/emoji.json';
 import categoryList from './categories';
 import { getEmojiUnicode } from './utils';
@@ -44,7 +46,7 @@ export default {
     return {
       selectedKey: 'people',
       categoryList,
-      selectedEmojis: [],
+      selectedEmojis: {},
     };
   },
   computed: {
@@ -76,13 +78,29 @@ export default {
       }
       return emojiArr;
     },
+    filteredSelectedEmojis() {
+      const emojis = this.selectedEmojis;
+      const filteredEmojis = Object.keys(emojis)
+        .map(key => {
+          const emoji = emojis[key];
+          const [lastEmoji] = emoji.slice(-1);
+          return { ...lastEmoji, key };
+        })
+        .filter(emoji => {
+          const { shortname } = emoji;
+          if (shortname) {
+            return this.filterEmoji(shortname);
+          }
+          return false;
+        });
+      return filteredEmojis;
+    },
   },
   // On mount render initial emoji
   mounted() {
     this.getInitialEmoji();
   },
   methods: {
-
     // Change category and associated emojis
     changeCategory(category) {
       this.selectedKey = category.key;
@@ -101,3 +119,6 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/widgets/emojiinput';
+</style>

app/javascript/widget/components/ChatAttachment.vue

@@ -1,7 +1,7 @@
 <template>
   <file-upload :size="4096 * 2048" @input-file="onFileUpload">
     <span class="attachment-button ">
-      <i v-if="!isUploading.image"></i>
+      <i v-if="!isUploading.image" class="ion-android-attach" />
       <spinner v-if="isUploading" size="small" />
     </span>
   </file-upload>
@@ -52,18 +52,16 @@ export default {
   cursor: pointer;
   position: relative;
   padding-right: $space-smaller;
-  display: block;
   width: 20px;
-  height: 20px;
 
   i {
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    background: white center center no-repeat;
-    background-size: contain;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23999a9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-paperclip'%3E%3Cpath d='M21 11l-9 9a6 6 0 01-8-8l9-9a4 4 0 016 5L9 17a2 2 0 01-2-2l8-9' /%3E%3C/svg%3E");
+    font-size: $font-size-large;
+    color: $color-gray;
   }
 }
 </style>
+<style lang="scss">
+.file-uploads .attachment-button + label {
+  cursor: pointer;
+}
+</style>

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,20 +1,38 @@
 <template>
   <div class="chat-message--input">
-    <chat-attachment-button :on-attach="onSendAttachment" />
-    <ChatInputArea v-model="userInput" :placeholder="placeholder" />
-    <ChatSendButton
-      :on-click="handleButtonClick"
-      :disabled="!userInput.length"
-      :color="widgetColor"
-    />
+    <chat-input-area v-model="userInput" :placeholder="placeholder" />
+    <div class="button-wrap">
+      <chat-attachment-button
+        v-if="showAttachment"
+        :on-attach="onSendAttachment"
+      />
+      <emoji-input
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+      />
+      <i
+        class="emoji-toggle icon ion-happy-outline"
+        :class="{ active: showEmojiPicker }"
+        @click="toggleEmojiPicker()"
+      />
+      <chat-send-button
+        v-if="showSendButton"
+        :on-click="handleButtonClick"
+        :color="widgetColor"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import emojione from 'emojione';
+import { mixin as clickaway } from 'vue-clickaway';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatInputArea from 'widget/components/ChatInputArea.vue';
+import EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
 
 export default {
   name: 'ChatInputWrap',
@@ -22,8 +40,9 @@ export default {
     ChatAttachmentButton,
     ChatSendButton,
     ChatInputArea,
+    EmojiInput,
   },
-
+  mixins: [clickaway],
   props: {
     placeholder: {
       type: String,
@@ -42,6 +61,7 @@ export default {
   data() {
     return {
       userInput: '',
+      showEmojiPicker: false,
     };
   },
 
@@ -49,6 +69,12 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    showAttachment() {
+      return this.userInput.length === 0;
+    },
+    showSendButton() {
+      return this.userInput.length > 0;
+    },
   },
 
   destroyed() {
@@ -71,6 +97,19 @@ export default {
         this.handleButtonClick();
       }
     },
+    toggleEmojiPicker() {
+      this.showEmojiPicker = !this.showEmojiPicker;
+    },
+    hideEmojiPicker() {
+      if (this.showEmojiPicker) {
+        this.toggleEmojiPicker();
+      }
+    },
+    emojiOnClick(emoji) {
+      this.userInput = emojione.shortnameToUnicode(
+        `${this.userInput}${emoji.shortname} `
+      );
+    },
   },
 };
 </script>
@@ -82,4 +121,24 @@ export default {
   align-items: center;
   display: flex;
 }
+
+.emoji-toggle {
+  font-size: $font-size-large;
+  color: $color-gray;
+  padding-right: $space-smaller;
+  cursor: pointer;
+}
+
+.emoji-dialog {
+  right: $space-one;
+}
+
+.file-uploads {
+  margin-right: $space-small;
+}
+
+.button-wrap {
+  display: flex;
+  align-items: center;
+}
 </style>

app/javascript/widget/components/ChatSendButton.vue

@@ -57,7 +57,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: $font-size-large;
+    font-size: $font-size-big;
     font-weight: $font-weight-medium;
   }
 }