From 9e13d6ba79531ccf06f0203c2fdbfa7582e1472b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 23:34:19 +0200
Subject: [PATCH] feat(nc-gui): add ping animation to logo on click

---
 .../nc-gui/components/general/NocoIcon.vue    | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/general/NocoIcon.vue b/packages/nc-gui/components/general/NocoIcon.vue
index 1819b2c6a8..f8fdd70095 100644
--- a/packages/nc-gui/components/general/NocoIcon.vue
+++ b/packages/nc-gui/components/general/NocoIcon.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { autoResetRef, useThrottleFn } from '#imports'
+
 interface Props {
   width?: number
   height?: number
@@ -6,18 +8,33 @@ interface Props {
 }
 
 const { width = 90, height = 90, animate = false } = defineProps<Props>()
+
+const ping = autoResetRef(false, 1000)
+
+const onClick = useThrottleFn(() => {
+  ping.value = true
+}, 1000)
 </script>
 
 <template>
-  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
+  <div
+    :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }"
+    class="color-transition absolute rounded-lg pt-1 pl-1 -ml-1"
+    @click="onClick"
+  >
     <div class="relative">
       <img class="hidden dark:block" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
       <img class="dark:hidden" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
 
-      <template v-if="animate">
-        <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />
-        <div class="animate-ping bg-primary bg-opacity-50 rounded-full z-0 absolute bottom-0.9 right-1 h-5.5 w-5.5" />
-      </template>
+      <TransitionGroup name="layout" :duration="500">
+        <template v-if="animate || ping">
+          <div
+            :class="ping ? 'bg-primary bg-opacity-100' : 'animated-bg-gradient'"
+            class="rounded-full z-0 absolute bottom-[6.25px] right-[6.25px] h-4.25 w-4.25 transform scale-102"
+          />
+          <div class="animate-ping bg-primary bg-opacity-50 rounded-full z-0 absolute bottom-0.9 right-1 h-5.5 w-5.5" />
+        </template>
+      </TransitionGroup>
     </div>
   </div>
 </template>