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

Merge pull request #6428 from nocodb/feat/cloud-btn 

feat(nc-gui): cloud button ui update
pull/6447/head
Raju Udava 1 year ago committed by GitHub
parent
d46f7f1821 926b49d337
commit
53fad1916b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui/components/account/AppStore.vue
  2. 62
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  3. 21
      packages/nc-gui/components/general/JoinCloud.vue
  4. 17
      packages/nc-gui/components/workspace/Menu.vue

2
packages/nc-gui/components/account/AppStore.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2"> <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2 px-5">
<div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div> <div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div>
<div> <div>
<LazyDashboardSettingsAppStore /> <LazyDashboardSettingsAppStore />

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

@ -67,10 +67,8 @@ onMounted(() => {
<template> <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-2">
<NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64"> <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
<div <div class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10" data-testid="nc-sidebar-userinfo">
data-testid="nc-sidebar-userinfo"
>
<GeneralUserIcon /> <GeneralUserIcon />
<div class="flex truncate"> <div class="flex truncate">
{{ name ? name : user?.email }} {{ name ? name : user?.email }}
@ -82,28 +80,30 @@ onMounted(() => {
<NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout"> <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
<GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" /> <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
<GeneralIcon v-else icon="signout" class="menu-icon" /> <GeneralIcon v-else icon="signout" class="menu-icon" />
Log Out</NcMenuItem Log Out
> </NcMenuItem>
<NcDivider /> <NcDivider />
<a href="https://docs.nocodb.com" target="_blank" class="!underline-transparent"> <a href="https://docs.nocodb.com" target="_blank" class="!underline-transparent">
<NcMenuItem> <NcMenuItem>
<GeneralIcon icon="help" class="menu-icon" /> <GeneralIcon icon="help" class="menu-icon" />
Help Center</NcMenuItem Help Center
> </NcMenuItem>
</a> </a>
<NcDivider /> <NcDivider />
<a href="https://discord.gg/5RgZmkW" target="_blank" class="!underline-transparent"> <a href="https://discord.gg/5RgZmkW" target="_blank" class="!underline-transparent">
<NcMenuItem class="social-icon-wrapper" <NcMenuItem class="social-icon-wrapper">
><GeneralIcon class="social-icon" icon="discord" />Join our Discord</NcMenuItem <GeneralIcon class="social-icon" icon="discord" />Join our Discord
> </NcMenuItem>
</a> </a>
<a href="https://www.reddit.com/r/NocoDB" target="_blank" class="!underline-transparent"> <a href="https://www.reddit.com/r/NocoDB" target="_blank" class="!underline-transparent">
<NcMenuItem class="social-icon-wrapper"><GeneralIcon class="social-icon" icon="reddit" />/r/NocoDB</NcMenuItem> <NcMenuItem class="social-icon-wrapper">
<GeneralIcon class="social-icon" icon="reddit" />/r/NocoDB
</NcMenuItem>
</a> </a>
<a href="https://twitter.com/nocodb" target="_blank" class="!underline-transparent"> <a href="https://twitter.com/nocodb" target="_blank" class="!underline-transparent">
<NcMenuItem class="social-icon-wrapper group" <NcMenuItem class="social-icon-wrapper group">
><GeneralIcon class="text-gray-500 group-hover:text-gray-800" icon="twitter" />Twitter</NcMenuItem <GeneralIcon class="text-gray-500 group-hover:text-gray-800" icon="twitter" />Twitter
> </NcMenuItem>
</a> </a>
<template v-if="!appInfo.ee"> <template v-if="!appInfo.ee">
<NcDivider /> <NcDivider />
@ -114,7 +114,8 @@ onMounted(() => {
<div class="flex items-center text-gray-400 text-xs">(Community Translated)</div> <div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
<div class="flex-1" /> <div class="flex-1" />
<MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" /> <MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" />
</NcMenuItem> </NcMenuItem>
<template #content> <template #content>
@ -126,32 +127,31 @@ onMounted(() => {
</template> </template>
<NcDivider /> <NcDivider />
<NcMenuItem @click="onCopy" <NcMenuItem @click="onCopy">
><GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" /><GeneralIcon <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
v-else <GeneralIcon v-else icon="copy" class="menu-icon" />
icon="copy"
class="menu-icon"
/>
<template v-if="isAuthTokenCopied"> Copied Auth Token </template> <template v-if="isAuthTokenCopied"> Copied Auth Token </template>
<template v-else> Copy Auth Token </template> <template v-else> Copy Auth Token </template>
</NcMenuItem> </NcMenuItem>
<nuxt-link v-e="['c:navbar:user:email']" class="!no-underline" to="/account/profile"> <nuxt-link v-e="['c:navbar:user:email']" class="!no-underline" to="/account/profile">
<NcMenuItem><GeneralIcon icon="settings" class="menu-icon" /> Account Settings</NcMenuItem> <NcMenuItem>
<GeneralIcon icon="settings" class="menu-icon" /> Account Settings
</NcMenuItem>
</nuxt-link> </nuxt-link>
</NcMenu> </NcMenu>
</template> </template>
</NcDropdown> </NcDropdown>
<div v-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div> <div v-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 flex-wrap pt-1 truncate"> <div v-else-if="isMounted" class="flex flex-row justify-between pt-1 truncate">
<div class="flex items-start flex-row justify-center px-3 gap-2"> <div class="flex flex-wrap mb-1">
<GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large"> <GithubButton class="px-2 mb-1" href="https://github.com/nocodb/nocodb" data-icon="octicon-star"
data-show-count="true" data-size="large">
Star Star
</GithubButton> </GithubButton>
</div> <div>
<GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
<div class="flex items-start flex-row justify-center gap-2"> </div>
<GeneralJoinCloud class="color-transition px-3 text-gray-500 cursor-pointer select-none hover:text-accent" />
</div> </div>
</div> </div>
</div> </div>
@ -167,6 +167,7 @@ onMounted(() => {
:deep(.ant-popover-inner-content) { :deep(.ant-popover-inner-content) {
@apply !p-0 !rounded-md; @apply !p-0 !rounded-md;
} }
.social-icon { .social-icon {
// Make icon black and white // Make icon black and white
filter: grayscale(100%); filter: grayscale(100%);
@ -181,6 +182,7 @@ onMounted(() => {
.nc-icon { .nc-icon {
@apply mr-0.15; @apply mr-0.15;
} }
&:hover { &:hover {
.social-icon { .social-icon {
filter: none !important; filter: none !important;

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

@ -3,13 +3,18 @@ import { iconMap } from '#imports'
</script> </script>
<template> <template>
<a <a v-e="['c:navbar:join-cloud']" class="flex !no-underline"
v-e="['c:navbar:join-cloud']" href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url">
class="flex justify-center mx-2 rounded-lg items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 !text-current !no-underline !hover:(text-primary bg-primary bg-opacity-5)" <div
href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url" 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"
target="_blank" target="_blank">
> <component :is="iconMap.cloud" class="mt-[1px] text-black font-bold" />
<component :is="iconMap.cloud" class="mr-1" /> <div class="px-1 text-xs font-bold text-gray-800">Join</div>
Join NocoDB Cloud </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"
target="_blank">
<div class="px-1 text-xs font-semibold group-hover:text-[#0a69da] text-gray-900">NocoDB Cloud</div>
</div>
</a> </a>
</template> </template>

17
packages/nc-gui/components/workspace/Menu.vue
Unescape View File

@ -3,19 +3,12 @@
<template> <template>
<div class="flex flex-row flex-grow pl-0.5 pr-1 py-0.5 rounded-md w-full" style="max-width: calc(100% - 2.5rem)"> <div class="flex flex-row flex-grow pl-0.5 pr-1 py-0.5 rounded-md w-full" style="max-width: calc(100% - 2.5rem)">
<div class="flex-grow min-w-20"> <div class="flex-grow min-w-20">
<div <div data-testid="nc-workspace-menu"
data-testid="nc-workspace-menu" class="flex items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25 justify-center w-full">
class="flex items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25 justify-center w-full" <a class="transition-all duration-200 transform" href="https://github.com/nocodb/nocodb"
> target="_blank">
<a <img alt="NocoDB" src="~/assets/img/brand/nocodb-full.png" class="h-10" />
class="w-10 min-w-10 transition-all duration-200 p-1 transform"
href="https://github.com/nocodb/nocodb"
target="_blank"
>
<img width="25" alt="NocoDB" src="~/assets/img/icons/256x256.png" />
</a> </a>
<div class="font-semibold text-base">Nocodb</div>
<div class="flex flex-grow"></div> <div class="flex flex-grow"></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save