Browse Source

chore(gui-v2): update layout structure

pull/3023/head
braks 2 years ago
parent
commit
c207d0fbd8
  1. 6
      packages/nc-gui-v2/app.vue
  2. 2
      packages/nc-gui-v2/components/cell/attachment/index.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  4. 49
      packages/nc-gui-v2/layouts/base.vue
  5. 8
      packages/nc-gui-v2/layouts/default.vue
  6. 24
      packages/nc-gui-v2/pages/nc/[projectId]/index.vue
  7. 2
      packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
  8. 1
      packages/nc-gui-v2/tsconfig.json

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

@ -1,7 +1,5 @@
<script lang="ts" setup>
//
</script>
<template>
<NuxtLayout name="base">
<NuxtPage />
</NuxtLayout>
</template>

2
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -60,7 +60,7 @@ onKeyDown('Escape', () => {
/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
onMounted(() => {
if (typeof document !== 'undefined') {
dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
dropZoneRef.value = document.querySelector(`td[data-col="${column.value.id}"]`) as HTMLTableDataCellElement
}
})
</script>

2
packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@ -78,7 +78,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
<template #title> Toggle sidebar </template>
<div
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-9 left-[-1rem] shadow bg-gray-100 rounded-full"
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
>
<MaterialSymbolsChevronRightRounded
v-if="sidebarOpen"

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

@ -6,7 +6,7 @@ import { computed, useBreakpoints, useGlobal, useProject, useRoute } from '#impo
/** get current breakpoints (for enabling sidebar) */
const breakpoints = useBreakpoints(breakpointsTailwind)
const { signOut, isLoading, user } = useGlobal()
const { signOut, signedIn, isLoading, user } = useGlobal()
const { project } = useProject()
@ -21,31 +21,62 @@ const logout = () => {
</script>
<template>
<a-layout>
<slot name="sidebar" />
<a-layout id="nc-app" has-sider>
<div id="nc-sidebar-left" />
<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" />
<a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
<div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>
<div class="hidden flex justify-center">
<div class="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" />
<a-tooltip placement="right">
<a-tooltip placement="left">
<template #title> Switch language </template>
<div class="flex pr-4 items-center">
<GeneralLanguage class="cursor-pointer text-2xl" />
</div>
</a-tooltip>
<template v-if="signedIn">
<a-dropdown :trigger="['click']">
<MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
<template #overlay>
<a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
<a-menu-item key="0" 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="1" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
<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>
</template>
</a-dropdown>
</template>
</a-layout-header>
<div class="w-full h-full">

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

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

24
packages/nc-gui-v2/pages/nc/[projectId]/index.vue

@ -42,17 +42,23 @@ await loadTables()
<a-layout-sider
:collapsed="!isOpen"
width="250"
collapsed-width="0"
class="relative shadow-md h-full"
collapsed-width="50"
class="relative shadow-md h-full z-1"
:trigger="null"
collapsible
theme="light"
>
<a-dropdown :trigger="['click']">
<div class="group cursor-pointer w-full flex gap-4 items-center">
<div class="text-xl truncate">{{ project.title }}</div>
<div style="height: var(--header-height)" class="border-b-1 group cursor-pointer w-full flex gap-4 items-center px-3">
<template v-if="isOpen">
<div class="text-xl font-semibold truncate">{{ project.title }}</div>
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
</template>
<template v-else>
<MdiFolder class="text-pink-500 cursor-pointer transform hover:scale-105 text-2xl" />
</template>
</div>
<template #overlay>
@ -78,6 +84,8 @@ await loadTables()
</a>
</a-menu-item>
<a-menu-divider />
<a-menu-item key="teamAndAuth">
<div
v-if="isUIAllowed('settings')"
@ -126,6 +134,8 @@ await loadTables()
</div>
</a-menu-item>
<a-menu-divider />
<a-sub-menu key="preview-as">
<template #title>
<div class="nc-project-menu-item group">
@ -145,8 +155,7 @@ await loadTables()
<template #title> Toggle table list </template>
<div
:class="[isOpen ? 'right-[-0.75rem]' : 'right-[-1.75rem]']"
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-9 shadow bg-gray-100 rounded-full"
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
>
<MaterialSymbolsChevronLeftRounded
v-if="isOpen"
@ -161,7 +170,8 @@ await loadTables()
/>
</div>
</a-tooltip>
<DashboardTreeView />
<DashboardTreeView v-show="isOpen" />
</a-layout-sider>
</template>

2
packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

@ -34,7 +34,7 @@ function openQuickImportDialog(type: string) {
</script>
<template>
<div class="nc-container pt-[9px]">
<div class="h-full w-full nc-container pt-[9px]">
<div class="h-full w-full flex flex-col">
<div class="px-2">
<a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">

1
packages/nc-gui-v2/tsconfig.json

@ -11,6 +11,7 @@
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"types": [
"@nuxt/types",
"@intlify/vite-plugin-vue-i18n/client",
"vue-i18n",
"unplugin-icons/types/vue",

Loading…
Cancel
Save