feat(gui): move fullscreen icon to tab bar

Signed-off-by: Pranav C <pranavxc@gmail.com>

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']
@@ -230,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 isFullScreen = computed({
+  get: () => !(rightSidebar.isOpen.value || leftSidebar.isOpen.value),
+  set: (value) => {
+    rightSidebar.toggle(!value)
+    leftSidebar.toggle(!value)
+  },
+})
+</script>
+
+<template>
+  <a-tooltip>
+    <!-- todo: i18n -->
+    <template #title> {{ isFullScreen ? 'Exit full width' : '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="isFullScreen = !isFullScreen"
+    >
+      <IcTwotoneWidthNormal v-if="isFullScreen" class="text-gray-300" />
+      <IcTwotoneWidthFull v-else class="text-gray-300" />
+    </div>
+  </a-tooltip>
+</template>

packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue

@@ -1,34 +0,0 @@
-<template>
-  <a-tooltip placement="bottom">
-<!--    todo: i18n -->
-    <template #title> {{ isFullScreen ? 'Exit fullscreen' : 'Fullscreen' }}</template>
-    <div
-      v-e="['c:toolbar:fullscreen']"
-      class="nc-fullscreen-btn cursor-pointer flex align-center"
-    >
-      <MdiFullscreenExit v-if="isFullScreen" @click="isFullScreen = false" />
-      <MdiFullscreen v-else @click="isFullScreen = true" />
-    </div>
-  </a-tooltip>
-</template>
-
-<script setup lang="ts">
-
-// provide the sidebar injection state
-import { useSidebar } from '~/composables'
-
-const rightSidebar = useSidebar('nc-right-sidebar')
-const leftSidebar = useSidebar('nc-left-sidebar')
-
-const isFullScreen = computed({
-  get: () => !(rightSidebar.isOpen.value || leftSidebar.isOpen.value),
-  set: (value) => {
-    rightSidebar.toggle(!value)
-    leftSidebar.toggle(!value)
-  },
-})
-</script>
-
-<style scoped>
-
-</style>

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -43,8 +43,6 @@ const { allowCSVDownload } = useSharedView()
 
     <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" />

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>