refactor(gui-v2): view menu and gridview ui updates

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

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;
+}

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 }}

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" />

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') }}

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>

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 }"

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">

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" />

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>

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>