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'
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,
computed: {
computedClass: (pressable, pressed, big, muted, className) => {
@ -128,6 +117,17 @@
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>

View file

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

View file

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