clean up icon animations (#203)

This commit is contained in:
Nolan Lawson 2018-04-21 08:32:40 -07:00 committed by GitHub
parent b37f371cdb
commit 36b8f15ba6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 24 deletions

View file

@ -105,17 +105,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
export default { export default {
oncreate () {
this.observe('animation', animation => {
let { reduceMotion } = this.store.get()
if (!animation || reduceMotion) {
return
}
let svg = this.refs.svg
let animations = animation.map(({properties, options}) => svg.animate(properties, options))
animations.forEach(anim => anim.play())
})
},
store: () => store, store: () => store,
computed: { computed: {
computedClass: (pressable, pressed, big, muted, className) => { computedClass: (pressable, pressed, big, muted, className) => {
@ -128,6 +117,17 @@
className className
) )
} }
},
methods: {
animate (animation) {
let { reduceMotion } = this.store.get()
if (!animation || reduceMotion) {
return
}
let svg = this.refs.svg
let animations = animation.map(({properties, options}) => svg.animate(properties, options))
animations.forEach(anim => anim.play())
}
} }
} }
</script> </script>

View file

@ -6,7 +6,7 @@
pressed="{{following}}" pressed="{{following}}"
big="true" big="true"
on:click="onFollowButtonClick(event)" on:click="onFollowButtonClick(event)"
animation="{{animateFollowButton && followButtonAnimation}}" ref:icon
/> />
</div> </div>
<style> <style>
@ -38,7 +38,6 @@
followRequested, followRequested,
blocking blocking
} = this.get() } = this.get()
this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
if (blocking) { // unblock if (blocking) { // unblock
await setAccountBlocked(accountId, false) await setAccountBlocked(accountId, false)
} else { // follow/unfollow } else { // follow/unfollow
@ -46,16 +45,14 @@
if (!account.locked) { // be optimistic, show the user that it succeeded if (!account.locked) { // be optimistic, show the user that it succeeded
this.set({overrideFollowing: newFollowingValue}) this.set({overrideFollowing: newFollowingValue})
} }
if (newFollowingValue) {
this.refs.icon.animate(FOLLOW_BUTTON_ANIMATION)
}
await setAccountFollowed(accountId, newFollowingValue) await setAccountFollowed(accountId, newFollowingValue)
} }
this.set({animateFollowButton: false}) // let animation play next time
} }
}, },
store: () => store, store: () => store,
data: () => ({
followButtonAnimation: FOLLOW_BUTTON_ANIMATION
}),
computed: { computed: {
accountId: (account) => account.id, accountId: (account) => account.id,
following: (relationship, overrideFollowing) => { following: (relationship, overrideFollowing) => {

View file

@ -15,7 +15,7 @@
disabled="{{reblogDisabled}}" disabled="{{reblogDisabled}}"
href="{{reblogIcon}}" href="{{reblogIcon}}"
delegateKey="{{reblogKey}}" delegateKey="{{reblogKey}}"
animation="{{animateReblog && reblogAnimation}}" ref:reblogIcon
/> />
<IconButton <IconButton
label="Favorite" label="Favorite"
@ -23,7 +23,7 @@
pressed="{{favorited}}" pressed="{{favorited}}"
href="#fa-star" href="#fa-star"
delegateKey="{{favoriteKey}}" delegateKey="{{favoriteKey}}"
animation="{{animateFavorite && favoriteAnimation}}" ref:favoriteIcon
/> />
<IconButton <IconButton
label="Show more options" label="Show more options"
@ -77,15 +77,21 @@
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
let { originalStatusId, favorited } = this.get() let { originalStatusId, favorited } = this.get()
/* no await */ setFavorited(originalStatusId, !favorited) let newFavoritedValue = !favorited
this.set({animateFavorite: !favorited}) /* no await */ setFavorited(originalStatusId, newFavoritedValue)
if (newFavoritedValue) {
this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
}
}, },
onReblogClick (e) { onReblogClick (e) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
let { originalStatusId, reblogged } = this.get() let { originalStatusId, reblogged } = this.get()
/* no await */ setReblogged(originalStatusId, !reblogged) let newRebloggedValue = !reblogged
this.set({animateReblog: !reblogged}) /* no await */ setReblogged(originalStatusId, newRebloggedValue)
if (newRebloggedValue) {
this.refs.reblogIcon.animate(REBLOG_ANIMATION)
}
}, },
onReplyClick (e) { onReplyClick (e) {
e.preventDefault() e.preventDefault()