From c5c131014f7f4a770b8d2af63a7548e363e1f9a6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 20 Aug 2022 14:01:27 +0530
Subject: [PATCH] refactor(gui-v2): view menu and gridview ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style.scss                |  4 ++++
 .../components/smartsheet-toolbar/LockType.vue      |  2 +-
 .../components/smartsheet-toolbar/ViewActions.vue   | 13 ++++++-------
 packages/nc-gui-v2/components/smartsheet/Grid.vue   |  6 +++---
 .../components/smartsheet/sidebar/index.vue         |  8 +++-----
 .../smartsheet/sidebar/toolbar/AddRow.vue           |  3 +--
 .../smartsheet/sidebar/toolbar/Reload.vue           |  4 +---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue   |  2 +-
 .../pages/[projectType]/[projectId]/index.vue       |  2 +-
 .../pages/[projectType]/[projectId]/index/index.vue |  4 ++--
 10 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style.scss b/packages/nc-gui-v2/assets/style.scss
index 8da9a28bda..bd73a731d1 100644
--- a/packages/nc-gui-v2/assets/style.scss
+++ b/packages/nc-gui-v2/assets/style.scss
@@ -239,3 +239,7 @@ a {
 .ant-menu-title-content {
   @apply !py-0;
 }
+
+.ant-dropdown-menu-submenu-title{
+  @apply !pr-2;
+}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
index 17fa013d6a..1432ba8fab 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
@@ -38,7 +38,7 @@ const selectedView = inject(ActiveViewInj)
         <span v-else />
       </template>
       <div>
-        <component :is="types[type].icon" />
+        <component :is="types[type].icon" class="text-gray-500" />
         {{ $t(types[type].title) }}
         <div class="nc-subtitle">
           {{ types[type].subtitle }}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
index 8ac8605327..d77b3227bc 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
@@ -142,7 +142,7 @@ async function changeLockType(type: LockType) {
       </a-button>
 
       <template #overlay>
-        <a-menu class="ml-6 !text-sm !p-0 !rounded">
+        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
           <a-menu-item-group>
             <a-sub-menu
               v-if="isUIAllowed('view-type')"
@@ -150,7 +150,7 @@ async function changeLockType(type: LockType) {
               class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
             >
               <template #title>
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0">
+                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
                   <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
 
                   <MaterialSymbolsChevronRightRounded
@@ -174,7 +174,7 @@ async function changeLockType(type: LockType) {
             <a-sub-menu key="download">
               <template #title>
                 <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                  <MdiDownload class="group-hover:text-accent" />
+                  <MdiDownload class="group-hover:text-accent text-gray-500" />
                   Download
                   <div class="flex-1" />
 
@@ -201,11 +201,10 @@ async function changeLockType(type: LockType) {
               </a-menu-item>
             </a-sub-menu>
             <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
-              <a-menu-divider />
               <a-sub-menu key="upload">
                 <template #title>
                   <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                    <MdiUpload class="group-hover:text-accent" />
+                    <MdiUpload class="group-hover:text-accent text-gray-500" />
                     Upload
                     <div class="flex-1" />
 
@@ -236,7 +235,7 @@ async function changeLockType(type: LockType) {
               <div
                 v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
                 v-t="['a:actions:shared-view-list']"
-                class="py-2 flex gap-2"
+                class="py-2 flex gap-2 items-center"
                 @click="sharedViewListDlg = true"
               >
                 <MdiViewListOutline class="text-gray-500" />
@@ -248,7 +247,7 @@ async function changeLockType(type: LockType) {
               <div
                 v-if="isUIAllowed('webhook') && !isView && !isPublicView"
                 v-t="['c:actions:webhook']"
-                class="py-2 flex gap-2"
+                class="py-2 flex gap-2 items-center"
                 @click="showWebhookDrawer = true"
               >
                 <MdiHook class="text-gray-500" />
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index b2600286d1..4c728dac20 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -314,7 +314,7 @@ const onNavigate = (dir: NavigateDir) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table
           ref="smartTable"
-          class="xc-row-table nc-grid backgroundColorDefault !h-auto"
+          class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
           @contextmenu.prevent="contextMenu = true"
         >
           <thead>
@@ -475,11 +475,11 @@ const onNavigate = (dir: NavigateDir) => {
               <td
                 v-t="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
-                class="text-left pointer nc-grid-add-new-cell"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
                 @click="addEmptyRow()"
               >
                 <div class="px-2 w-full flex items-center text-gray-500">
-                  <MdiPlus class="text-pint-500 text-xs ml-2" />
+                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
 
                   <span class="ml-1">
                     {{ $t('activity.addRow') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index c134a96aaf..c9b9786b91 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -107,7 +107,9 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop class="flex-1" @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
-      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="!my-3" />
+      <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="px-3">
+        <div class="!my-3 w-full border-b-1 border-dashed" />
+      </div>
 
       <MenuBottom @open-modal="openModal" />
     </div>
@@ -131,8 +133,4 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 :deep(.ant-layout-sider-children) {
   @apply flex flex-col;
 }
-
-.dot {
-  @apply w-[3px] h-[3px] bg-gray-300 rounded-full;
-}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index 10be4df20f..6d047858c7 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { OpenNewRecordFormHookInj, inject } from '#imports'
 
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 const isLocked = inject(IsLockedInj)
 
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
@@ -12,7 +11,7 @@ const onClick = () => {
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
+  <a-tooltip placement="bottom">
     <template #title> {{ $t('activity.addRow') }} </template>
     <div
       :class="{ 'hover:after:(bg-primary bg-opacity-75) group': !isLocked, 'disabled-ring': isLocked }"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
index 9125b33b6e..eeb5ae49ff 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
@@ -3,13 +3,11 @@ import { ReloadViewDataHookInj, inject } from '#imports'
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-
 const onClick = () => reloadHook.trigger()
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
+  <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index f9f285bf6a..ca045fc415 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -76,7 +76,7 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
 
       <template v-if="meta">
         <div class="flex flex-1 min-h-0">
-          <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0">
+          <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
             <SmartsheetGrid v-if="isGrid" :ref="el" />
 
             <SmartsheetGallery v-else-if="isGallery" />
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 51b78ee83a..950b4040a6 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -203,7 +203,7 @@ const onMenuClose = (visible: boolean) => {
                 </a-tooltip>
                 <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
 
-                <MdiChevronDown class="min-w-[28.5px] group-hover:text-accent text-2xl" />
+                <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
               </template>
 
               <template v-else>
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 eb8ab499e9..fdf703998c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -56,10 +56,10 @@ const { isOpen, toggle } = useSidebar()
         <span class="flex-1" />
 
         <div class="flex justify-center self-center mr-2 min-w-[115px]">
-          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-white">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
             {{ $t('general.loading') }}
 
-            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <MdiLoading :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
         </div>
       </div>