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