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

WIP

pull/4898/head
Daniel Spaude 2 years ago
parent
f40a2979bb
commit
686116c824
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
1 changed files with 13 additions and 296 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. 309
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

309
packages/nc-gui/pages/[projectType]/[projectId]/index.vue
Unescape View File

@ -196,7 +196,7 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) =
// event.stopPropagation() // event.stopPropagation()
// event.preventDefault() // event.preventDefault()
if (!isMobileMode.value) { if (!isMobileMode.value || !isOpen.value) {
return return
} }
@ -222,11 +222,12 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) =
// console.log(sidebar.value?.contains(event.target as Node)) // console.log(sidebar.value?.contains(event.target as Node))
// debugger // debugger
if (event.target !== toggleSideBarButton.value && !toggleSideBarButton.value?.contains(event.target as Node)) { // if (event.target !== toggleSideBarButton.value && !toggleSideBarButton.value?.contains(event.target as Node)) {
// alert('now') // alert('now')
toggle(false) // toggle(false)
} // }
toggle(!isOpen.value)
// debugger // debugger
// if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) { // if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) {
// if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) { // if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) {
@ -238,12 +239,12 @@ onMounted(() => {
toggle(false) toggle(false)
toggleHasSidebar(true) toggleHasSidebar(true)
// TODO: use useEventListener instead of onMounted and onBeforeUnmount // TODO: use useEventListener instead of onMounted and onBeforeUnmount
// document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
// document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
// document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
// document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
}) })
onBeforeUnmount(reset) onBeforeUnmount(reset)
@ -292,14 +293,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
}) })
const FOO_ON_OPEN_CLICK = () => { const FOO_ON_OPEN_CLICK = () => {
alert('FOO_ON_OPEN_CLICK')
console.log('inside of FOO_ON_OPEN_CLICK') console.log('inside of FOO_ON_OPEN_CLICK')
// toggle(!isOpen) toggle(!isOpen)
} }
</script> </script>
<template> <template>
<NuxtLayout> <NuxtLayout>
<template #sidebar> <template #sidebar>
<div>isOpen: {{ isOpen }}</div>
<a-layout-sider <a-layout-sider
ref="sidebar" ref="sidebar"
:collapsed="!isOpen" :collapsed="!isOpen"
@ -344,292 +347,6 @@ const FOO_ON_OPEN_CLICK = () => {
</a-tooltip> </a-tooltip>
</a> </a>
<a-dropdown
class="h-full min-w-0 flex-1"
:trigger="['click']"
placement="bottom"
overlay-class-name="nc-dropdown-project-menu"
>
<div
:style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
:class="[isOpen ? '' : 'justify-center']"
data-testid="nc-project-menu"
class="group cursor-pointer flex gap-1 items-center nc-project-menu overflow-hidden"
>
<template v-if="isOpen">
<a-tooltip v-if="project.title?.length > 12" placement="bottom">
<div class="text-md font-semibold truncate">{{ project.title }}</div>
<template #title>
<div class="text-sm">{{ project.title }}</div>
</template>
</a-tooltip>
<div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div>
<MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
</template>
<template v-else>
<MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
</template>
</div>
<template #overlay>
<a-menu class="!ml-1 !w-[300px] !text-sm">
<a-menu-item-group>
<template #title>
<div class="group select-none flex items-center gap-4 py-1">
<MdiFolder class="group-hover:text-accent text-xl" />
<div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
<GeneralTruncateText>{{ project.title }}</GeneralTruncateText>
</div>
<div v-if="!isSharedBase" class="flex items-center gap-1">
<div class="group-hover:(!text-primary)">ID:</div>
<div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
</div>
</div>
</div>
</template>
<template v-if="!isSharedBase">
<!-- Copy Project Info -->
<a-menu-item key="copy">
<div
v-e="['c:navbar:user:copy-proj-info']"
class="nc-project-menu-item group"
@click.stop="copyProjectInfo"
>
<MdiContentCopy class="group-hover:text-accent" />
{{ $t('activity.account.projInfo') }}
</div>
</a-menu-item>
<a-menu-divider />
<!-- Swagger: Rest APIs -->
<a-menu-item key="api">
<div
v-if="isUIAllowed('apiDocs') && !isMobileMode"
v-e="['e:api-docs']"
class="nc-project-menu-item group"
@click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
>
<MdiApi class="group-hover:text-accent" />
{{ $t('activity.account.swagger') }}
</div>
</a-menu-item>
<!-- Copy Auth Token -->
<a-menu-item key="copy">
<div
v-if="!isMobileMode"
v-e="['a:navbar:user:copy-auth-token']"
class="nc-project-menu-item group"
@click.stop="copyAuthToken"
>
<MdiScriptTextKeyOutline class="group-hover:text-accent" />
{{ $t('activity.account.authToken') }}
</div>
</a-menu-item>
<a-menu-divider />
<!-- Team & Settings -->
<a-menu-item key="teamAndSettings">
<div
v-if="isUIAllowed('settings') && !isMobileMode"
v-e="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'teamAndAuth')"
>
<MdiCog class="group-hover:text-accent" />
{{ $t('title.teamAndSettings') }}
</div>
</a-menu-item>
<!-- Mobile Mode -->
<a-menu-item key="mobile-mode">
<div
v-e="['e:set-mobile-mode']"
class="nc-project-menu-item group"
@click.stop="setIsMobileMode(!isMobileMode)"
>
<MaterialSymbolsMobileFriendly class="group-hover:text-accent" />
Toggle Mobile Mode
<!-- {{ $t('activity.account.swagger') }} -->
<!-- TODO: use i18n here -->
</div>
</a-menu-item>
<!-- Theme -->
<template v-if="isUIAllowed('projectTheme')">
<a-sub-menu key="theme">
<template #title>
<div class="nc-project-menu-item group">
<ClarityImageLine class="group-hover:text-accent" />
{{ $t('activity.account.themes') }}
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<LazyGeneralColorPicker
:model-value="theme.primaryColor"
:colors="projectThemeColors"
:row-size="9"
:advanced="false"
class="rounded-t"
@input="handleThemeColor('swatch', $event)"
/>
<!-- Custom Theme -->
<a-sub-menu key="theme-2">
<template #title>
<div class="nc-project-menu-item group">
{{ $t('labels.customTheme') }}
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
<!-- Primary Color -->
<template #expandIcon></template>
<a-sub-menu key="pick-primary">
<template #title>
<div class="nc-project-menu-item group">
<ClarityColorPickerSolid class="group-hover:text-accent" />
{{ $t('labels.primaryColor') }}
</div>
</template>
<template #expandIcon></template>
<LazyGeneralChromeWrapper @input="handleThemeColor('primary', $event)" />
</a-sub-menu>
<!-- Accent Color -->
<a-sub-menu key="pick-accent">
<template #title>
<div class="nc-project-menu-item group">
<ClarityColorPickerSolid class="group-hover:text-accent" />
{{ $t('labels.accentColor') }}
</div>
</template>
<template #expandIcon></template>
<LazyGeneralChromeWrapper @input="handleThemeColor('accent', $event)" />
</a-sub-menu>
</a-sub-menu>
</a-sub-menu>
</template>
<a-menu-divider />
<!-- Preview As -->
<a-sub-menu v-if="isUIAllowed('previewAs') && !isMobileMode" key="preview-as">
<template #title>
<div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
<MdiFileEyeOutline class="group-hover:text-accent" />
{{ $t('activity.previewAs') }}
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<LazyGeneralPreviewAs />
</a-sub-menu>
</template>
<!-- Language -->
<a-sub-menu
key="language"
class="lang-menu !py-0"
popup-class-name="scrollbar-thin-dull min-w-50 max-h-90vh !overflow-auto"
>
<template #title>
<div class="nc-project-menu-item group">
<MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
{{ $t('labels.language') }}
<div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<LazyGeneralLanguageMenu />
</a-sub-menu>
<!-- Account -->
<template v-if="signedIn && !isSharedBase">
<a-sub-menu key="account">
<template #title>
<div class="nc-project-menu-item group">
<MdiAccount class="group-hover:text-accent" />
{{ $t('labels.account') }}
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<a-menu-item key="0" class="!rounded-t">
<nuxt-link
v-e="['c:navbar:user:email']"
class="nc-project-menu-item group !no-underline"
to="/account/users"
>
<MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
<div class="prose-sm group-hover:text-primary">
<div>Account</div>
<div class="text-xs text-gray-500">{{ email }}</div>
</div>
</nuxt-link>
</a-menu-item>
<a-menu-item key="1" class="!rounded-b">
<div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:(!text-accent)" />&nbsp;
<span class="prose-sm nc-user-menu-signout">
{{ $t('general.signOut') }}
</span>
</div>
</a-menu-item>
</a-sub-menu>
</template>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<div <div
ref="toggleSideBarButton" ref="toggleSideBarButton"
class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2" class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"

Write Preview
Loading…
Cancel
Save