Merge pull request #3662 from nocodb/feat/full-screen

Feat: fullscreen option to toggle nav drawers

packages/nc-gui/components.d.ts

@@ -79,11 +79,15 @@ declare module '@vue/runtime-core' {
     ClarityImageLine: typeof import('~icons/clarity/image-line')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
+    'Ic:twotoneWidthFull': typeof import('~icons/ic/twotone-width-full')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
+    IcBaselineWidthFull: typeof import('~icons/ic/baseline-width-full')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default']
+    IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default']
     LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
     LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
     LogosSwagger: typeof import('~icons/logos/swagger')['default']
@@ -98,6 +102,9 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
+    MaterialSymbolsWidthFull: typeof import('~icons/material-symbols/width-full')['default']
+    MaterialSymbolsWidthWideOutline: typeof import('~icons/material-symbols/width-wide-outline')['default']
+    'Mdi:arrowExpandHorizontal': typeof import('~icons/mdi/arrow-expand-horizontal')['default']
     MdiAccount: typeof import('~icons/mdi/account')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
@@ -111,6 +118,7 @@ declare module '@vue/runtime-core' {
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
+    MdiArrowExpandHorizontal: typeof import('~icons/mdi/arrow-expand-horizontal')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBackburger: typeof import('~icons/mdi/backburger')['default']
@@ -163,6 +171,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']
@@ -228,5 +238,6 @@ declare module '@vue/runtime-core' {
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SystemUiconsExpandWidth: typeof import('~icons/system-uicons/expand-width')['default']
   }
 }

packages/nc-gui/components/general/FullScreen.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useSidebar } from '#imports'
+
+const rightSidebar = useSidebar('nc-right-sidebar')
+const leftSidebar = useSidebar('nc-left-sidebar')
+
+const isSidebarsOpen = computed({
+  get: () => rightSidebar.isOpen.value || leftSidebar.isOpen.value,
+  set: (value) => {
+    rightSidebar.toggle(value)
+    leftSidebar.toggle(value)
+  },
+})
+</script>
+
+<template>
+  <a-tooltip>
+    <!-- todo: i18n -->
+    <template #title> {{ isSidebarsOpen ? 'Full width': 'Exit full width'   }}</template>
+    <div
+      v-e="['c:toolbar:fullscreen']"
+      class="nc-fullscreen-btn cursor-pointer flex align-center self-center px-2 py-2 mr-2"
+      @click="isSidebarsOpen = !isSidebarsOpen"
+    >
+      <IcTwotoneWidthFull v-if="isSidebarsOpen" class="text-gray-300" />
+      <IcTwotoneWidthNormal v-else class="text-gray-300" />
+    </div>
+  </a-tooltip>
+</template>

packages/nc-gui/components/smartsheet/sidebar/index.vue

@@ -110,12 +110,10 @@ function onCreate(view: ViewType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    {{ isOpen }}
     <Toolbar
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
     />
-
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 

packages/nc-gui/package-lock.json

@@ -49,6 +49,7 @@
         "@iconify-json/mi": "^1.1.2",
         "@iconify-json/ph": "^1.1.2",
         "@iconify-json/ri": "^1.1.3",
+        "@iconify-json/system-uicons": "^1.1.4",
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
@@ -1151,6 +1152,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/system-uicons": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@iconify-json/system-uicons/-/system-uicons-1.1.4.tgz",
+      "integrity": "sha512-LL4gc9Fz7ZoGZzBS5fSrFnTNSRB8gXKw+sZAlIq6Msa/rRljyXoTuySIgS66dzX4QnbUC8DqXIFn5BT0/d+Cpg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -16055,6 +16065,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/system-uicons": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@iconify-json/system-uicons/-/system-uicons-1.1.4.tgz",
+      "integrity": "sha512-LL4gc9Fz7ZoGZzBS5fSrFnTNSRB8gXKw+sZAlIq6Msa/rRljyXoTuySIgS66dzX4QnbUC8DqXIFn5BT0/d+Cpg==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",

packages/nc-gui/package.json

@@ -58,6 +58,7 @@
     "@iconify-json/mi": "^1.1.2",
     "@iconify-json/ph": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
+    "@iconify-json/system-uicons": "^1.1.4",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",

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

@@ -35,7 +35,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 <template>
   <div class="h-full w-full nc-container">
     <div class="h-full w-full flex flex-col">
-      <div class="flex items-end !min-h-[var(--header-height)] !bg-primary">
+      <div class="flex items-end !min-h-[var(--header-height)] !bg-primary nc-tab-bar">
         <div
           v-if="!isOpen"
           class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
@@ -76,6 +76,8 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
             <MdiLoading class="animate-infinite animate-spin" />
           </div>
         </div>
+
+        <GeneralFullScreen class="nc-fullscreen-icon" />
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
@@ -142,7 +144,18 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 :deep(.ant-menu-submenu::after) {
   @apply !border-none;
 }
+
 :deep(.ant-tabs-tab-remove) {
   @apply mt-[3px];
 }
+
+.nc-tab-bar {
+  :deep(.nc-fullscreen-icon) {
+    @apply opacity-0 transition;
+  }
+
+  &:hover :deep(.nc-fullscreen-icon) {
+    @apply opacity-100;
+  }
+}
 </style>