From f0bcafae2a82b20e948d5e6506b55429447d2742 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 25 Jul 2022 22:38:03 +0530
Subject: [PATCH] refactor(gui-v2): ui corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         |   2 +-
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  17 +-
 .../smartsheet-toolbar/FieldsMenu.vue         |  19 +-
 .../smartsheet-toolbar/SortListMenu.vue       |  16 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 246 +++++++++---------
 .../components/smartsheet/Pagination.vue      |  20 +-
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |  24 +-
 .../pages/nc/[projectId]/index/index.vue      |   5 +-
 8 files changed, 189 insertions(+), 160 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 06ec40b4cf..66348c7385 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -208,7 +208,7 @@ const addTableTab = (table: TableType) => {
     </div>
 
     <a-dropdown :trigger="['contextmenu']">
-      <div class="p-1 flex-1 overflow-y-auto flex flex-column">
+      <div class="p-1 flex-1 overflow-y-auto flex flex-column scrollbar-thin-primary">
         <div
           class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
           @click="showTableList = !showTableList"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index c27688aa71..7c5e85a00f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -19,23 +19,24 @@ const applyChanges = () => {}
   <v-menu offset-y eager transition="slide-y-transition">
     <template #activator="{ props }">
       <v-badge :value="filters.length" color="primary" dot overlap>
-        <v-btn
+        <a-button
           v-t="['c:filter']"
           class="nc-filter-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           outlined
-          small
+          size="small"
           text
           :class="{
             'primary lighten-5 grey--text text--darken-3': filters.length,
           }"
           v-bind="props"
-        >
-          <MdiFilterIcon class="mr-1 text-grey" />
-          <!-- Filter -->
-          <span class="text-capitalize">{{ $t('activity.filter') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
-        </v-btn>
+          ><div class="flex align-center gap-1 text-sm">
+            <MdiFilterIcon class="text-grey" />
+            <!-- Filter -->
+            <span class="text-capitalize">{{ $t('activity.filter') }}</span>
+            <MdiMenuDownIcon class="text-grey" />
+          </div>
+        </a-button>
       </v-badge>
     </template>
     <SmartsheetToolbarColumnFilter>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 73edd42973..78fe9ea7ba 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -315,23 +315,24 @@ export default {
   <v-menu>
     <template #activator="{ props }">
       <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props">
-        <v-btn
+        <a-button
           v-t="['c:fields']"
           class="nc-fields-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           outlined
-          small
+          size="small"
           text
           :class="{
             'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
           }"
-        >
-          <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-          <MdiEyeIcon class="mr-1 text-grey"></MdiEyeIcon>
-          <!-- Fields -->
-          <span class="text-sm text-capitalize">{{ $t('objects.fields') }}</span>
-          <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
-        </v-btn>
+          ><div class="flex align-center gap-1 text-sm">
+            <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
+            <MdiEyeIcon class="text-grey"></MdiEyeIcon>
+            <!-- Fields -->
+            <span class="text-capitalize">{{ $t('objects.fields') }}</span>
+            <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
+          </div>
+        </a-button>
       </v-badge>
     </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 322d81eded..f655e10b62 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -29,8 +29,9 @@ watch(
   <v-menu offset-y transition="slide-y-transition">
     <template #activator="{ props }">
       <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
-        <v-btn
+        <a-button
           v-t="['c:sort']"
+          size="small"
           class="nc-sort-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           small
@@ -40,12 +41,13 @@ watch(
             'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
           }"
           v-bind="props"
-        >
-          <MdiSortIcon class="mr-1 text-grey" />
-          <!-- Sort -->
-          <span class="text-capitalize">{{ $t('activity.sort') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
-        </v-btn>
+          ><div class="flex align-center gap-1 text-sm">
+            <MdiSortIcon class="text-grey" />
+            <!-- Sort -->
+            <span class="text-capitalize">{{ $t('activity.sort') }}</span>
+            <MdiMenuDownIcon class="text-grey" />
+          </div>
+        </a-button>
       </v-badge>
     </template>
     <div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]">
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 7a57d550d5..143695c2fa 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -65,129 +65,131 @@ defineExpose({
 </script>
 
 <template>
-  <div class="nc-grid-wrapper">
-    <table class="xc-row-table nc-grid backgroundColorDefault">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th v-for="col in fields" :key="col.title">
-            <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-            <SmartsheetHeaderCell v-else :column="col" />
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="({ row }, rowIndex) in data" :key="rowIndex" class="nc-grid-row">
-          <td key="row-index" style="width: 65px" class="caption nc-grid-cell">
-            <div class="d-flex align-center">
-              {{ rowIndex + 1 }}
-            </div>
-          </td>
-          <td
-            v-for="(columnObj, colIndex) in fields"
-            :key="rowIndex + columnObj.title"
-            class="cell pointer nc-grid-cell"
-            :class="{
-              active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-              // 'primary-column': primaryValueColumn === columnObj.title,
-              // 'text-center': isCentrallyAligned(columnObj),
-              // 'required': isRequired(columnObj, rowObj),
-            }"
-            :data-col="columnObj.title"
-            @click="selectCell(rowIndex, colIndex)"
-            @dblclick="editEnabled = true"
-          >
-            <!--          @contextmenu=" -->
-            <!--            showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
-            <!--          " -->
-            <!--        > -->
-            <!--          <virtual-cell -->
-            <!--            v-if="isVirtualCol(columnObj)" -->
-            <!--            :password="password" -->
-            <!--            :is-public="isPublicView" -->
-            <!--            :metas="metas" -->
-            <!--            :is-locked="isLocked" -->
-            <!--            :column="columnObj" -->
-            <!--            :row="rowObj" -->
-            <!--            :nodes="nodes" -->
-            <!--            :meta="meta" -->
-            <!--            :api="api" -->
-            <!--            :active="selected.col === col && selected.row === row" -->
-            <!--            :sql-ui="sqlUi" -->
-            <!--            :is-new="rowMeta.new" -->
-            <!--            v-on="$listeners" -->
-            <!--            @updateCol=" -->
-            <!--              (...args) => -->
-            <!--                updateCol( -->
-            <!--                  ...args, -->
-            <!--                  columnObj.bt -->
-            <!--                    && meta.columns.find( -->
-            <!--                      (c) => c.column_name === columnObj.bt.column_name, -->
-            <!--                    ), -->
-            <!--                  col, -->
-            <!--                  row, -->
-            <!--                ) -->
-            <!--            " -->
-            <!--            @saveRow="onCellValueChange(col, row, columnObj, true)" -->
-            <!--          /> -->
-
-            <!--          <editable-cell -->
-            <!--            v-else-if=" -->
-            <!--              ((isPkAvail || rowMeta.new) -->
-            <!--                && !isView -->
-            <!--                && !isLocked -->
-            <!--                && !isPublicView -->
-            <!--                && editEnabled.col === col -->
-            <!--                && editEnabled.row === row) -->
-            <!--                || enableEditable(columnObj) -->
-            <!--            " -->
-            <!--            v-model="rowObj[columnObj.title]" -->
-            <!--            :column="columnObj" -->
-            <!--            :meta="meta" -->
-            <!--            :active="selected.col === col && selected.row === row" -->
-            <!--            :sql-ui="sqlUi" -->
-            <!--            :db-alias="nodes.dbAlias" -->
-            <!--            :is-locked="isLocked" -->
-            <!--            :is-public="isPublicView" -->
-            <!--            :view-id="viewId" -->
-            <!--            @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
-            <!--            @cancel="editEnabled = {}" -->
-            <!--            @update="onCellValueChange(col, row, columnObj, false)" -->
-            <!--            @blur="onCellValueChange(col, row, columnObj, true)" -->
-            <!--            @input="unsaved = true" -->
-            <!--            @navigateToNext="navigateToNext" -->
-            <!--            @navigateToPrev="navigateToPrev" -->
-            <!--          /> -->
-
-            <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
-
-            <SmartsheetCell
-              v-else
-              v-model="row[columnObj.title]"
-              :column="columnObj"
-              :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-              @update:model-value="updateRowProperty(row, columnObj.title)"
-            />
-
-            <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
-            <!-- :selected="selected.col === col && selected.row === row" -->
-            <!--        :is-locked="isLocked" -->
-            <!--            :column="columnObj" -->
-            <!--            :meta="meta" -->
-            <!--            :db-alias="nodes.dbAlias" -->
-            <!--            :value="rowObj[columnObj.title]" -->
-            <!--            :sql-ui="sqlUi" -->
-            <!--            @enableedit=" -->
-            <!--              makeSelected(col, row); -->
-            <!--              makeEditable(col, row, columnObj.ai, rowMeta); -->
-            <!--            " -->
-            <!--          /> -->
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="flex flex-col h-100 min-h-0 w-100">
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
+      <table class="xc-row-table nc-grid backgroundColorDefault">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th v-for="col in fields" :key="col.title">
+              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+              <SmartsheetHeaderCell v-else :column="col" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="({ row }, rowIndex) in data" :key="rowIndex" class="nc-grid-row">
+            <td key="row-index" style="width: 65px" class="caption nc-grid-cell">
+              <div class="d-flex align-center">
+                {{ rowIndex + 1 }}
+              </div>
+            </td>
+            <td
+              v-for="(columnObj, colIndex) in fields"
+              :key="rowIndex + columnObj.title"
+              class="cell pointer nc-grid-cell"
+              :class="{
+                active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                // 'primary-column': primaryValueColumn === columnObj.title,
+                // 'text-center': isCentrallyAligned(columnObj),
+                // 'required': isRequired(columnObj, rowObj),
+              }"
+              :data-col="columnObj.title"
+              @click="selectCell(rowIndex, colIndex)"
+              @dblclick="editEnabled = true"
+            >
+              <!--          @contextmenu=" -->
+              <!--            showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
+              <!--          " -->
+              <!--        > -->
+              <!--          <virtual-cell -->
+              <!--            v-if="isVirtualCol(columnObj)" -->
+              <!--            :password="password" -->
+              <!--            :is-public="isPublicView" -->
+              <!--            :metas="metas" -->
+              <!--            :is-locked="isLocked" -->
+              <!--            :column="columnObj" -->
+              <!--            :row="rowObj" -->
+              <!--            :nodes="nodes" -->
+              <!--            :meta="meta" -->
+              <!--            :api="api" -->
+              <!--            :active="selected.col === col && selected.row === row" -->
+              <!--            :sql-ui="sqlUi" -->
+              <!--            :is-new="rowMeta.new" -->
+              <!--            v-on="$listeners" -->
+              <!--            @updateCol=" -->
+              <!--              (...args) => -->
+              <!--                updateCol( -->
+              <!--                  ...args, -->
+              <!--                  columnObj.bt -->
+              <!--                    && meta.columns.find( -->
+              <!--                      (c) => c.column_name === columnObj.bt.column_name, -->
+              <!--                    ), -->
+              <!--                  col, -->
+              <!--                  row, -->
+              <!--                ) -->
+              <!--            " -->
+              <!--            @saveRow="onCellValueChange(col, row, columnObj, true)" -->
+              <!--          /> -->
+
+              <!--          <editable-cell -->
+              <!--            v-else-if=" -->
+              <!--              ((isPkAvail || rowMeta.new) -->
+              <!--                && !isView -->
+              <!--                && !isLocked -->
+              <!--                && !isPublicView -->
+              <!--                && editEnabled.col === col -->
+              <!--                && editEnabled.row === row) -->
+              <!--                || enableEditable(columnObj) -->
+              <!--            " -->
+              <!--            v-model="rowObj[columnObj.title]" -->
+              <!--            :column="columnObj" -->
+              <!--            :meta="meta" -->
+              <!--            :active="selected.col === col && selected.row === row" -->
+              <!--            :sql-ui="sqlUi" -->
+              <!--            :db-alias="nodes.dbAlias" -->
+              <!--            :is-locked="isLocked" -->
+              <!--            :is-public="isPublicView" -->
+              <!--            :view-id="viewId" -->
+              <!--            @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
+              <!--            @cancel="editEnabled = {}" -->
+              <!--            @update="onCellValueChange(col, row, columnObj, false)" -->
+              <!--            @blur="onCellValueChange(col, row, columnObj, true)" -->
+              <!--            @input="unsaved = true" -->
+              <!--            @navigateToNext="navigateToNext" -->
+              <!--            @navigateToPrev="navigateToPrev" -->
+              <!--          /> -->
+
+              <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
+
+              <SmartsheetCell
+                v-else
+                v-model="row[columnObj.title]"
+                :column="columnObj"
+                :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                @update:model-value="updateRowProperty(row, columnObj.title)"
+              />
+
+              <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
+              <!-- :selected="selected.col === col && selected.row === row" -->
+              <!--        :is-locked="isLocked" -->
+              <!--            :column="columnObj" -->
+              <!--            :meta="meta" -->
+              <!--            :db-alias="nodes.dbAlias" -->
+              <!--            :value="rowObj[columnObj.title]" -->
+              <!--            :sql-ui="sqlUi" -->
+              <!--            @enableedit=" -->
+              <!--              makeSelected(col, row); -->
+              <!--              makeEditable(col, row, columnObj.ai, rowMeta); -->
+              <!--            " -->
+              <!--          /> -->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <SmartsheetPagination />
   </div>
-  <SmartsheetPagination />
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 84fc428d77..352d66494e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -48,7 +48,7 @@ export default {
   <div class="d-flex align-center">
     <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
     <v-spacer />
-    <v-pagination
+    <!--    <v-pagination
       v-if="count !== Infinity"
       v-model="page"
       style="max-width: 100%"
@@ -56,6 +56,17 @@ export default {
       :total-visible="8"
       color="primary lighten-2"
       class="nc-pagination"
+    /> -->
+
+    <a-pagination
+      v-if="count !== Infinity"
+      v-model:current="page"
+      size="small"
+      class="!text-xs !m-1"
+      :total="count"
+      :page-size="size"
+      show-less-items
+      :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>
@@ -79,3 +90,10 @@ export default {
     <v-spacer />
   </div>
 </template>
+
+<style scoped>
+:deep(.ant-pagination-item a) {
+  line-height: 21px !important;
+  @apply text-sm;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index afd90c7c27..7f4e678c4c 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -37,17 +37,21 @@ watch(
 </script>
 
 <template>
-  <div class="overflow-auto nc-container">
-    <SmartsheetToolbar />
-    <template v-if="meta">
-      <div class="d-flex">
-        <div v-if="activeView" class="flex-grow-1 min-w-0">
-          <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
-          <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
-          <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
+  <div class="nc-container flex h-full">
+    <div class="flex flex-col h-full flex-1 min-w-0">
+      <SmartsheetToolbar />
+      <template v-if="meta">
+        <div class="flex flex-1 min-h-0">
+          <div v-if="activeView" class="h-full flex-grow min-w-0 min-h-0">
+            <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
+            <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
+            <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
+          </div>
         </div>
-        <SmartsheetSidebar />
-      </div>
+      </template>
+    </div>
+    <template v-if="meta">
+      <SmartsheetSidebar />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index 15e78b95ce..6af756e0d9 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -15,7 +15,7 @@ provide(TabMetaInj, activeTab)
         <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
       </a-tabs>
     </div>
-    <div class="flex-1">
+    <div class="flex-1 min-h-0">
       <NuxtPage />
     </div>
   </div>
@@ -23,7 +23,8 @@ provide(TabMetaInj, activeTab)
 
 <style scoped>
 .nc-container {
-  height: calc(100vh - var(--header-height));
+  height: calc(calc(100vh - var(--header-height)));
+  @apply overflow-hidden;
 }
 
 :deep(.ant-tabs-nav) {