From 7120e09011523391675a4ada13e87080a7d8b824 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 13:05:47 +0530
Subject: [PATCH] feat(gui-v2): assign proper grid and treeview height

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/dashboard/TreeView.vue |  8 ++++++--
 .../nc-gui-v2/components/smartsheet/Grid.vue    | 13 +++----------
 .../components/smartsheet/Pagination.vue        | 17 ++++-------------
 .../[projectType]/[projectId]/index/index.vue   | 11 ++++++++---
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 224820610c..ad73c56ca4 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -14,7 +14,7 @@ const { addTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
-const { tables, loadTables } = useProject()
+const { tables, loadTables, isSharedBase } = useProject()
 const { activeTab } = useTabs()
 const { deleteTable } = useTable()
 
@@ -143,7 +143,11 @@ const activeTable = computed(() => {
     </div>
 
     <a-dropdown :trigger="['contextmenu']">
-      <div class="p-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull" style="direction: rtl">
+      <div
+        class="p-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
+        :class="{ 'mb-[20px]': isSharedBase }"
+        style="direction: rtl"
+      >
         <div
           style="direction: ltr"
           class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5deca062d6..c9f59dd3ef 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -462,10 +462,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 <style scoped lang="scss">
 .nc-grid-wrapper {
-  width: 100%;
-  // todo : proper height calculation
-  height: calc(100vh - 215px);
-  overflow: auto;
+  @apply h-full w-full overflow-auto;
 
   td,
   th {
@@ -482,10 +479,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   table,
   td,
   th {
-    border-right: 1px solid #f0f0f0 !important;
-    border-left: 1px solid #f0f0f0 !important;
-    border-bottom: 1px solid #f0f0f0 !important;
-    border-top: 1px solid #f0f0f0 !important;
+    @apply !border-1;
     border-collapse: collapse;
   }
 
@@ -511,8 +505,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   }
 
   td.active::before {
-    background: #0040bc;
-    opacity: 0.1;
+    @apply bg-primary/5;
   }
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 5742f258bd..3f20bf6b71 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -34,21 +34,12 @@ const page = computed({
       :show-size-changer="false"
     />
     <div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px">
-      <span class="caption" style="white-space: nowrap"> Change page:</span>
-      <v-text-field
-        :value="page"
-        class="ml-1 caption"
-        :full-width="false"
-        outlined
-        dense
-        hide-details
-        type="number"
-        @keydown.enter="changePage(page)"
-      >
-        <template #append>
+      <span class="text-xs" style="white-space: nowrap"> Change page:</span>
+      <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
+        <template #suffix>
           <MdiKeyboardIcon class="mt-1" @click="changePage(page)" />
         </template>
-      </v-text-field>
+      </a-input>
     </div>
 
     <div class="flex-1" />
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 11736cb3df..050af686e3 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabType } from '~/composables'
+import { TabType, useProject } from '~/composables'
 import { TabMetaInj } from '~/context'
 import { useTabs, useUIPermission } from '#imports'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -17,6 +17,8 @@ const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
+const { isSharedBase } = useProject()
+
 const tableCreateDialog = ref(false)
 const airtableImportDialog = ref(false)
 const quickImportDialog = ref(false)
@@ -43,7 +45,7 @@ const icon = (tab: TabItem) => {
 </script>
 
 <template>
-  <div class="h-full w-full nc-container pt-[9px]">
+  <div class="h-full w-full nc-container pt-[9px]" :class="{ shared: isSharedBase }">
     <div class="h-full w-full flex flex-col">
       <div>
         <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab">
@@ -156,8 +158,11 @@ const icon = (tab: TabItem) => {
 
 <style scoped lang="scss">
 .nc-container {
-  height: calc(100% - var(--header-height));
+  height: calc(100vh - var(--header-height));
   flex: 1 1 100%;
+  &.shared {
+    height: calc(100vh - var(--header-height) - 20px);
+  }
 }
 
 :deep(.nc-root-tabs) {