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
2bf3935840
commit
bddbff77b5
4 changed files with 57 additions and 65 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. 109
      packages/nc-gui-v2/app.vue
  2. 7
      packages/nc-gui-v2/components.d.ts
  3. 4
      packages/nc-gui-v2/layouts/default.vue
  4. 2
      packages/nc-gui-v2/windi.config.ts

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

@ -12,23 +12,18 @@ const signOut = () => {
$state.signOut() $state.signOut()
navigateTo('/signin') navigateTo('/signin')
} }
const toggleSidebar = useToggle($state.sidebarOpen)
</script> </script>
<template> <template>
<v-app> <a-layout>
<v-app-bar class="shadow-md bg-primary" height="48"> <a-layout-header class="flex !bg-primary items-center text-white">
<div class="flex items-center flex-1 md:ml-4"> <div class="flex items-center flex-1">
<v-toolbar-title> <div class="flex items-center gap-2">
<v-tooltip bottom> <img width="35" src="~/assets/img/icons/512x512-trans.png" />
{{ $t('general.home') }} <span class="prose-xl" @click="navigateTo('/')">NocoDB</span>
<span class="caption font-weight-light pointer">(version)</span> </div>
</v-tooltip>
<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>
</v-toolbar-title>
<!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading <!-- 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"> <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
@ -41,55 +36,45 @@ const signOut = () => {
--> -->
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end gap-4">
<v-toolbar-items class="flex gap-4 nc-topright-menu"> <general-color-mode-switcher v-model="$state.darkMode.value" />
<!-- todo: implement components
<release-info /> <general-language class="mr-3" />
-->
<MaterialSymbolsMenu
<general-color-mode-switcher v-model="$state.darkMode.value" /> v-if="$state.signedIn.value"
class="block text-xl cursor-pointer xl:(hidden)"
<general-language class="mr-3" /> @click="toggleSidebar"
/>
<MaterialSymbolsMenu
v-if="$state.signedIn.value" <template v-if="$state.signedIn.value">
class="block text-xl cursor-pointer xl:(hidden)" <a-dropdown :trigger="['click']">
@click="$state.sidebarOpen.value = !$state.sidebarOpen.value" <MdiDotsVertical class="md:text-xl cursor-pointer" @click.prevent />
/>
<template #overlay>
<template v-if="$state.signedIn.value"> <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
<v-menu class="leading-8"> <a-menu-item key="0" class="!rounded">
<template #activator="{ props }"> <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
<MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" /> <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
</template> <span class="prose">{{ email }}</span>
</nuxt-link>
<v-list class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800)"> </a-menu-item>
<nuxt-link
v-t="['c:navbar:user:email']" <a-menu-divider class="!m-0" />
class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline"
to="/user" <a-menu-item class="!rounded" key="1">
> <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
<MdiAt class="mt-1 group-hover:text-success" />&nbsp; <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
<span class="prose">{{ email }}</span> <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
</nuxt-link> </div>
</a-menu-item>
<v-divider /> </a-menu>
</template>
<div </a-dropdown>
v-t="['a:navbar:user:sign-out']" </template>
class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-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>
</div>
</v-list>
</v-menu>
</template>
</v-toolbar-items>
</div> </div>
</v-app-bar> </a-layout-header>
<NuxtPage /> <NuxtPage />
</v-app> </a-layout>
</template> </template>

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

@ -7,6 +7,13 @@ export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
ALayout: typeof import('ant-design-vue/es')['Layout']
ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
ATable: typeof import('ant-design-vue/es')['Table'] ATable: typeof import('ant-design-vue/es')['Table']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']

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

@ -18,11 +18,11 @@ export default {
</script> </script>
<template> <template>
<v-main> <a-layout-content>
<slot name="sidebar"> <slot name="sidebar">
<div id="sidebar" /> <div id="sidebar" />
</slot> </slot>
<slot /> <slot />
</v-main> </a-layout-content>
</template> </template>

2
packages/nc-gui-v2/windi.config.ts
Unescape View File

@ -15,7 +15,7 @@ import colors, { themeColors } from './utils/colorsUtils'
export default defineConfig({ export default defineConfig({
extract: { extract: {
include: ['**/*.{vue,html,jsx,tsx,css}'], include: ['**/*.{vue,html,jsx,tsx,css,scss}'],
exclude: ['node_modules', '.git'], exclude: ['node_modules', '.git'],
}, },

Write Preview
Loading…
Cancel
Save