Browse Source

feat(gui-v2): add `base` layout

pull/3023/head
braks 2 years ago
parent
commit
6a076ce363
  1. 215
      packages/nc-gui-v2/app.vue
  2. 2
      packages/nc-gui-v2/components.d.ts
  3. 4
      packages/nc-gui-v2/composables/useSidebar/index.ts
  4. 223
      packages/nc-gui-v2/layouts/base.vue
  5. 12
      packages/nc-gui-v2/layouts/default.vue
  6. 3
      packages/nc-gui-v2/plugins/state.ts

215
packages/nc-gui-v2/app.vue

@ -1,218 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { breakpointsTailwind } from '@vueuse/core' //
import { navigateTo } from '#app'
import { computed, ref, useBreakpoints, useGlobal, useProject, useRoute, useRouter, useSidebar } from '#imports'
/** get current breakpoints (for enabling sidebar) */
const breakpoints = useBreakpoints(breakpointsTailwind)
const { signOut, signedIn, isLoading, user } = useGlobal()
const { isOpen } = useSidebar({ isOpen: signedIn.value && breakpoints.isGreater('md') })
const { project } = useProject()
const router = useRouter()
const route = useRoute()
const sidebar = ref<HTMLDivElement>()
const globalSearch = ref('')
const email = computed(() => user.value?.email ?? '---')
const logout = () => {
signOut()
navigateTo('/signin')
}
</script> </script>
<template> <template>
<a-layout id="app-layout"> <NuxtPage />
<a-layout-sider
:collapsed="true"
width="50"
collapsed-width="0"
class="nc-sidebar-left !bg-primary h-full"
:trigger="null"
collapsible
theme="light"
>
<a-dropdown placement="bottom" :trigger="['click']">
<div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>
<template v-if="signedIn" #overlay>
<a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
<a-menu-item-group title="User Settings">
<a-menu-item key="email" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
<MdiAt class="mt-1 group-hover:text-success" />
&nbsp;
<span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
</nuxt-link>
</a-menu-item>
<a-menu-divider class="!m-0" />
<a-menu-item key="signout" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
<MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
<span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
{{ $t('general.signOut') }}
</span>
</div>
</a-menu-item>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
<a-dropdown :trigger="['contextmenu']" placement="right">
<div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')">
<MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
</div>
<template #overlay>
<a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
<a-menu-item-group>
<template #title>
<span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
{{ $t('objects.projects') }}
</span>
</template>
<a-menu-item class="active:(ring ring-pink-500)">
<div
v-t="['c:project:create:xcdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create')"
>
<MdiPlus class="text-lg group-hover:text-pink-500" />
{{ $t('activity.createProject') }}
</div>
</a-menu-item>
<a-menu-item class="rounded-b active:(ring ring-pink-500)">
<div
v-t="['c:project:create:extdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<a-tooltip placement="right">
<template v-if="project" #title>{{ project.title }}</template>
<div
:class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"
class="nc-sidebar-left-item"
@click="navigateTo(`/nc/${route.params.projectId}`)"
>
<MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
</div>
</a-tooltip>
</div>
</a-layout-sider>
<a-layout class="!flex-col">
<a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg">
<div id="header-start" class="w-[250px] flex items-center px-1 h-full" />
<div class="hidden flex justify-center">
<div v-show="isLoading" class="flex items-center gap-2 ml-3">
{{ $t('general.loading') }}
<MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
</div>
</div>
<div class="flex-1" />
<div v-if="signedIn" class="text-white">
<div class="flex items-center px-4 gap-4">
<a-tooltip placement="bottom">
<template #title> Go back </template>
<MaterialSymbolsArrowBackRounded
class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
@click="router.go(-1)"
/>
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>Go forward</template>
<MaterialSymbolsArrowForwardRounded
class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
@click="router.go(+1)"
/>
</a-tooltip>
<a-input
v-model:value="globalSearch"
class="nc-global-search group hover:ring active:ring-pink-500 focus:ring-pink-500 flex"
size="small"
placeholder="CMD + K"
>
<template #prefix>
<MdiMagnify class="transform text-gray-400 group-hover:(scale-105 text-pink-500)" />
</template>
</a-input>
</div>
</div>
<div class="flex-1" />
<a-tooltip placement="right">
<template #title> Switch language </template>
<div class="flex pr-4 items-center">
<GeneralLanguage class="cursor-pointer text-2xl" />
</div>
</a-tooltip>
</a-layout-header>
<div class="w-full h-full">
<NuxtPage />
</div>
</a-layout>
</a-layout>
</template> </template>
<style lang="scss" scoped>
.nc-sidebar-left {
:deep(.ant-layout-sider-children) {
@apply flex flex-col items-center;
}
.nc-sidebar-left-item {
@apply flex w-full justify-center items-center h-12 group p-2;
&.active {
@apply bg-pink-500 border-t-1 border-b-1;
}
}
}
:deep(.ant-dropdown-menu-item-group-title) {
@apply border-b-1;
}
:deep(.ant-dropdown-menu-item-group-list) {
@apply m-0;
}
.nc-global-search {
@apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
}
</style>

2
packages/nc-gui-v2/components.d.ts vendored

@ -90,9 +90,9 @@ declare module '@vue/runtime-core' {
MdiPlusIcon: typeof import('~icons/mdi/plus-icon')['default'] MdiPlusIcon: typeof import('~icons/mdi/plus-icon')['default']
MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default'] MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
MdiReload: typeof import('~icons/mdi/reload')['default'] MdiReload: typeof import('~icons/mdi/reload')['default']
MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default'] MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
MdiStore: typeof import('~icons/mdi/store')['default'] MdiStore: typeof import('~icons/mdi/store')['default']
MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
MdiTableBorder: typeof import('~icons/mdi/table-border')['default'] MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
MdiTrashCan: typeof import('~icons/mdi/trash-can')['default'] MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
MdiXml: typeof import('~icons/mdi/xml')['default'] MdiXml: typeof import('~icons/mdi/xml')['default']

4
packages/nc-gui-v2/composables/useSidebar/index.ts

@ -8,8 +8,10 @@ interface UseSidebarProps {
/** /**
* Injection state for sidebars * Injection state for sidebars
* *
* Use `provideSidebar` to provide the injection state on current component level (will affect all childrens injection) * Use `provideSidebar` to provide the injection state on current component level (will affect all children injections)
* Use `useSidebar` to use the injection state on current component level * Use `useSidebar` to use the injection state on current component level
*
* If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found
*/ */
const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => { const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
const [isOpen, toggle] = useToggle(props.isOpen ?? false) const [isOpen, toggle] = useToggle(props.isOpen ?? false)

223
packages/nc-gui-v2/layouts/base.vue

@ -0,0 +1,223 @@
<script lang="ts" setup>
import { breakpointsTailwind } from '@vueuse/core'
import { navigateTo } from '#app'
import { computed, ref, useBreakpoints, useGlobal, useProject, useRoute, useRouter, useSidebar } from '#imports'
/** get current breakpoints (for enabling sidebar) */
const breakpoints = useBreakpoints(breakpointsTailwind)
const { signOut, signedIn, isLoading, user } = useGlobal()
const { isOpen } = useSidebar({ isOpen: signedIn.value && breakpoints.isGreater('md') })
const { project } = useProject()
const router = useRouter()
const route = useRoute()
const sidebar = ref<HTMLDivElement>()
const globalSearch = ref('')
const email = computed(() => user.value?.email ?? '---')
const logout = () => {
signOut()
navigateTo('/signin')
}
</script>
<template>
<a-layout id="app-layout">
<!-- todo: mini sidebar on the left with navigational icons, disabled currently -->
<a-layout-sider
:collapsed="true"
width="50"
collapsed-width="0"
class="nc-sidebar-left !bg-primary h-full"
:trigger="null"
collapsible
theme="light"
>
<a-dropdown placement="bottom" :trigger="['click']">
<div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>
<template v-if="signedIn" #overlay>
<a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
<a-menu-item-group title="User Settings">
<a-menu-item key="email" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
<MdiAt class="mt-1 group-hover:text-success" />
&nbsp;
<span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
</nuxt-link>
</a-menu-item>
<a-menu-divider class="!m-0" />
<a-menu-item key="signout" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
<MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
<span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
{{ $t('general.signOut') }}
</span>
</div>
</a-menu-item>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
<a-dropdown :trigger="['contextmenu']" placement="right">
<div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')">
<MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
</div>
<template #overlay>
<a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
<a-menu-item-group>
<template #title>
<span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
{{ $t('objects.projects') }}
</span>
</template>
<a-menu-item class="active:(ring ring-pink-500)">
<div
v-t="['c:project:create:xcdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create')"
>
<MdiPlus class="text-lg group-hover:text-pink-500" />
{{ $t('activity.createProject') }}
</div>
</a-menu-item>
<a-menu-item class="rounded-b active:(ring ring-pink-500)">
<div
v-t="['c:project:create:extdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<a-tooltip placement="right">
<template v-if="project" #title>{{ project.title }}</template>
<div
:class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"
class="nc-sidebar-left-item"
@click="navigateTo(`/nc/${route.params.projectId}`)"
>
<MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
</div>
</a-tooltip>
</div>
</a-layout-sider>
<slot name="sidebar" />
<a-layout class="!flex-col">
<a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg">
<slot name="header-start" />
<div id="header-start" class="w-[250px] flex items-center px-1 h-full" />
<div class="hidden flex justify-center">
<div v-show="isLoading" class="flex items-center gap-2 ml-3">
{{ $t('general.loading') }}
<MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
</div>
</div>
<div class="flex-1" />
<div v-if="signedIn" class="text-white">
<div class="flex items-center px-4 gap-4">
<a-tooltip placement="bottom">
<template #title> Go back </template>
<MaterialSymbolsArrowBackRounded
class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
@click="router.go(-1)"
/>
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>Go forward</template>
<MaterialSymbolsArrowForwardRounded
class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
@click="router.go(+1)"
/>
</a-tooltip>
<a-input
v-model:value="globalSearch"
class="nc-global-search group hover:ring active:ring-pink-500 focus:ring-pink-500 flex"
size="small"
placeholder="CMD + K"
>
<template #prefix>
<MdiMagnify class="transform text-gray-400 group-hover:(scale-105 text-pink-500)" />
</template>
</a-input>
</div>
</div>
<div class="flex-1" />
<a-tooltip placement="right">
<template #title> Switch language </template>
<div class="flex pr-4 items-center">
<GeneralLanguage class="cursor-pointer text-2xl" />
</div>
</a-tooltip>
</a-layout-header>
<div class="w-full h-full">
<slot />
</div>
</a-layout>
</a-layout>
</template>
<style lang="scss" scoped>
.nc-sidebar-left {
:deep(.ant-layout-sider-children) {
@apply flex flex-col items-center;
}
.nc-sidebar-left-item {
@apply flex w-full justify-center items-center h-12 group p-2;
&.active {
@apply bg-pink-500 border-t-1 border-b-1;
}
}
}
:deep(.ant-dropdown-menu-item-group-title) {
@apply border-b-1;
}
:deep(.ant-dropdown-menu-item-group-list) {
@apply m-0;
}
.nc-global-search {
@apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
}
</style>

12
packages/nc-gui-v2/layouts/default.vue

@ -18,11 +18,13 @@ export default {
</script> </script>
<template> <template>
<a-layout-content> <NuxtLayout name="base">
<teleport v-if="$slots.sidebar" to="#sidebar"> <template #sidebar>
<slot name="sidebar" /> <slot name="sidebar" />
</teleport> </template>
<slot /> <a-layout-content>
</a-layout-content> <slot />
</a-layout-content>
</NuxtLayout>
</template> </template>

3
packages/nc-gui-v2/plugins/state.ts

@ -1,6 +1,5 @@
import { breakpointsTailwind } from '@vueuse/core'
import { defineNuxtPlugin } from '#app' import { defineNuxtPlugin } from '#app'
import { useBreakpoints, useDark, useGlobal, useSidebar, watch } from '#imports' import { useDark, useGlobal, watch } from '#imports'
/** /**
* Initialize global state and watches for changes * Initialize global state and watches for changes

Loading…
Cancel
Save