|
|
|
@ -196,7 +196,7 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) =
|
|
|
|
|
// event.stopPropagation() |
|
|
|
|
// event.preventDefault() |
|
|
|
|
|
|
|
|
|
if (!isMobileMode.value || !isOpen.value) { |
|
|
|
|
if (!isMobileMode.value) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -222,12 +222,11 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) =
|
|
|
|
|
// console.log(sidebar.value?.contains(event.target as Node)) |
|
|
|
|
|
|
|
|
|
// 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') |
|
|
|
|
// toggle(false) |
|
|
|
|
// } |
|
|
|
|
toggle(false) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggle(!isOpen.value) |
|
|
|
|
// debugger |
|
|
|
|
// if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) { |
|
|
|
|
// if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) { |
|
|
|
@ -239,12 +238,12 @@ onMounted(() => {
|
|
|
|
|
toggle(false) |
|
|
|
|
toggleHasSidebar(true) |
|
|
|
|
// TODO: use useEventListener instead of onMounted and onBeforeUnmount |
|
|
|
|
document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
// document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
// document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
}) |
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
|
document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
// document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
// document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
onBeforeUnmount(reset) |
|
|
|
@ -293,16 +292,14 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const FOO_ON_OPEN_CLICK = () => { |
|
|
|
|
alert('FOO_ON_OPEN_CLICK') |
|
|
|
|
console.log('inside of FOO_ON_OPEN_CLICK') |
|
|
|
|
toggle(!isOpen) |
|
|
|
|
// toggle(!isOpen) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<NuxtLayout> |
|
|
|
|
<template #sidebar> |
|
|
|
|
<div>isOpen: {{ isOpen }}</div> |
|
|
|
|
<a-layout-sider |
|
|
|
|
ref="sidebar" |
|
|
|
|
:collapsed="!isOpen" |
|
|
|
@ -347,6 +344,292 @@ const FOO_ON_OPEN_CLICK = () => {
|
|
|
|
|
</a-tooltip> |
|
|
|
|
</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" /> |
|
|
|
|
<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)" /> |
|
|
|
|
|
|
|
|
|
<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 |
|
|
|
|
ref="toggleSideBarButton" |
|
|
|
|
class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2" |
|
|
|
|