Browse Source

feat: add join cloud button

Signed-off-by: Pranav C <pranavxc@gmail.com>
refactor/ui-updates
Pranav C 2 years ago
parent
commit
b456641ef1
  1. BIN
      packages/nc-gui/assets/img/noco-banner.png
  2. 23
      packages/nc-gui/components/dashboard/TreeView.vue
  3. 31
      packages/nc-gui/components/general/JoinCloudCard.vue
  4. 16
      packages/nc-gui/components/general/SponsorsButton.vue
  5. 2
      packages/nc-gui/layouts/base.vue
  6. 2
      packages/nc-gui/pages/index/index.vue

BIN
packages/nc-gui/assets/img/noco-banner.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

23
packages/nc-gui/components/dashboard/TreeView.vue

@ -253,7 +253,9 @@ const onSearchCloseIconClick = () => {
>
<MdiPlus />
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">
{{ $t('tooltip.addTable') }}
</span>
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
@ -433,15 +435,16 @@ const onSearchCloseIconClick = () => {
<GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
<GithubButton
class="ml-2 py-1"
href="https://github.com/nocodb/nocodb"
data-icon="octicon-star"
data-show-count="true"
data-size="large"
>
Star
</GithubButton>
<general-flipping-card class="ml-2 py-1 min-h-[36px]" :triggers="['click', { duration: 60000 }]">
<template #front>
<GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
Star
</GithubButton>
</template>
<template #back>
<LazyGeneralSponsorsButton ghost type="primary" />
</template>
</general-flipping-card>
</div>
</div>
</template>

31
packages/nc-gui/components/general/JoinCloudCard.vue

@ -0,0 +1,31 @@
<template>
<a-card>
<template #cover>
<img class="max-h-[180px] !rounded-t-lg" alt="cover" src="~/assets/img/noco-banner.png" />
</template>
<a-card-meta>
<template #title>
<span v-if="!nav" class="text-xl pb-4"> Join NocoDB Cloud! </span>
</template>
</a-card-meta>
<div v-if="!nav" class="py-5 text-sm">
Register for an early preview of our FREE cloud offering. We aim to equip every business with our cloud solution which is
fair priced rather than <em>per</em> user <em>per</em> month.
</div>
<div class="flex justify-center">
<a-button
v-e="['c:navbar:join-cloud', { home: true }]"
class="flex items-center space-x-1 cursor-pointer pl-3 py-1.5 !text-current !no-underline !hover:(text-primary bg-primary bg-opacity-5) flex-shrink"
href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
target="_blank"
>
<span class="mr-1">🚀</span>
Join Now
</a-button>
</div>
</a-card>
</template>

16
packages/nc-gui/components/general/SponsorsButton.vue

@ -0,0 +1,16 @@
<script lang="ts" setup>
defineProps<{ type?: string; ghost?: boolean }>()
</script>
<template>
<div class="flex items-center">
<nuxt-link href="https://github.com/sponsors/nocodb" target="_blank" class="!h-[28px] leading-normal">
<a-button :ghost="ghost" :type="type" class="!shadow rounded !h-[28px]" size="small">
<div class="flex items-center text-xs font-weight-bold">
<mdi-cards-heart class="text-red-500 mr-2" />
{{ $t('activity.sponsorUs') }}
</div>
</a-button>
</nuxt-link>
</div>
</template>

2
packages/nc-gui/layouts/base.vue

@ -68,6 +68,8 @@ hooks.hook('page:finish', () => {
<LazyGeneralReleaseInfo />
<LazyGeneralSponsorsButton class="mr-4" />
<a-tooltip placement="bottom" :mouse-enter-delay="1">
<template #title> Switch language</template>

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

@ -13,7 +13,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
>
<div class="hidden xl:(flex)">
<div>
<LazyGeneralSponsors />
<LazyGeneralJoinCloudCard />
</div>
</div>

Loading…
Cancel
Save