wip(gui): fullscreen option to toggle nav drawers

Signed-off-by: Pranav C <pranavxc@gmail.com>
nocodb · Sep 15, 2022 · 0708107 · 0708107
1 parent 24a09ef
commit 0708107
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 deletions.
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
@@ -163,6 +163,8 @@ declare module '@vue/runtime-core' {
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
+    MdiFullscreen: typeof import('~icons/mdi/fullscreen')['default']
+    MdiFullscreenExit: typeof import('~icons/mdi/fullscreen-exit')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
     MdiGithub: typeof import('~icons/mdi/github')['default']

diff --git a/packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue b/packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="cursor-pointer">
+
+
+    <MdiFullscreenExit v-if="isFullScreen" @click="isFullScreen = false" />
+    <MdiFullscreen v-else  @click="isFullScreen = true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+// provide the sidebar injection state
+import { useSidebar } from '~/composables'
+
+const rightSidebar = useSidebar({ storageKey: 'nc-right-sidebar' })
+const leftSidebar = useSidebar({})
+
+
+const isFullScreen = computed({
+  get: () => rightSidebar.isOpen.value && leftSidebar.isOpen.value,
+  set: (value) => {
+    rightSidebar.toggle(value)
+    leftSidebar.toggle(value)
+  },
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -42,6 +42,7 @@ const { allowCSVDownload } = useSharedView()
     <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" />
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
+    <SmartsheetToolbarFullScreen v-if="!isPublic" class="mx-1" />
     <template v-if="!isOpen && !isPublic">
       <div class="border-l-1 pl-3">
         <ToggleDrawer class="mr-2" />

diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -34,7 +34,7 @@ const { $e } = useNuxtApp()
 provide(ViewListInj, views)
 
 /** Sidebar visible */
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 
 const sidebarCollapsed = computed(() => !isOpen.value)
 

diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Sidebar visible */
-const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
+const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>