diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 9f751863..22324922 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -7,17 +7,23 @@ const Attachment = { 'nsfw', 'statusId' ], - data: () => ({ nsfwImage }), + data: () => ({ + nsfwImage, + showHidden: false + }), computed: { type () { return fileTypeService.fileType(this.attachment.mimetype) + }, + hidden () { + return this.nsfw && !this.showHidden } }, methods: { - showNsfw () { - this.$store.commit('setNsfw', { id: this.statusId, nsfw: false }) + toggleHidden () { + this.showHidden = !this.showHidden } } } -export default Attachment \ No newline at end of file +export default Attachment diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1e49cbeb..6bc0356a 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,15 +1,18 @@ <template> <div class="attachment"> - <a class="image-attachment" v-if="nsfw" v-on:click.prevent="showNsfw()"> + <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"></img> </a> + <div class="hider" v-if="nsfw && !hidden"> + <a href="#" @click.prevent="toggleHidden()">Hide</a> + </div> - <a class="image-attachment" v-if="type === 'image' && !nsfw" + <a class="image-attachment" v-if="type === 'image' && !hidden" :href="attachment.url" target="_blank"> <img :src="attachment.url"></img> </a> - <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video> + <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -34,12 +37,20 @@ display: flex; flex-wrap: wrap; .attachment { - flex: 1 0 30%; display: flex; margin: 0.2em; align-self: flex-start; + .hider { + position: absolute; + margin: 10px; + padding: 5px; + background: rgba(230,230,230,0.6); + border-radius: 0.5em; + font-weight: bold; + } + video { height: 100%; border: 1px solid;