diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index 4ee3890f..466e9b84 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -1,5 +1,10 @@
const FavoriteButton = {
- props: [ 'status' ],
+ props: ['status'],
+ data () {
+ return {
+ animated: false
+ }
+ },
methods: {
favorite () {
if (!this.status.favorited) {
@@ -7,13 +12,18 @@ const FavoriteButton = {
} else {
this.$store.dispatch('unfavorite', {id: this.status.id})
}
+ this.animated = true
+ setTimeout(() => {
+ this.animated = false
+ }, 500)
}
},
computed: {
classes () {
return {
'icon-star-empty': !this.status.favorited,
- 'icon-star': this.status.favorited
+ 'icon-star': this.status.favorited,
+ 'animate-spin': this.animated
}
}
}
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index fd53b505..0abece31 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,6 +1,6 @@
-
+
{{status.fave_num}}
@@ -10,6 +10,7 @@
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index e7318dc5..2280f315 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,16 +1,26 @@
const RetweetButton = {
- props: [ 'status' ],
+ props: ['status'],
+ data () {
+ return {
+ animated: false
+ }
+ },
methods: {
retweet () {
if (!this.status.repeated) {
this.$store.dispatch('retweet', {id: this.status.id})
}
+ this.animated = true
+ setTimeout(() => {
+ this.animated = false
+ }, 500)
}
},
computed: {
classes () {
return {
- 'retweeted': this.status.repeated
+ 'retweeted': this.status.repeated,
+ 'animate-spin': this.animated
}
}
}
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 9b2f5c7b..d923c5c4 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -11,12 +11,12 @@
@import '../../_variables.scss';
.icon-retweet {
cursor: pointer;
+ animation-duration: 0.6s;
&:hover {
color: $green;
}
}
.retweeted {
- cursor: auto;
color: $green;
}