Browse Source

feat(nc-gui): add ping animation to logo on click

pull/4058/head
braks 2 years ago
parent
commit
9e13d6ba79
  1. 27
      packages/nc-gui/components/general/NocoIcon.vue

27
packages/nc-gui/components/general/NocoIcon.vue

@ -1,4 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { autoResetRef, useThrottleFn } from '#imports'
interface Props { interface Props {
width?: number width?: number
height?: number height?: number
@ -6,18 +8,33 @@ interface Props {
} }
const { width = 90, height = 90, animate = false } = defineProps<Props>() const { width = 90, height = 90, animate = false } = defineProps<Props>()
const ping = autoResetRef(false, 1000)
const onClick = useThrottleFn(() => {
ping.value = true
}, 1000)
</script> </script>
<template> <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"> <div class="relative">
<img class="hidden dark:block" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> <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="dark:hidden" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
<template v-if="animate"> <TransitionGroup name="layout" :duration="500">
<div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" /> <template v-if="animate || ping">
<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" /> <div
</template> :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>
</div> </div>
</template> </template>

Loading…
Cancel
Save