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

fix: Added new join cloud btn

pull/7072/head
Muhammed Mustafa 1 year ago
parent
984714b916
commit
8a43c440c7
3 changed files with 98 additions and 37 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. 23
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  2. 97
      packages/nc-gui/components/general/JoinCloud.vue
  3. 1
      packages/nc-gui/lang/en.json

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

@ -79,7 +79,10 @@ 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">
<div v-if="!appInfo.ee && isMounted && !isMobileMode" class="flex flex-row w-full justify-between pt-0.5 truncate">
<GeneralJoinCloud />
</div>
<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,23 +208,7 @@ 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>
<div v-else-if="appInfo.ee" class="text-gray-500 text-xs pl-3 mt-1">© 2023 NocoDB. Inc</div>
</div>
</template>

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

@ -1,23 +1,96 @@
<script lang="ts" setup>
import { iconMap } from '#imports'
</script>
<script lang="ts" setup></script>
<template>
<div class="flex flex-row items-center w-full bg-white rounded-lg border-1 shadow-sm mb-0.5 overflow-hidden">
<a
v-e="['c:navbar:join-cloud']"
class="flex !no-underline"
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"
>
<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"
>
<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 class="px-1 font-semibold text-gray-700 prose-sm" style="line-height: 1.3125rem">
{{ $t('labels.joinCloudForFree') }}
</div>
</a>
<a-tooltip overlay-class-name="nc-join-cloud-tooltip">
<template #title>
<div class="w-68 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">
<div class="self-stretch justify-start items-center gap-3 inline-flex">
<div class="text-slate-800 text-2xl font-bold leading-9">Business</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 leading-normal">$</div>
<div class="text-gray-500 text-base font-bold line-through leading-normal">99 Onwards</div>
<div class="text-neutral-900 text-4xl font-bold leading-10">Free</div>
</div>
<div class="self-stretch text-gray-500 text-base font-bold leading-normal">/ month / workspace</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"
class="self-stretch px-4 bg-white rounded-lg shadow border border-gray-200 justify-center items-center gap-2 inline-flex"
>
<div class="px-1 text-xs font-semibold group-hover:text-[#0a69da] text-gray-900">NocoDB Cloud</div>
<div class="text-gray-700 text-sm font-semibold leading-tight">Start for Free</div>
</div>
<div class="self-stretch text-center text-gray-500 text-xs font-medium leading-none">No credit card required</div>
<div class="self-stretch opacity-0 text-center text-gray-500 text-xs font-medium leading-none">
No credit card required
</div>
<div class="self-stretch text-slate-600 text-sm font-semibold leading-tight">Everything in Team plus:</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 Included</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 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">Folders for views</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>
</a>
</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