added tabs to emoji panel.

src/components/app/RightPanel.vue

@@ -34,7 +34,7 @@
 
       <div style="position: relative;" >
         <emoji-suggestions v-if="emojiArray" :emojiArray="emojiArray"/>
-        <emoji-panel v-if="showEmojiPanel" />
+        <emoji-panel v-if="emojiPanelShow" />
       </div>
 
       <div class="message-area">
@@ -56,7 +56,7 @@
         ></textarea>
         <button
           class="emojis-button"
-          @click="showEmojiPanel =  !showEmojiPanel">
+          @click="$store.dispatch('setPopoutVisibility', {name: 'emojiPanel', visibility: true})">
           <i class="material-icons">face</i>
         </button>
         <button
@@ -112,7 +112,6 @@ export default {
       getTimerID: null,
       typing: false,
       whosTyping: "",
-      showEmojiPanel: false
     };
   },
   methods: {
@@ -422,6 +421,9 @@ export default {
     emojiArray() {
       return this.$store.getters.emojiArray;
     },
+    emojiPanelShow() {
+      return this.$store.getters.popouts.emojiPanel
+    },
     emojiIndex() {
       return this.$store.getters.getEmojiIndex;
     }

src/components/app/emojiPanel.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="emoji-panel">
+  <div class="emoji-panel" v-click-outside="closePanel">
     <div class="emoji-panel-inner">
       <div class="emojis-list">
         <div class="category" v-for="(group, index) in groups" :key="group">
-          <div class="category-name">{{group}}</div>
+          <div class="category-name">{{group.split('-')[0]}}</div>
           <div class="list">
             <div
               class="emoji-item"
               v-for="emojiSorted in emojiByGroup(index)"
               :key="emojiSorted.shortcodes[0]"
-              @click="clickEvent(emojiSorted.shortcodes[0])">
+              @click="clickEvent(emojiSorted.shortcodes[0])"
+            >
               <img class="panel emoji" v-lazyload :data-url="parseEmojiPath(emojiSorted.unicode)">
             </div>
           </div>
         </div>
       </div>
+      <div class="tabs">
+        <div class="tab" v-for="(emoji, index) in groupUnicodes" :key="index" @mouseenter="mouseHover(emoji, $event)" >
+          <img class="panel emoji" :src="selectRandom(emoji)" @click="scrollToCategory(index)">
+        </div>
+      </div>
     </div>
     <div class="triangle"></div>
   </div>
@@ -23,7 +29,7 @@
 <script>
 import { bus } from "@/main";
 import emojiParser from "@/utils/emojiParser.js";
-import lazyLoad from "@/directives/LazyLoad.js"
+import lazyLoad from "@/directives/LazyLoad.js";
 
 import emojis from "emojibase-data/en/compact.json";
 import { groups } from "emojibase-data/meta/groups.json";
@@ -32,7 +38,27 @@ export default {
   directives: {
     lazyload: lazyLoad
   },
+  data() {
+    return {
+      groupUnicodes: [
+        ["😀", "😅", "☺️", "😇", "😉", "😍", "🥰", "😚", "😝", "😏", "😣", "😭", "🥺", "😢", "🤔", "😳", "😡", "🤤", "🤠", "🥳", "😦", "👅", "👀", "🙏", "👍", "👌", "👠"],
+        ["🐱", "🐰", "🐷", "🐯", "🐸", "🐦", "🐧", "🐣", "🦋", "🐟", "🐿", "🌳", "🌴", "🌷", "🌹", "🌺", "🌻", "🌙", "🌍", "🌈", "🌦", "❄️", "💦", "☃️", "🔥", "💫", "☔️"],
+        ["🍎", "🍌", "🍉", "🍇", "🍑", "🍒", "🍆", "🍕", "🍟", "🥞", "🍰", "🍪", "🍿", "🍩", "🥤", "🧁", "🍨", "🍭", "🥂", "🍹", "🍝", "🌮"],
+        ["🏀", "🏈", "⚽️","🥏", "🎱", "🏓", "🏹", "🏆", "🥇", "🎨", "🎧", "🎹", "🎸", "🎮", "🎯", "🎳", "🏂"],
+        ["🚗", "🚕", "🚑", "🚒", "🛵", "🚔", "🚁", "✈️", "⛵️", "🚦", "🗺", "🏝", "🏜", "🏔", "🏕", "🏥", "🎢", "⛩", "🏞", "🌄", "🌃", "🌌", "🌉", "🌇", "🎆"],
+        ["⌚️", "📱", "💻", "🖥", "🖨", "💾", "📀", "💿", "📸", "⏰", "⌛️", "💸", "💵", "💴", "💶", "💷", "🔫", "🔪", "💎", "💳", "🧻", "🚽", "🛁", "🧼", "🛏", "🛋", "🧸", "🎉", "🎀", "🎁", "🛒", "✉️", "💌", "✏️", "📝", "🖌", "📚", "📊", "📆", "📁", "📋", "🔒", "📏", "📌", "✂️"],
+        ["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "💕", "💖", "💘", "💔", "🔞", "📵", "🚭", "⚠️", "🔆", "✅", "♻️", "🚸", "⁉️", "💢", "💯", "🚾", "🏧", "🌐", "🔡", "🆒", "🆕", "🆓", "🆗", "🎵", "♾", "™️", "©️", "💬", "📢", "♉️", "♒️", "🆚", "🆘", "📛", "🚫", "🚯", "🕓"],
+        ["🏁", "🏴‍☠️", "🇦🇶", "🇧🇷", "🇨🇦", "🇯🇵", "🇵🇰", "🇵🇱", "🇹🇷", "🇺🇸", "🇬🇧", "🇰🇷", "🇫🇷", "🇩🇪", "🇯🇲", "🇳🇵", "🇬🇷", "🇷🇺", "🇪🇸", "🇩🇰", "🇨🇿", "🇮🇹", "🇮🇳", "🇨🇭"]
+        ]
+    };
+  },
   methods: {
+    closePanel() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "emojiPanel",
+        visibility: false
+      });
+    },
     emojiByGroup(index) {
       index = parseInt(index);
       return emojis.filter(_emoji => _emoji.group === index);
@@ -40,8 +66,20 @@ export default {
     parseEmojiPath(emoji) {
       return emojiParser.GetEmojiPath(emoji);
     },
+    selectRandom(array){
+      const randomNum = Math.floor((Math.random() * array.length));
+      return this.parseEmojiPath(array[randomNum])
+    },
     clickEvent(shortcode) {
-      bus.$emit('emojiPanel:Selected', shortcode)
+      bus.$emit("emojiPanel:Selected", shortcode);
+    },
+    mouseHover(emoji, event){
+      event.target.children[0].src = this.selectRandom(emoji)
+    },
+    scrollToCategory(index) {
+      console.log("🏁 🏴‍☠️ 🇦🇶 🇧🇷 🇨🇦 🇯🇵 🇵🇰 🇵🇱  🇹🇷 🇺🇸 🇬🇧 🇰🇷 🇫🇷 🇩🇪 🇯🇲  🇳🇵 🇬🇷 🇷🇺 🇪🇸 🇩🇰 🇨🇿 🇮🇹 🇮🇳 🇨🇭".split(" "))
+      const elements = document.querySelectorAll(".category-name");
+      elements[index].scrollIntoView();
     }
   },
   computed: {
@@ -58,20 +96,22 @@ export default {
   position: absolute;
   bottom: 10px;
   right: 20px;
-  width: 370px;
+  width: 390px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  z-index: 99999;
 }
 
-.emoji-panel-inner{
-  background: rgba(32, 32, 32, 0.87);
+.emoji-panel-inner {
+  background: rgba(255, 255, 255, 0.61);
   transition: 0.3s;
   border-radius: 5px;
   padding: 3px;
+  z-index: 99999;
 }
 .emoji-panel-inner:hover {
-  background: rgb(32, 32, 32);
+  background: rgba(255, 255, 255, 0.781)
 }
 .emojis-list {
   color: white;
@@ -81,29 +121,78 @@ export default {
   height: 300px;
   overflow-y: auto;
   transition: 0.32s;
+  z-index: 99999;
+  margin-left: 10px;
 }
 
 .category {
 }
 .category-name {
   padding: 10px;
+  text-transform:capitalize;
+  color: rgb(143, 143, 143);
 }
 .list {
 }
 .emoji-item {
   background: rgba(59, 59, 59, 0.521);
   transition: 0.3s;
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
+  overflow: hidden;
   margin: 4px;
   padding: 2px;
   border-radius: 5px;
   height: 30px;
   width: 30px;
-
 }
 .emoji-item:hover {
   background: rgb(59, 59, 59);
 }
+.tabs {
+  display: flex;
+  color: white;
+  align-content: center;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-top: 10px;
+  background: rgb(161, 161, 161);
+  border-radius: 5px;
+  transition: 0.3s;
+}
+.tabs img {
+  height: 20px;
+  width: 20px;
+  margin: auto;
+  padding-right: 3px;
+  filter: grayscale(100%);
+  transition: 0.1s;
+}
+.tab {
+  background: rgba(59, 59, 59, 0.521);
+  border-radius: 5px;
+  margin-left: 7px;
+  margin-right: 7px;
+  display: flex;
+  flex-direction: column;
+  transition: 0.3s;
+  height: 35px;
+  width: 325px;
+  overflow: hidden;
+}
+.tab:hover {
+  background: rgba(73, 73, 73, 0.733);
+}
+.tab:hover img {
+  height: 29px;
+  width: 29px;
+  margin: auto;
+  padding-left: 2px;
+  filter: grayscale(0)
+}
 .triangle {
   width: 0;
   height: 0;
@@ -119,5 +208,6 @@ export default {
 img.panel.emoji {
   margin-left: 3px;
   margin-top: 3px;
+  margin: auto;
 }
 </style>

src/components/app/emojiSuggestions.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(emoji, index) in $props.emojiArray.slice(0,10)"
       :class="{emojiItem: true, selected: index === emojiIndex}"
-      @mouseover="hoverEvent"
+      @mouseenter="hoverEvent"
       @click="clickEvent"
       :key="emoji.hexcode"
     >

src/store/modules/popoutsModule.js

@@ -14,6 +14,7 @@ const state = {
   dragDropFileUploadDialog: false,
   settings: false,
   GDLinkMenu: false,
+  emojiPanel: false,
 }
 
 const getters = {