From 15133c276b2a4de666e3da6f55073d1cf5b8aec8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 22 Mar 2018 20:18:17 -0700
Subject: [PATCH] add animation for following someone

---
 routes/_components/AccountProfile.html | 29 ++++++++++++++++----------
 routes/_static/animations.js           | 14 +++++++++++++
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/routes/_components/AccountProfile.html b/routes/_components/AccountProfile.html
index 8568e1ce..92815dc3 100644
--- a/routes/_components/AccountProfile.html
+++ b/routes/_components/AccountProfile.html
@@ -30,6 +30,7 @@
             pressed="{{following}}"
             big="true"
             on:click="onFollowButtonClick()"
+            animation="{{animateFollowButton && followButtonAnimation}}"
           />
         {{/if}}
       </div>
@@ -189,8 +190,25 @@
   import { store } from '../_store/store'
   import { setAccountFollowed } from '../_actions/follow'
   import { database } from '../_database/database'
+  import { FOLLOW_BUTTON_ANIMATION } from '../_static/animations'
 
   export default {
+    methods: {
+      async onFollowButtonClick() {
+        let accountId = this.get('profile').id
+        let instanceName = this.store.get('currentInstance')
+        let following = this.get('following')
+        let followRequested = this.get('followRequested')
+        this.set({animateFollowButton: true})
+        await setAccountFollowed(accountId, !(following || followRequested))
+        let relationship = await database.getRelationship(instanceName, accountId)
+        this.set({relationship})
+      }
+    },
+    store: () => store,
+    data: () => ({
+      followButtonAnimation: FOLLOW_BUTTON_ANIMATION
+    }),
     computed: {
       headerIsMissing: (profile) => profile.header.endsWith('missing.png'),
       note: (profile) => profile.note,
@@ -222,17 +240,6 @@
         }
       }
     },
-    methods: {
-      async onFollowButtonClick() {
-        let accountId = this.get('profile').id
-        let instanceName = this.store.get('currentInstance')
-        let following = this.get('following')
-        let followRequested = this.get('followRequested')
-        await setAccountFollowed(accountId, !(following || followRequested))
-        this.set({relationship: await database.getRelationship(instanceName, accountId)})
-      }
-    },
-    store: () => store,
     components: {
       IconButton,
       ExternalLink,
diff --git a/routes/_static/animations.js b/routes/_static/animations.js
index 4fb2a809..40eb76c8 100644
--- a/routes/_static/animations.js
+++ b/routes/_static/animations.js
@@ -23,3 +23,17 @@ export const FAVORITE_ANIMATION = [
 ]
 
 export const REBLOG_ANIMATION = FAVORITE_ANIMATION
+
+export const FOLLOW_BUTTON_ANIMATION = [
+  {
+    properties: [
+      {transform: 'scale(1)'},
+      {transform: 'scale(2)'},
+      {transform: 'scale(1)'}
+    ],
+    options: {
+      duration: 400,
+      easing: 'ease-in-out'
+    }
+  }
+]