Squash to avoid storing commits with stickers in it to avoid possible copyright problems and excess storage space. --hjfix/no-extra-buttons
parent
28f777cb8a
commit
fa6210872f
@ -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
|
@ -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>
|
Loading…
Reference in new issue