1 files changed, 92 insertions, 0 deletions
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
new file mode 100644
index 00000000..12b1569e
--- /dev/null
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="emoji-picker panel panel-default">
+    <div class="panel-heading">
+      <span class="emoji-tabs">
+        <span
+          v-for="group in emojis"
+          :key="group.id"
+          class="emoji-tabs-item"
+          :class="{
+            active: activeGroupView === group.id,
+            disabled: group.emojis.length === 0
+          }"
+          :title="group.text"
+          @click.prevent="highlight(group.id)"
+        >
+          <i :class="group.icon" />
+        </span>
+      </span>
+      <span
+        v-if="stickerPicker"
+        class="additional-tabs"
+      >
+        <span
+          class="stickers-tab-icon additional-tabs-item"
+          :class="{active: showingStickers}"
+          :title="$t('emoji.stickers')"
+          @click.prevent="toggleStickers"
+        >
+          <i class="icon-star" />
+        </span>
+      </span>
+    </div>
+    <div class="panel-body">
+      <div
+        class="emoji-content"
+        :class="{hidden: showingStickers}"
+      >
+        <div class="emoji-search">
+          <input
+            v-model="keyword"
+            type="text"
+            class="form-control"
+            :placeholder="$t('emoji.search_emoji')"
+          >
+        </div>
+        <div
+          ref="emoji-groups"
+          class="emoji-groups"
+          @scroll="scrolledGroup"
+        >
+          <div
+            v-for="group in emojisView"
+            :key="group.id"
+            class="emoji-group"
+          >
+            <h6
+              :ref="'group-' + group.id"
+              class="emoji-group-title"
+            >
+              {{ group.text }}
+            </h6>
+            <span
+              v-for="emoji in group.emojis"
+              :key="group.id + emoji.displayText"
+              :title="emoji.displayText"
+              class="emoji-item"
+              @click.stop.prevent="onEmoji(emoji)"
+            >
+              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              <img
+                v-else
+                :src="emoji.imageUrl"
+              >
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="showingStickers"
+        class="stickers-content"
+      >
+        <sticker-picker
+          @uploaded="onStickerUploaded"
+          @upload-failed="onStickerUploadFailed"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_picker.js"></script>
+<style lang="scss" src="./emoji_picker.scss"></style>