From 1c75feae601b753f1dd30a15c49794c9de1a05fb Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Wed, 7 Dec 2016 21:50:46 +0100
Subject: [PATCH] Move delete button for status into a component
---
src/components/delete_button/delete_button.js | 16 +++++++++++++++
.../delete_button/delete_button.vue | 20 +++++++++++++++++++
src/components/status/status.js | 12 +++--------
src/components/status/status.vue | 13 +-----------
4 files changed, 40 insertions(+), 21 deletions(-)
create mode 100644 src/components/delete_button/delete_button.js
create mode 100644 src/components/delete_button/delete_button.vue
diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
new file mode 100644
index 00000000..5f824899
--- /dev/null
+++ b/src/components/delete_button/delete_button.js
@@ -0,0 +1,16 @@
+const DeleteButton = {
+ props: [ 'status' ],
+ methods: {
+ deleteStatus () {
+ const confirmed = confirm('Do you really want to delete this status?')
+ if (confirmed) {
+ this.$store.dispatch('deleteStatus', { id: this.status.id })
+ }
+ }
+ },
+ computed: {
+ canDelete () { return this.status.user.rights.delete_others_notice || this.status.user.id == this.$store.state.users.currentUser.id }
+ }
+}
+
+export default DeleteButton
diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
new file mode 100644
index 00000000..304f8a63
--- /dev/null
+++ b/src/components/delete_button/delete_button.vue
@@ -0,0 +1,20 @@
+<template>
+ <div v-if="canDelete">
+ <a href="#" v-on:click.prevent="deleteStatus()">
+ <i class='fa icon-cancel delete-status'></i>
+ </a>
+ </div>
+</template>
+
+<script src="./delete_button.js" ></script>
+
+<style lang='scss'>
+ @import '../../_variables.scss';
+
+ .icon-cancel,.delete-status {
+ cursor: pointer;
+ &:hover {
+ color: $red;
+ }
+ }
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8b2561cf..27911478 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,6 +1,7 @@
import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
+import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
const Status = {
@@ -20,25 +21,18 @@ 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,
FavoriteButton,
RetweetButton,
+ DeleteButton,
PostStatusForm
},
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 6b9bca5b..42499407 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -52,11 +52,7 @@
</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>
+ <delete-button :status=status></delete-button>
</div>
<post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form>
@@ -130,11 +126,4 @@
.status-el:last-child .status {
border: none
}
-
- .icon-cancel,.delete-status {
- cursor: pointer;
- &:hover {
- color: $red;
- }
- }
</style>