Browse Source

feat(gui-v2): add drawer toggle injection

pull/2837/head
braks 2 years ago
parent
commit
361a9d7119
  1. 14
      packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
  2. 8
      packages/nc-gui-v2/components/smartsheet/Sidebar.vue
  3. 1
      packages/nc-gui-v2/components/tabs/Smartsheet.vue

14
packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue

@ -1,20 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReloadViewDataHookInj } from '~/context'
import MdiDoorOpenIcon from '~icons/mdi/door-open' import MdiDoorOpenIcon from '~icons/mdi/door-open'
import MdiDoorClosedIcon from '~icons/mdi/door-closed' import MdiDoorClosedIcon from '~icons/mdi/door-closed'
const navDrawerOpened = ref(false)
const Icon = computed(() => (navDrawerOpened.value ? MdiDoorOpenIcon : MdiDoorClosedIcon)) const drawerOpen = inject('navDrawerOpen', ref(false))
const Icon = computed(() => (drawerOpen.value ? MdiDoorOpenIcon : MdiDoorClosedIcon))
</script> </script>
<template> <template>
<a-tooltip> <a-tooltip placement="left">
<template #title> {{ $t('tooltip.toggleNavDraw') }} </template> <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
<Icon <Icon class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)" @click="drawerOpen = !drawerOpen" />
class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)"
@click="navDrawerOpened = !navDrawerOpened"
/>
</a-tooltip> </a-tooltip>
</template> </template>
<style scoped></style>

8
packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@ -41,6 +41,9 @@ const { api } = useApi()
provide(ViewListInj, views) provide(ViewListInj, views)
/** Sidebar visible */
const drawerOpen = inject('navDrawerOpen', ref(false))
/** Watch current views and on change set the next active view */ /** Watch current views and on change set the next active view */
watch( watch(
views, views,
@ -52,9 +55,6 @@ watch(
{ immediate: true }, { immediate: true },
) )
/** Sidebar visible */
const toggleDrawer = ref(false)
const isView = ref(false) const isView = ref(false)
/** Is editing the view name enabled */ /** Is editing the view name enabled */
@ -296,7 +296,7 @@ function onApiSnippet() {
</script> </script>
<template> <template>
<a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250"> <a-layout-sider class="shadow" :width="drawerOpen ? 0 : 250">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<a-menu class="flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected"> <a-menu class="flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected">
<h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3> <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>

1
packages/nc-gui-v2/components/tabs/Smartsheet.vue

@ -27,6 +27,7 @@ provide(ActiveViewInj, activeView)
provide(IsLockedInj, false) provide(IsLockedInj, false)
provide(ReloadViewDataHookInj, reloadEventHook) provide(ReloadViewDataHookInj, reloadEventHook)
provide(FieldsInj, fields) provide(FieldsInj, fields)
provide('navDrawerOpen', ref(false))
watch( watch(
() => tabMeta && tabMeta?.id, () => tabMeta && tabMeta?.id,

Loading…
Cancel
Save