commit: 6e608dd2dd5a9d28c384b7fb368e76c477685ffd
parent: df51d088142476c71272e175f4b486b97fd33b91
Author: Roger Braun <roger@rogerbraun.net>
Date: Fri, 2 Dec 2016 14:22:42 +0100
Add re-hiding of nsfw images.
Diffstat:
2 files changed, 25 insertions(+), 9 deletions(-)
diff --git 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
@@ -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;