github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #7072 from nocodb/nc-fix/join-cloud-btn 

fix: Added new join cloud btn
pull/7160/head
Raju Udava 12 months ago committed by GitHub
parent
593aab8303 21e803e64b
commit
5b1a84e872
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  2. 106
      packages/nc-gui/components/general/JoinCloud.vue
  3. 1
      packages/nc-gui/lang/en.json

21
packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
Unescape View File

@ -79,7 +79,7 @@ onMounted(() => {
</script>
<template>
<div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-2">
<div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-1">
<NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
<div
class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
@ -205,22 +205,9 @@ onMounted(() => {
</NcDropdown>
<template v-if="isMobileMode"></template>
<div v-else-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div>
<div v-else-if="isMounted" class="flex flex-row justify-between pt-1 truncate">
<div class="flex flex-wrap mb-1">
<GithubButton
class="px-2 mb-1"
href="https://github.com/nocodb/nocodb"
data-icon="octicon-star"
data-show-count="true"
data-size="large"
>
Star
</GithubButton>
<div>
<GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
</div>
</div>
<div v-else-if="appInfo.ee" class="text-gray-500 text-xs pl-3 mt-1">© 2023 NocoDB. Inc</div>
<div v-else class="flex flex-row w-full justify-between pt-0.5 truncate">
<GeneralJoinCloud />
</div>
</div>
</template>

106
packages/nc-gui/components/general/JoinCloud.vue
Unescape View File

@ -1,23 +1,91 @@
<script lang="ts" setup>
import { iconMap } from '#imports'
</script>
<script lang="ts" setup></script>
<template>
<a
v-e="['c:navbar:join-cloud']"
class="flex !no-underline"
href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
>
<div
class="flex justify-center items-center rounded-l-[3px] w-full cursor-pointer px-2 py-1 !text-current !no-underline text-primary border-1 border-[#cdd1d6] bg-[#EFF2F6] hover:bg-[#e9ebef] m-0"
<div class="flex flex-row items-center w-full bg-white rounded-lg border-1 border-brand-500 shadow-sm mb-0.5 overflow-hidden">
<a
v-e="['c:navbar:join-cloud']"
class="flex flex-grow !no-underline items-center justify-center border-r-1 h-full hover:bg-gray-100"
href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
>
<component :is="iconMap.cloud" class="mt-[1px] text-black font-bold" />
<div class="px-1 text-xs font-bold text-gray-800">{{ $t('general.join') }}</div>
</div>
<div
class="group flex justify-center items-center rounded-r-[3px] w-full cursor-pointer px-1 py-1 text-primary border-r-1 border-b-1 border-t-1 border-[#cdd1d6] m-0"
>
<div class="px-1 text-xs font-semibold group-hover:text-[#0a69da] text-gray-900">NocoDB Cloud</div>
</div>
</a>
<div class="px-1 text-gray-500 prose-sm" style="line-height: 1.3125rem">Try NocoDB Cloud</div>
</a>
<a-tooltip overlay-class-name="nc-join-cloud-tooltip">
<template #title>
<div class="w-72 bg-transparent overflow-hidden rounded-3xl shadow border border-zinc-100">
<div class="p-6 bg-white flex-col justify-start items-center gap-4 inline-flex pb-7 w-full">
<div class="self-stretch justify-start items-center gap-3 inline-flex">
<div class="text-slate-800 text-lg font-semibold leading-9">NocoDB Cloud</div>
<div class="px-2 py-1 bg-brand-50 rounded-lg justify-center items-center gap-2 flex">
<div class="text-brand-500 text-sm font-medium leading-tight">Usage based</div>
</div>
</div>
<div class="self-stretch justify-start items-center gap-2 inline-flex">
<div class="text-gray-500 text-base font-bold line-through leading-normal">
$ 99
<span class="font-thin text-gray-500"> Onwards </span>
</div>
<div class="text-neutral-900 text-4xl font-bold leading-10">Free</div>
</div>
<div class="self-stretch text-gray-500 text-base leading-normal">/ month / workspace</div>
<a href="https://app.nocodb.com/#/signin" target="_blank" class="!no-underline">
<NcButton class="text-gray-700 text-base font-semibold leading-tight py-4 w-full">Start for Free</NcButton>
</a>
<div class="self-stretch text-center text-gray-500 text-xs font-medium leading-none mb-4">
No credit card required
</div>
<div class="flex flex-col items-start w-full">
<div class="self-stretch text-gray-500 text-base font-semibold leading-tight mb-2">Includes</div>
<div class="self-stretch justify-between items-center inline-flex">
<div class="justify-end items-center gap-3 flex">
<GeneralIcon icon="check" class="text-brand-500" />
<div class="text-brand-500 text-lg font-bold leading-normal">20 Users</div>
</div>
</div>
</div>
<div class="self-stretch justify-between items-center inline-flex">
<div class="justify-start items-center gap-3 flex">
<GeneralIcon icon="check" class="text-brand-500" />
<div class="text-slate-800 text-sm font-semibold leading-tight">300k rows / workspace</div>
</div>
</div>
<div class="self-stretch justify-between items-center inline-flex">
<div class="justify-start items-center gap-3 flex">
<GeneralIcon icon="check" class="text-brand-500" />
<div class="text-slate-800 text-sm font-semibold leading-tight">25 GB+ storage</div>
</div>
</div>
<div class="self-stretch justify-between items-center inline-flex">
<div class="justify-start items-center gap-3 flex">
<GeneralIcon icon="check" class="text-brand-500" />
<div class="text-slate-800 text-sm font-semibold leading-tight">APIs : 10+ requests / second</div>
</div>
</div>
<div class="self-stretch justify-start items-center gap-3 inline-flex">
<GeneralIcon icon="check" class="text-brand-500" />
<div class="text-slate-800 text-sm font-semibold leading-tight">Support for External Database</div>
</div>
</div>
</div>
</template>
<NcButton type="text" size="small" class="!rounded-l-none !rounded-r-lg">
<GeneralIcon icon="help" class="!text-lg -mt-0.5 text-gray-700" />
</NcButton>
</a-tooltip>
</div>
</template>
<style lang="scss">
.nc-join-cloud-tooltip {
.ant-tooltip-inner {
@apply !bg-transparent !p-0 !text-gray-700 rounded-3xl;
}
.ant-tooltip-arrow-content {
@apply !bg-white;
}
}
</style>

1
packages/nc-gui/lang/en.json
Unescape View File

@ -581,6 +581,7 @@
"childTable": "Child table",
"childColumn": "Child field",
"childField": "Child field",
"joinCloudForFree": "Join Cloud for Free",
"linkToAnotherRecord": "Link to another record",
"links": "Links",
"onUpdate": "On Update",

Write Preview
Loading…
Cancel
Save