2 files changed, 114 insertions, 0 deletions
diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js
new file mode 100644
index 00000000..a6dcded3
--- /dev/null
+++ b/src/components/sticker_picker/sticker_picker.js
@@ -0,0 +1,52 @@
+/* eslint-env browser */
+import statusPosterService from '../../services/status_poster/status_poster.service.js'
+import TabSwitcher from '../tab_switcher/tab_switcher.js'
+
+const StickerPicker = {
+  components: [
+    TabSwitcher
+  ],
+  data () {
+    return {
+      meta: {
+        stickers: []
+      },
+      path: ''
+    }
+  },
+  computed: {
+    pack () {
+      return this.$store.state.instance.stickers || []
+    }
+  },
+  methods: {
+    clear () {
+      this.meta = {
+        stickers: []
+      }
+    },
+    pick (sticker, name) {
+      const store = this.$store
+      // TODO remove this workaround by finding a way to bypass reuploads
+      fetch(sticker)
+        .then((res) => {
+          res.blob().then((blob) => {
+            var file = new File([blob], name, { mimetype: 'image/png' })
+            var formData = new FormData()
+            formData.append('file', file)
+            statusPosterService.uploadMedia({ store, formData })
+              .then((fileData) => {
+                this.$emit('uploaded', fileData)
+                this.clear()
+              }, (error) => {
+                console.warn("Can't attach sticker")
+                console.warn(error)
+                this.$emit('upload-failed', 'default')
+              })
+          })
+        })
+    }
+  }
+}
+
+export default StickerPicker
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
new file mode 100644
index 00000000..938204c8
--- /dev/null
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="sticker-picker"
+  >
+    <div
+      class="sticker-picker-panel"
+    >
+      <tab-switcher
+        :render-only-focused="true"
+      >
+        <div
+          v-for="stickerpack in pack"
+          :key="stickerpack.path"
+          :image-tooltip="stickerpack.meta.title"
+          :image="stickerpack.path + stickerpack.meta.tabIcon"
+          class="sticker-picker-content"
+        >
+          <div
+            v-for="sticker in stickerpack.meta.stickers"
+            :key="sticker"
+            class="sticker"
+            @click="pick(stickerpack.path + sticker, stickerpack.meta.title)"
+          >
+            <img
+              :src="stickerpack.path + sticker"
+            >
+          </div>
+        </div>
+      </tab-switcher>
+    </div>
+  </div>
+</template>
+
+<script src="./sticker_picker.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.sticker-picker {
+  .sticker-picker-panel {
+    display: inline-block;
+    width: 100%;
+    .sticker-picker-content {
+      max-height: 300px;
+      overflow-y: scroll;
+      overflow-x: auto;
+      .sticker {
+        display: inline-block;
+        width: 20%;
+        height: 20%;
+        img {
+          width: 100%;
+          &:hover {
+            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+          }
+        }
+      }
+    }
+  }
+}
+
+</style>