Browse Source

refactor(nc-gui): update logo animation

pull/3883/head
braks 2 years ago
parent
commit
b85a24b88c
  1. 2
      packages/nc-gui/assets/style.scss
  2. 14
      packages/nc-gui/components/general/NocoIcon.vue
  3. 5
      packages/nc-gui/pages/forgot-password.vue
  4. 2
      packages/nc-gui/pages/index/index/[projectId].vue
  5. 2
      packages/nc-gui/pages/index/index/create-external.vue
  6. 2
      packages/nc-gui/pages/index/index/create.vue
  7. 5
      packages/nc-gui/pages/signin.vue
  8. 5
      packages/nc-gui/pages/signup/[[token]].vue

2
packages/nc-gui/assets/style.scss

@ -100,7 +100,7 @@ a {
}
.animated-bg-gradient {
background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #9ee59e);
background: linear-gradient(122deg, #6f3381, #ec4899, #fedfe1, #4351e8);
background-size: 800% 800%;
-webkit-animation: gradient 4s ease infinite;

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

@ -2,13 +2,21 @@
interface Props {
width?: number
height?: number
animate?: boolean
}
const { width = 90, height = 90 } = defineProps<Props>()
const { width = 90, height = 90, animate = false } = defineProps<Props>()
</script>
<template>
<div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg">
<img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
<div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
<div class="relative">
<img :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>
</div>
</div>
</template>

5
packages/nc-gui/pages/forgot-password.vue

@ -55,10 +55,7 @@ function resetError() {
<div
class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon
class="color-transition hover:(ring ring-accent)"
:class="[isLoading ? 'animated-bg-gradient' : '']"
/>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<div class="self-center flex flex-col justify-center items-center text-center gap-2">
<h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>

2
packages/nc-gui/pages/index/index/[projectId].vue

@ -68,7 +68,7 @@ onMounted(async () => {
<div
class="update-project bg-white relative flex-auto flex flex-col justify-center gap-2 p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<div
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

2
packages/nc-gui/pages/index/index/create-external.vue

@ -337,7 +337,7 @@ onMounted(async () => {
<div
class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<div
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

2
packages/nc-gui/pages/index/index/create.vue

@ -66,7 +66,7 @@ onMounted(async () => {
<div
class="create bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<div
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

5
packages/nc-gui/pages/signin.vue

@ -67,10 +67,7 @@ function resetError() {
<div
class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon
class="color-transition hover:(ring ring-accent)"
:class="[isLoading ? 'animated-bg-gradient' : '']"
/>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>

5
packages/nc-gui/pages/signup/[[token]].vue

@ -85,10 +85,7 @@ function resetError() {
<div
class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon
class="color-transition hover:(ring ring-accent)"
:class="[isLoading ? 'animated-bg-gradient' : '']"
/>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<h1 class="prose-2xl font-bold self-center my-4">
{{ $t('general.signUp') }}

Loading…
Cancel
Save