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: 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(-)

(limited to 'src')

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;
-- 
cgit v1.2.3-70-g09d2


From 187c4a7d57fa359abc954b4fa9c570635fa149fd Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Fri, 2 Dec 2016 14:33:03 +0100
Subject: CSS fixes.

---
 src/App.scss                                 |  7 ++++++-
 src/App.vue                                  | 12 +++++++-----
 src/components/timeline/timeline.vue         |  7 -------
 src/components/user_profile/user_profile.vue |  7 -------
 4 files changed, 13 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/App.scss b/src/App.scss
index fd5e6c16..ced2d069 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -63,7 +63,7 @@ nav {
 
 }
 
-sidebar {
+.sidebar {
     flex: 1;
     flex-basis: 300px;
 }
@@ -255,3 +255,8 @@ nav {
 .fade-enter, .fade-leave-active {
   opacity: 0
 }
+
+.main {
+    flex: 2;
+    flex-basis: 500px;
+}
diff --git a/src/App.vue b/src/App.vue
index e46419e0..2cd6d079 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,14 +6,16 @@
       </div>
     </nav>
     <div class="container" id="content">
-      <sidebar>
+      <div class="sidebar">
         <user-panel></user-panel>
         <nav-panel></nav-panel>
         <notifications v-if="currentUser"></notifications>
-      </sidebar>
-      <transition name="fade">
-        <router-view></router-view>
-      </transition>
+      </div>
+      <div class="main">
+        <transition name="fade">
+          <router-view></router-view>
+        </transition>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index fef96e4e..7de3ffca 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -18,10 +18,3 @@
   </div>
 </template>
 <script src="./timeline.js"></script>
-
-<style>
- .timeline.panel {
-     flex: 2;
-     flex-basis: 500px;
- }
-</style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 767982c5..eaa5396d 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -5,10 +5,3 @@
 </template>
 
 <script src="./user_profile.js"></script>
-
-<style>
- .user-profile {
-   flex: 2;
-   flex-basis: 500px;
- }
-</style>
-- 
cgit v1.2.3-70-g09d2


From 01951d12518b0e3c62d26cc82dc79a4989d970e5 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Fri, 2 Dec 2016 14:42:01 +0100
Subject: Rename nsfw image.

---
 src/assets/nsfw.jpg                     | Bin 18315 -> 0 bytes
 src/assets/nsfw.png                     | Bin 0 -> 18166 bytes
 src/components/attachment/attachment.js |   2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 delete mode 100644 src/assets/nsfw.jpg
 create mode 100644 src/assets/nsfw.png

(limited to 'src')

diff --git a/src/assets/nsfw.jpg b/src/assets/nsfw.jpg
deleted file mode 100644
index 6ae4ffe9..00000000
Binary files a/src/assets/nsfw.jpg and /dev/null differ
diff --git a/src/assets/nsfw.png b/src/assets/nsfw.png
new file mode 100644
index 00000000..bb6556b4
Binary files /dev/null and b/src/assets/nsfw.png differ
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 22324922..c88497a2 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -1,4 +1,4 @@
-import nsfwImage from '../../assets/nsfw.jpg'
+import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const Attachment = {
-- 
cgit v1.2.3-70-g09d2


From 75caa21132ad6492146cda249b9357938ab283d5 Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Sun, 4 Dec 2016 16:28:07 +0100
Subject: Fixes issue #2

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 86632876..9c32e7cb 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -2,7 +2,7 @@
   <div class="status-el">
     <div v-if="retweet" class="media container retweet-info">
       <div class="media-left">
-        <i class='fa icon-retweet'></i>
+        <i class='fa icon-retweet retweeted'></i>
       </div>
       <div class="media-body">
         Retweeted by {{retweeter}}
-- 
cgit v1.2.3-70-g09d2


From 75fdc72e222dee612137e4521dab1e44191948bb Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Sun, 4 Dec 2016 18:30:00 +0100
Subject: Implements feature status delete Fixes issue #4

---
 src/_variables.scss                      |  1 +
 src/components/status/status.js          | 10 +++++++++-
 src/components/status/status.vue         | 14 +++++++++++++-
 src/modules/statuses.js                  | 11 +++++++++++
 src/services/api/api.service.js          |  9 +++++++++
 test/unit/specs/modules/statuses.spec.js |  5 +++++
 6 files changed, 48 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/_variables.scss b/src/_variables.scss
index c317fd32..d2b7065d 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -3,4 +3,5 @@ $main-background: white;
 $darkened-background: whitesmoke;
 $green: #0fa00f;
 $blue: #0095ff;
+$red: #ff0000;
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 0bf2ecde..8b2561cf 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -20,7 +20,9 @@ const Status = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
-    }
+    },
+    deleted () { return this.statusoid.deleted },
+    canDelete () { return this.statusoid.user.rights.delete_others_notice || this.statusoid.user.id == this.$store.state.users.currentUser.id }
   },
   components: {
     Attachment,
@@ -31,6 +33,12 @@ const Status = {
   methods: {
     toggleReplying () {
       this.replying = !this.replying
+    },
+    deleteStatus () {
+      const confirmed = confirm('Do you really want to delete this status?')
+      if (confirmed) {
+        this.$store.dispatch('deleteStatus', { id: this.status.id })
+      }
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 86632876..35b381ba 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el">
+  <div class="status-el" v-if="!status.deleted">
     <div v-if="retweet" class="media container retweet-info">
       <div class="media-left">
         <i class='fa icon-retweet'></i>
@@ -52,6 +52,11 @@
             </div>
             <retweet-button :status=status></retweet-button>
             <favorite-button :status=status></favorite-button>
+            <div v-if="canDelete">
+              <a href="#" v-on:click.prevent="deleteStatus">
+                <i class='fa icon-cancel delete-status'></i>
+              </a>
+            </div>
           </div>
 
           <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form>
@@ -125,4 +130,11 @@
  .status-el:last-child .status {
      border: none
  }
+
+ .icon-cancel,.delete-status {
+   cursor: pointer;
+   &:hover {
+    color: $red;
+   }
+ }
 </style>
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 7ce07c96..a5a0374e 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -45,6 +45,9 @@ export const prepareStatus = (status) => {
     status.nsfw = !!status.text.match(nsfwRegex)
   }
 
+  // Set deleted flag
+  status.deleted = false
+
   // To make the array reactive
   status.attachments = status.attachments || []
 
@@ -235,6 +238,10 @@ export const mutations = {
     const newStatus = find(state.allStatuses, status)
     newStatus.repeated = value
   },
+  setDeleted (state, { status }) {
+    const newStatus = find(state.allStatuses, status)
+    newStatus.deleted = true
+  },
   setLoading (state, { timeline, value }) {
     state.timelines[timeline].loading = value
   },
@@ -250,6 +257,10 @@ const statuses = {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
     },
+    deleteStatus ({ rootState, commit }, status) {
+      commit('setDeleted', { status })
+      apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
+    },
     favorite ({ rootState, commit }, status) {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: true })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 47895d3b..a78ab5c9 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -7,6 +7,7 @@ const FAVORITE_URL = '/api/favorites/create'
 const UNFAVORITE_URL = '/api/favorites/destroy'
 const RETWEET_URL = '/api/statuses/retweet'
 const STATUS_UPDATE_URL = '/api/statuses/update.json'
+const STATUS_DELETE_URL = '/api/statuses/destroy'
 const STATUS_URL = '/api/statuses/show'
 const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
 const CONVERSATION_URL = '/api/statusnet/conversation'
@@ -118,6 +119,13 @@ const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
   })
 }
 
+const deleteStatus = ({ id, credentials }) => {
+  return fetch(`${STATUS_DELETE_URL}/${id}.json`, {
+    headers: authHeaders(credentials),
+    method: 'POST'
+  })
+}
+
 const uploadMedia = ({formData, credentials}) => {
   return fetch(MEDIA_UPLOAD_URL, {
     body: formData,
@@ -139,6 +147,7 @@ const apiService = {
   unfavorite,
   retweet,
   postStatus,
+  deleteStatus,
   uploadMedia
 }
 
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index c9c1ad2c..5df962c3 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -44,6 +44,11 @@ describe('Statuses.prepareStatus', () => {
 
     expect(prepareStatus(nsfw).nsfw).to.eq(false)
   })
+
+  it('sets deleted flag to false', () => {
+    const aStatus = makeMockStatus({id: 1, text: 'Hello oniichan'})
+    expect(prepareStatus(aStatus).deleted).to.eq(false)
+  })
 })
 
 describe('Statuses.findMaxId', () => {
-- 
cgit v1.2.3-70-g09d2