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

refactor(gui-v2): replace v-app with ant-layout

pull/2722/head
braks 2 years ago
parent
bddbff77b5
commit
30df144320
4 changed files with 91 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      packages/nc-gui-v2/app.vue
  2. 2
      packages/nc-gui-v2/components.d.ts
  3. 6
      packages/nc-gui-v2/layouts/default.vue
  4. 99
      packages/nc-gui-v2/pages/index/index.vue

55
packages/nc-gui-v2/app.vue
Unescape View File

@ -14,39 +14,48 @@ const signOut = () => {
}
const toggleSidebar = useToggle($state.sidebarOpen)
const sidebarOpen = computed({
get: () => $state.sidebarOpen.value ?? true,
set: (val) => toggleSidebar(val),
})
</script>
<template>
<a-layout>
<a-layout-header class="flex !bg-primary items-center text-white">
<div class="flex items-center flex-1">
<a-layout-header class="flex !bg-primary items-center text-white !px-4">
<MaterialSymbolsMenu
v-if="$state.signedIn.value"
class="text-xl cursor-pointer"
@click="toggleSidebar(!$state.sidebarOpen.value)"
/>
<div class="flex-1" />
<div class="ml-4 flex items-center flex-1">
<div class="flex items-center gap-2">
<img width="35" src="~/assets/img/icons/512x512-trans.png" />
<span class="prose-xl" @click="navigateTo('/')">NocoDB</span>
</div>
<!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading
<span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
{{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
</span>
<span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
{{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
</span>
todo: replace shortkey?
<span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
-->
todo: replace shortkey?
<span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
-->
</div>
<div class="flex-1" />
<div class="flex justify-end gap-4">
<general-color-mode-switcher v-model="$state.darkMode.value" />
<general-language class="mr-3" />
<MaterialSymbolsMenu
v-if="$state.signedIn.value"
class="block text-xl cursor-pointer xl:(hidden)"
@click="toggleSidebar"
/>
<template v-if="$state.signedIn.value">
<a-dropdown :trigger="['click']">
<MdiDotsVertical class="md:text-xl cursor-pointer" @click.prevent />
@ -62,7 +71,7 @@ const toggleSidebar = useToggle($state.sidebarOpen)
<a-menu-divider class="!m-0" />
<a-menu-item class="!rounded" key="1">
<a-menu-item key="1" class="!rounded">
<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">{{ $t('general.signOut') }}</span>
@ -75,6 +84,20 @@ const toggleSidebar = useToggle($state.sidebarOpen)
</div>
</a-layout-header>
<NuxtPage />
<a-layout>
<a-layout-sider
v-model:collapsed="sidebarOpen"
width="300"
breakpoint="md"
collapsed-width="0"
class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
:trigger="null"
collapsible
>
<div id="sidebar" class="w-full h-full" />
</a-layout-sider>
<NuxtPage />
</a-layout>
</a-layout>
</template>

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

@ -11,9 +11,11 @@ declare module '@vue/runtime-core' {
ALayout: typeof import('ant-design-vue/es')['Layout']
ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ATable: typeof import('ant-design-vue/es')['Table']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

6
packages/nc-gui-v2/layouts/default.vue
Unescape View File

@ -19,9 +19,9 @@ export default {
<template>
<a-layout-content>
<slot name="sidebar">
<div id="sidebar" />
</slot>
<teleport v-if="$slots.sidebar" to="#sidebar">
<slot name="sidebar" />
</teleport>
<slot />
</a-layout-content>

99
packages/nc-gui-v2/pages/index/index.vue
Unescape View File

@ -40,64 +40,59 @@ const activePage = $ref(navDrawerOptions[0].title)
<template>
<NuxtLayout>
<template #sidebar>
<v-navigation-drawer v-model="$state.sidebarOpen.value" :border="0">
<div class="flex flex-col h-full">
<div class="flex p-4">
<v-menu class="select-none">
<template #activator="{ props }">
<div
class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
@click="props.onClick"
>
<MdiPlus class="text-primary dark:(!text-white) text-2xl" />
{{ $t('title.newProj') }}
</div>
</template>
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/create')"
>
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
</div>
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/create-external')"
>
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</v-list>
</v-menu>
</div>
<div class="advance-menu flex-1">
<v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'secondary' : 'primary'">
<!-- todo: v-list-item-group doesn't seem to work with vuetify 3 yet ... -->
<v-list-item
v-for="item in navDrawerOptions"
:key="item.title"
class="flex items-center gap-4 !rounded-r-lg"
:value="item.title"
<div class="flex flex-col h-full">
<div class="flex p-4">
<v-menu class="select-none">
<template #activator="{ props }">
<div
class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
@click="props.onClick"
>
<component :is="item.icon" />
<MdiPlus class="text-primary dark:(!text-white) text-2xl" />
{{ $t('title.newProj') }}
</div>
</template>
<span class="font-semibold">
{{ item.title }}
</span>
</v-list-item>
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/create')"
>
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
</div>
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/create-external')"
>
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</v-list>
</div>
</v-menu>
</div>
<v-divider />
<a-menu class="mx-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
<a-menu-item
v-for="(option, index) in navDrawerOptions"
:key="index"
class="f!rounded-r-lg"
@click="activePage = option.title"
>
<div class="flex items-center gap-4">
<component :is="option.icon" />
<general-social />
<span class="font-semibold">
{{ option.title }}
</span>
</div>
</a-menu-item>
</a-menu>
<general-sponsors :nav="true" />
</div>
</v-navigation-drawer>
<general-social />
<general-sponsors :nav="true" />
</div>
</template>
<v-container class="flex-1 mb-12">

Write Preview
Loading…
Cancel
Save