pleroma-fe

commit: 797259cc9df220ab8136679b1d33e9bce67a087c
parent b8288d7cc4311b9815f68811707d35b1bf035669
Author: Henry Jameson <me@hjkos.com>
Date:   Mon, 20 Jan 2025 01:58:17 +0200

animation fix

Diffstat:
M
src/components/status_action_buttons/action_button.js
8
+++++++-
M
src/components/status_action_buttons/action_button.vue
3
++-
M
src/components/status_action_buttons/status_action_buttons.js
7
-------
M
src/components/status_action_buttons/status_action_buttons.vue
2
--

4 files changed, 9 insertions(+), 11 deletions(-)
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
@@ -62,7 +62,6 @@ export default {
     'extra',
     'status',
     'funcArg',
-    'animationState',
     'getClass',
     'getComponent',
     'doAction',
@@ -73,6 +72,9 @@ export default {
     EmojiPicker,
     Popover
   },
+  data: () => ({
+    animationState: false
+  }),
   computed: {
     buttonClass () {
       return [
@@ -116,7 +118,11 @@ export default {
       if (button.name === 'emoji') {
         this.$refs.picker.showPicker()
       } else {
+        this.animationState = true
         this.getComponent(button) === 'button' && this.doAction(button)
+        setTimeout(() => {
+          this.animationState = false
+        }, 500)
         close()
       }
     }
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
@@ -19,7 +19,8 @@
         <FAIcon
           class="fa-scale-110"
           :icon="button.icon(funcArg)"
-          :spin="!extra && button.animated?.() && animationState[button.name]"
+          :spin="!extra && button.animated?.() && animationState"
+          style="--fa-animation-duration: 750ms;"
           fixed-width
         />
         <template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
@@ -21,11 +21,6 @@ const StatusActionButtons = {
   emits: ['toggleReplying'],
   data () {
     return {
-      Popover,
-      animationState: {
-        retweet: false,
-        favorite: false
-      },
       showPin: false,
       showingConfirmDialog: false,
       currentConfirmTitle: '',
@@ -99,11 +94,9 @@ const StatusActionButtons = {
       }
     },
     doActionReal (button) {
-      this.animationState[button.name] = true
       button.action(this.funcArg)
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
-        .finally(() => setTimeout(() => { this.animationState[button.name] = false }))
     },
     onExtraClose () {
       this.showPin = false
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
@@ -15,7 +15,6 @@
           :funcArg="funcArg"
           :get-class="getClass"
           :get-component="getComponent"
-          :animation-state="animationState"
           :close="() => {}"
           :do-action="doAction"
         />
@@ -84,7 +83,6 @@
                 :funcArg="funcArg"
                 :get-class="getClass"
                 :get-component="getComponent"
-                :animation-state="animationState"
                 :close="close"
                 :do-action="doAction"
               />