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 1/2] 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>

From 5bb174ba4f9ca2c38a6b13c00a9252dca4bfa918 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Oct 2022 15:09:53 +0200
Subject: [PATCH 2/2] feat(nc-gui): make logo animation size responsive to logo
 size

---
 .../nc-gui/components/general/NocoIcon.vue    | 29 ++++++++++++++-----
 .../nc-gui/components/general/PoweredBy.vue   |  6 ++--
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/general/NocoIcon.vue b/packages/nc-gui/components/general/NocoIcon.vue
index f8fdd70095..32a95284c4 100644
--- a/packages/nc-gui/components/general/NocoIcon.vue
+++ b/packages/nc-gui/components/general/NocoIcon.vue
@@ -2,12 +2,11 @@
 import { autoResetRef, useThrottleFn } from '#imports'
 
 interface Props {
-  width?: number
-  height?: number
+  size?: number
   animate?: boolean
 }
 
-const { width = 90, height = 90, animate = false } = defineProps<Props>()
+const { size = 90, animate = false } = defineProps<Props>()
 
 const ping = autoResetRef(false, 1000)
 
@@ -18,21 +17,35 @@ const onClick = useThrottleFn(() => {
 
 <template>
   <div
-    :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }"
+    :style="{ left: `calc(50% - ${size / 2}px)`, top: `-${size / 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" />
+      <img class="hidden dark:block" :width="size" :height="size" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      <img class="dark:hidden" :width="size" :height="size" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
 
       <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"
+            :style="{
+              bottom: `${6.25 / (90 / size)}px`,
+              right: `${6.25 / (90 / size)}px`,
+              width: `${1.1 / (90 / size)}rem`,
+              height: `${1.1 / (90 / size)}rem`,
+            }"
+            class="rounded-full z-0 absolute transform scale-102"
+          />
+          <div
+            :style="{
+              bottom: `${0.225 / (90 / size)}rem`,
+              right: `${0.25 / (90 / size)}rem`,
+              width: `${1.375 / (90 / size)}rem`,
+              height: `${1.375 / (90 / size)}rem`,
+            }"
+            class="animate-ping bg-primary bg-opacity-50 rounded-full z-0 absolute"
           />
-          <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>
diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index 2173e43623..5ae00a4da0 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { openLink } from '#imports'
+import { openLink, useGlobal } from '#imports'
+
+const { isLoading } = useGlobal()
 </script>
 
 <template>
@@ -9,7 +11,7 @@ import { openLink } from '#imports'
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
     <span class="relative rounded">
-      <GeneralNocoIcon v-bind="$attrs" class="!relative !top-0" :width="32" :height="32" />
+      <GeneralNocoIcon v-bind="$attrs" :animate="isLoading" class="!relative !top-0" :size="32" />
     </span>
 
     <span>Powered by NocoDB</span>