Browse Source

feat(gui-v2): add toggle for tree view sidebar

pull/3023/head
braks 2 years ago
parent
commit
1521d693cb
  1. 15
      packages/nc-gui-v2/app.vue
  2. 2
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  3. 3
      packages/nc-gui-v2/composables/useSidebar/index.ts
  4. 26
      packages/nc-gui-v2/pages/nc/[projectId]/index.vue

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

@ -8,7 +8,7 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
const { signOut, signedIn, isLoading, user } = $(useGlobal()) const { signOut, signedIn, isLoading, user } = $(useGlobal())
const { isOpen, hasSidebar } = useSidebar({ isOpen: signedIn && breakpoints.greater('md').value }) const { isOpen, toggle, hasSidebar } = useSidebar({ isOpen: signedIn && breakpoints.greater('md').value })
const sidebar = ref<HTMLDivElement>() const sidebar = ref<HTMLDivElement>()
@ -18,21 +18,12 @@ const logout = () => {
signOut() signOut()
navigateTo('/signin') navigateTo('/signin')
} }
const sidebarCollapsed = computed({
get: () => !isOpen.value,
set: (val) => (isOpen.value = !val),
})
const toggleSidebar = () => {
sidebarCollapsed.value = !sidebarCollapsed.value
}
</script> </script>
<template> <template>
<a-layout class="min-h-[100vh]"> <a-layout class="min-h-[100vh]">
<a-layout-header class="hidden flex !bg-primary items-center text-white px-4 shadow-md"> <a-layout-header class="hidden flex !bg-primary items-center text-white px-4 shadow-md">
<material-symbols-menu v-if="signedIn && hasSidebar" class="text-xl cursor-pointer" @click="toggleSidebar" /> <material-symbols-menu v-if="signedIn && hasSidebar" class="text-xl cursor-pointer" @click="toggle" />
<div class="flex-1" /> <div class="flex-1" />
@ -85,7 +76,7 @@ const toggleSidebar = () => {
</a-layout-header> </a-layout-header>
<a-layout-sider <a-layout-sider
v-model:collapsed="sidebarCollapsed" :collapsed="!isOpen"
width="300" width="300"
collapsed-width="0" collapsed-width="0"
class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full" class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"

2
packages/nc-gui-v2/components/dashboard/TreeView.vue

@ -142,7 +142,7 @@ const addTableTab = (table: TableType) => {
</script> </script>
<template> <template>
<div class="nc-treeview-container flex flex-column"> <div class="nc-treeview-container flex flex-col">
<div class="px-2 py-[11.75px] border-b-1"> <div class="px-2 py-[11.75px] border-b-1">
<a-input-search <a-input-search
v-model:value="filterQuery" v-model:value="filterQuery"

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

@ -5,6 +5,9 @@ interface UseSidebarProps {
isOpen?: boolean isOpen?: boolean
} }
/**
* Injection state for the left sidebar
*/
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)
const [hasSidebar, toggleHasSidebar] = useToggle(props.hasSidebar ?? true) const [hasSidebar, toggleHasSidebar] = useToggle(props.hasSidebar ?? true)

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

@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useProject, useRoute, useSidebar, useTabs } from '#imports' import { useProject, useRoute, useSidebar, useTabs, useToggle } from '#imports'
import { TabType } from '~/composables' import { TabType } from '~/composables'
import MaterialSymbolsChevronRightRounded from '~icons/material-symbols/chevron-right-rounded'
import MaterialSymbolsChevronLeftRounded from '~icons/material-symbols/chevron-left-rounded'
const route = useRoute() const route = useRoute()
@ -8,7 +10,9 @@ const { loadProject, loadTables } = useProject(route.params.projectId as string)
const { addTab, clearTabs } = useTabs() const { addTab, clearTabs } = useTabs()
useSidebar({ isOpen: true }) useSidebar({ hasSidebar: true, isOpen: true })
const [isOpen, toggle] = useToggle(true)
clearTabs() clearTabs()
if (!route.params.type) { if (!route.params.type) {
@ -23,12 +27,28 @@ await loadTables()
<template> <template>
<NuxtLayout id="sidebar-right" class="flex"> <NuxtLayout id="sidebar-right" class="flex">
<a-layout-sider <a-layout-sider
:collapsed="!isOpen"
width="250" width="250"
collapsed-width="0" collapsed-width="0"
class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full" class="relative bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
:trigger="null" :trigger="null"
collapsible collapsible
> >
<div
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-10 right-[-0.75rem] shadow bg-gray-200 rounded-full"
>
<MaterialSymbolsChevronLeftRounded
v-if="isOpen"
class="transform group-hover:(scale-110 text-pink-500) text-xl text-gray-400"
@click="toggle(false)"
/>
<MaterialSymbolsChevronRightRounded
v-else
class="transform group-hover:(scale-110 text-pink-500) text-xl text-gray-400"
@click="toggle(true)"
/>
</div>
<DashboardTreeView /> <DashboardTreeView />
</a-layout-sider> </a-layout-sider>

Loading…
Cancel
Save