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/_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/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 9f751863..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 = {
@@ -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;
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..6b9bca5b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,8 +1,8 @@
<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>
+ <i class='fa icon-retweet retweeted'></i>
</div>
<div class="media-body">
Retweeted by {{retweeter}}
@@ -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/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>
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index f4bffebf..aab198d8 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -54,6 +54,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 || []
@@ -261,6 +264,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
},
@@ -276,6 +283,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 deeeb477..6c048372 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', () => {