Compare commits
No commits in common. "6baf0ec3392d8e1a740afcc5d99d203de16d9e9e" and "f246611aa2350d45db2d140badfd522153b04c82" have entirely different histories.
6baf0ec339
...
f246611aa2
4 changed files with 11 additions and 9 deletions
|
@ -62,6 +62,7 @@ export default {
|
||||||
'extra',
|
'extra',
|
||||||
'status',
|
'status',
|
||||||
'funcArg',
|
'funcArg',
|
||||||
|
'animationState',
|
||||||
'getClass',
|
'getClass',
|
||||||
'getComponent',
|
'getComponent',
|
||||||
'doAction',
|
'doAction',
|
||||||
|
@ -72,9 +73,6 @@ export default {
|
||||||
EmojiPicker,
|
EmojiPicker,
|
||||||
Popover
|
Popover
|
||||||
},
|
},
|
||||||
data: () => ({
|
|
||||||
animationState: false
|
|
||||||
}),
|
|
||||||
computed: {
|
computed: {
|
||||||
buttonClass () {
|
buttonClass () {
|
||||||
return [
|
return [
|
||||||
|
@ -118,11 +116,7 @@ export default {
|
||||||
if (button.name === 'emoji') {
|
if (button.name === 'emoji') {
|
||||||
this.$refs.picker.showPicker()
|
this.$refs.picker.showPicker()
|
||||||
} else {
|
} else {
|
||||||
this.animationState = true
|
|
||||||
this.getComponent(button) === 'button' && this.doAction(button)
|
this.getComponent(button) === 'button' && this.doAction(button)
|
||||||
setTimeout(() => {
|
|
||||||
this.animationState = false
|
|
||||||
}, 500)
|
|
||||||
close()
|
close()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,8 +19,7 @@
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110"
|
class="fa-scale-110"
|
||||||
:icon="button.icon(funcArg)"
|
:icon="button.icon(funcArg)"
|
||||||
:spin="!extra && button.animated?.() && animationState"
|
:spin="!extra && button.animated?.() && animationState[button.name]"
|
||||||
style="--fa-animation-duration: 750ms;"
|
|
||||||
fixed-width
|
fixed-width
|
||||||
/>
|
/>
|
||||||
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
|
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
|
||||||
|
|
|
@ -21,6 +21,11 @@ const StatusActionButtons = {
|
||||||
emits: ['toggleReplying'],
|
emits: ['toggleReplying'],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
Popover,
|
||||||
|
animationState: {
|
||||||
|
retweet: false,
|
||||||
|
favorite: false
|
||||||
|
},
|
||||||
showPin: false,
|
showPin: false,
|
||||||
showingConfirmDialog: false,
|
showingConfirmDialog: false,
|
||||||
currentConfirmTitle: '',
|
currentConfirmTitle: '',
|
||||||
|
@ -94,9 +99,11 @@ const StatusActionButtons = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
doActionReal (button) {
|
doActionReal (button) {
|
||||||
|
this.animationState[button.name] = true
|
||||||
button.action(this.funcArg)
|
button.action(this.funcArg)
|
||||||
.then(() => this.$emit('onSuccess'))
|
.then(() => this.$emit('onSuccess'))
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
.catch(err => this.$emit('onError', err.error.error))
|
||||||
|
.finally(() => setTimeout(() => { this.animationState[button.name] = false }))
|
||||||
},
|
},
|
||||||
onExtraClose () {
|
onExtraClose () {
|
||||||
this.showPin = false
|
this.showPin = false
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
:funcArg="funcArg"
|
:funcArg="funcArg"
|
||||||
:get-class="getClass"
|
:get-class="getClass"
|
||||||
:get-component="getComponent"
|
:get-component="getComponent"
|
||||||
|
:animation-state="animationState"
|
||||||
:close="() => {}"
|
:close="() => {}"
|
||||||
:do-action="doAction"
|
:do-action="doAction"
|
||||||
/>
|
/>
|
||||||
|
@ -83,6 +84,7 @@
|
||||||
:funcArg="funcArg"
|
:funcArg="funcArg"
|
||||||
:get-class="getClass"
|
:get-class="getClass"
|
||||||
:get-component="getComponent"
|
:get-component="getComponent"
|
||||||
|
:animation-state="animationState"
|
||||||
:close="close"
|
:close="close"
|
||||||
:do-action="doAction"
|
:do-action="doAction"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Add table
Reference in a new issue