From 6e608dd2dd5a9d28c384b7fb368e76c477685ffd Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Fri, 2 Dec 2016 14:22:42 +0100
Subject: [PATCH] Add re-hiding of nsfw images.

---
 src/components/attachment/attachment.js  | 14 ++++++++++----
 src/components/attachment/attachment.vue | 19 +++++++++++++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

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;