#101 - show emojis in groups, clean up

src/components/emoji-selector/emoji-selector.js

@@ -1,24 +1,35 @@
+const filterByKeyword = (list, keyword = '') => {
+  return list.filter(x => x.shortcode.indexOf(keyword) !== -1)
+}
+
 const EmojiSelector = {
   data () {
     return {
-      open: false
+      open: false,
+      keyword: ''
     }
   },
-  mounted () {
-    console.log(this.$store.state.instance.emoji)
-    console.log(this.$store.state.instance.customEmoji)
-  },
   methods: {
     togglePanel () {
       this.open = !this.open
     }
   },
   computed: {
-    standardEmoji () {
-      return this.$store.state.instance.emoji || []
-    },
-    customEmoji () {
-      return this.$store.state.instance.customEmoji || []
+    emojis () {
+      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)
+        }
+      }
     }
   }
 }

src/components/emoji-selector/emoji-selector.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="emoji-dropdown">
     <span class="emoji-dropdown-toggle" @click="togglePanel">Emoji</span>
-    <div class="emoji-dropdown-menu" v-if="open">
-      <span v-for="emoji in standardEmoji" :key="'standard' + emoji.shortcode" :title="emoji.shortcode" class="emoji-item">
-        <span v-if="!emoji.image_url">{{emoji.utf}}</span>
-        <img :src="emoji.utf" v-else>
-      </span>
-      <span v-for="emoji in customEmoji" :key="'custom' + emoji.shortcode" :title="emoji.shortcode" class="emoji-item">
-        <span v-if="!emoji.image_url">{{emoji.utf}}</span>
-        <img :src="'https://bikeshed.party' + emoji.image_url" v-else>
-      </span>
+    <div class="emoji-dropdown-menu panel panel-default" v-if="open">
+      <div class="panel-heading emoji-tabs">
+        <span class="emoji-tabs-item" v-for="(value, key) in emojis" :key="key" :title="value.text">
+          <i :class="value.icon"></i>
+        </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">
+          <div v-for="(value, key) in emojis" :key="key" class="emoji-group">
+            <h6 class="emoji-group-title">{{value.text}}</h6>
+            <span v-for="emoji in value.emojis" :key="key + emoji.shortcode" :title="emoji.shortcode" class="emoji-item">
+              <span v-if="!emoji.image_url">{{emoji.utf}}</span>
+              <img :src="'https://bikeshed.party' + emoji.image_url" v-else>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -33,21 +44,55 @@
       right: 0;
       width: 300px;
       height: 300px;
-      background: white;
-      border: 1px solid $fallback--faint;
       display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      overflow: auto;
-      margin-bottom: 5px;
+      flex-direction: column;
 
-      img {
-        max-width: 100%;
-        max-height: 100%;
+      &-content {
+        flex: 1 1 1px;
+        display: flex;
+        flex-direction: column;
       }
     }
   }
 
+  &-tabs {
+    &-item {
+      padding: 0 5px;
+
+      &:first-child, &.active {
+        border-bottom: 4px solid;
+
+        i {
+          color: $fallback--lightText;
+          color: var(--lightText, $fallback--lightText);
+        }
+      }
+    }
+  }
+
+  &-search {
+    padding: 5px;
+  }
+
+  &-groups {
+    flex: 1 1 1px;
+    overflow: auto;
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+
+    &-title {
+      font-size: 12px;
+      width: 100%;
+      margin: 0;
+      padding: 5px;
+    }
+  }
+
   &-item {
     width: 34px;
     height: 34px;
@@ -56,9 +101,13 @@
     font-size: 16px;
     align-items: center;
     justify-content: center;
-    color: black;
     padding: 5px;
     cursor: pointer;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
 
 }