Browse Source

fix(nc-gui): corrected spacing

pull/6428/head
reenphygeorge 1 year ago
parent
commit
0972dedec5
  1. 60
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  2. 2
      packages/nc-gui/components/general/JoinCloud.vue

60
packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@ -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,35 +127,34 @@ 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 mb-1"> <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-3 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>
<div class="flex items-start flex-row justify-center gap-2">
<GeneralJoinCloud class="color-transition px-3 text-gray-500 cursor-pointer select-none hover:text-accent" /> <GeneralJoinCloud class="color-transition px-3 text-gray-500 cursor-pointer select-none hover:text-accent" />
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -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;

2
packages/nc-gui/components/general/JoinCloud.vue

@ -13,7 +13,7 @@ import { iconMap } from '#imports'
<div <div
class="group flex justify-center items-center rounded-r-sm w-full cursor-pointer px-2 py-1 text-primary border-r-1 border-b-1 border-t-1 border-gray-300 m-0" class="group flex justify-center items-center rounded-r-sm w-full cursor-pointer px-2 py-1 text-primary border-r-1 border-b-1 border-t-1 border-gray-300 m-0"
target="_blank"> target="_blank">
<div class="px-1 text-xs font-bold text-gray-700">Join Cloud</div> <div class="px-1 text-xs font-bold text-gray-700">Join NocoDB Cloud</div>
</div> </div>
</a> </a>
</template> </template>

Loading…
Cancel
Save