commit: 7a5bed0684e0acae1ac69920f467ca8fdac7cff4
parent: e808df0285c8d8d6184f2933f8f6d07395039c10
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Thu, 9 Mar 2017 03:08:59 -0500
Merge branch 'feature/animated-favorite-and-boost' into 'develop'
add a spin animation to favorite and boost actions
See merge request !52
Diffstat:
4 files changed, 28 insertions(+), 6 deletions(-)
diff --git 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
@@ -1,6 +1,6 @@
<template>
<div>
- <i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i>
+ <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
<span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
</div>
</template>
@@ -10,6 +10,7 @@
<style lang='scss'>
.favorite-button {
cursor: pointer;
+ animation-duration: 0.6s;
&:hover {
color: orange;
}
@@ -17,4 +18,5 @@
.icon-star {
color: orange;
}
+
</style>
diff --git 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
@@ -11,12 +11,12 @@
@import '../../_variables.scss';
.icon-retweet {
cursor: pointer;
+ animation-duration: 0.6s;
&:hover {
color: $green;
}
}
.retweeted {
- cursor: auto;
color: $green;
}
</style>