From 5bc4f6df7aae058ebc09fc1c36a7cb344ccd9c08 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 21:13:19 +0300
Subject: [PATCH 01/14] fix(gui-v2): virtual column header edit dropdown
 location

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 9a989e41f4..fec0ec70ea 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -114,6 +114,7 @@ function onVisibleChange() {
     <span v-if="column.rqd || required" class="text-red-500">&nbsp;*</span>
 
     <template v-if="!hideMenu">
+      <div class="flex-1" />
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 

From 9368c62119a0f5bb53af661dd7e8f9783456d812 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 21:25:21 +0300
Subject: [PATCH 02/14] fix(gui-v2): column header menu improvements

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue      | 2 +-
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue      | 4 ++--
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 30a67fe9df..78e660326a 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -24,7 +24,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal">
+  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 24e3d8b0ee..dae5688e07 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -53,8 +53,8 @@ const setAsPrimaryValue = async () => {
 </script>
 
 <template>
-  <a-dropdown placement="bottomRight" :trigger="['hover']">
-    <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
+  <a-dropdown placement="bottomRight" :trigger="['click']">
+    <MdiMenuDownIcon class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
     <template #overlay>
       <a-menu class="shadow bg-white">
         <a-menu-item @click="emit('edit')">
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index fec0ec70ea..25f19b45cf 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -101,7 +101,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal">
+  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
 
     <a-tooltip placement="bottom">

From 44e37862dc31f7ee7ec464a807ad44f02781a997 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 21:34:12 +0300
Subject: [PATCH 03/14] fix(gui-v2): column edit menu placement

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue      | 4 ++++
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 78e660326a..4198159263 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -62,4 +62,8 @@ function onVisibleChange() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+:deep(.ant-dropdown-trigger) {
+  @apply h-full;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 25f19b45cf..d0c81c38f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -146,4 +146,8 @@ function onVisibleChange() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+:deep(.ant-dropdown-trigger) {
+  @apply h-full;
+}
 </style>

From e32c1f0924c54218c14fea3f623e71a1ec38ee7d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 22:14:08 +0300
Subject: [PATCH 04/14] feat(gui-v2): column header icon colors for relational
 types

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet-header/VirtualCellIcon.vue     | 55 +++++++++++++++----
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 33c48863b5..15a53e5515 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
@@ -16,35 +17,65 @@ import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 const props = defineProps<{ columnMeta?: ColumnType }>()
 const columnMeta = toRef(props, 'columnMeta')
 
-const column = inject(ColumnInj, ref(columnMeta))
+const column = inject(ColumnInj, ref(columnMeta)) as Ref<ColumnType & { colOptions: LookupType }>
+
+let relationColumn: ColumnType & { colOptions: LookupType }
+
+if (column) {
+  const { isLookup, isBt, isRollup, isMm, isHm } = useVirtualCell(column as Ref<ColumnType>)
+
+  if (isLookup || isBt || isRollup || isMm || isHm) {
+    const meta = inject(MetaInj)
+
+    relationColumn = meta?.value.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
+      colOptions: LinkToAnotherRecordType
+    }
+  }
+}
 
 const icon = computed(() => {
   switch (column?.value?.uidt) {
     case UITypes.LinkToAnotherRecord:
       switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return MMIcon
+          return { icon: MMIcon, color: 'text-pink-500' }
         case RelationTypes.HAS_MANY:
-          return HMIcon
+          return { icon: HMIcon, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
-          return BTIcon
+          return { icon: BTIcon, color: 'text-sky-500' }
       }
       break
     case UITypes.SpecificDBType:
-      return SpecificDBTypeIcon
+      return { icon: SpecificDBTypeIcon, color: 'text-grey' }
     case UITypes.Formula:
-      return FormulaIcon
+      return { icon: FormulaIcon, color: 'text-grey' }
     case UITypes.Lookup:
-      return TableColumnPlusBefore
+      switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
+        case RelationTypes.MANY_TO_MANY:
+          return { icon: TableColumnPlusBefore, color: 'text-pink-500' }
+        case RelationTypes.HAS_MANY:
+          return { icon: TableColumnPlusBefore, color: 'text-yellow-500' }
+        case RelationTypes.BELONGS_TO:
+          return { icon: TableColumnPlusBefore, color: 'text-sky-500' }
+      }
+      return { icon: TableColumnPlusBefore, color: 'text-grey' }
     case UITypes.Rollup:
-      return RollupIcon
+      switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
+        case RelationTypes.MANY_TO_MANY:
+          return { icon: RollupIcon, color: 'text-pink-500' }
+        case RelationTypes.HAS_MANY:
+          return { icon: RollupIcon, color: 'text-yellow-500' }
+        case RelationTypes.BELONGS_TO:
+          return { icon: RollupIcon, color: 'text-sky-500' }
+      }
+      return { icon: RollupIcon, color: 'text-grey' }
     case UITypes.Count:
-      return CountIcon
+      return { icon: CountIcon, color: 'text-grey' }
   }
-  return GenericIcon
+  return { icon: GenericIcon, color: 'text-grey' }
 })
 </script>
 
 <template>
-  <component :is="icon" class="text-grey mx-1 !text-sm" />
+  <component :is="icon.icon" class="mx-1 !text-sm" :class="icon.color" />
 </template>

From aa9ff45d5043f652ad912e2018c7f001ca6c97d4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 23:34:41 +0300
Subject: [PATCH 05/14] feat(gui-v2): colored primary value

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Cell.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 2e2324a762..deef47af35 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -54,6 +54,10 @@ const isManualSaved = $computed(() => {
   return [UITypes.Currency, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
+const isPrimary = computed(() => {
+  return column?.value?.pv
+})
+
 const vModel = computed({
   get: () => props.modelValue,
   set: (val) => {
@@ -108,6 +112,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 <template>
   <div
     class="nc-cell w-full h-full"
+    :class="{ 'text-blue-600': isPrimary }"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up

From a1bda9ef7324925d13b647e07b29f2b216929146 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 00:31:48 +0300
Subject: [PATCH 06/14] fix(gui-v2): project dropdown location

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9b5f91a176..4e4f596cca 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -286,4 +286,8 @@ const isHovered = useElementHover(sidebar)
 :deep(.ant-dropdown-menu-item) {
   @apply !py-0 active:(ring ring-pink-500);
 }
+
+:deep(.ant-dropdown-trigger) {
+  @apply h-full;
+}
 </style>

From d9b1280bc2afad1171df1e74b95606168a885c9b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 09:29:43 +0300
Subject: [PATCH 07/14] feat(gui-v2): treeview active tab border

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/TreeView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 7e5ad0f52a..b2b5761a04 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -150,7 +150,7 @@ const activeTable = computed(() => {
 
     <a-dropdown :trigger="['contextmenu']">
       <div
-        class="p-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
+        class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
         :class="{ 'mb-[20px]': isSharedBase }"
         style="direction: rtl"
       >
@@ -334,6 +334,7 @@ const activeTable = computed(() => {
 
 .nc-tree-item.active {
   @apply !text-primary font-weight-bold after:(!opacity-20);
+  @apply border-r-3 border-indigo-500;
 
   svg {
     @apply !text-primary;

From 55bb3bbcfabd5951ac485ef0a5bbd108d3ed2701 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 09:30:57 +0300
Subject: [PATCH 08/14] fix(gui-v2): relation chip bg

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/components/virtual-cell/components/ItemChip.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 48d79a6f8a..82dcf87df4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -31,7 +31,7 @@ export default {
 
 <template>
   <div
-    class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]"
+    class="group py-1 px-2 mr-1 my-1 flex align-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
     @click="expandedFormDlg = true"
   >

From e84a6b516881ba726ef095675c86fdee96ed85d3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 09:45:09 +0300
Subject: [PATCH 09/14] fix(gui-v2): merge team & settings in project dropdown

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../pages/[projectType]/[projectId]/index.vue | 46 ++-----------------
 2 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 2c8304ace6..546d2a6a69 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -105,6 +105,7 @@ declare module '@vue/runtime-core' {
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
+    MdiCog: typeof import('~icons/mdi/cog')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 4e4f596cca..e26887926c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -161,51 +161,15 @@ const isHovered = useElementHover(sidebar)
 
                   <a-menu-divider />
 
-                  <a-menu-item key="teamAndAuth">
+                  <a-menu-item key="teamAndSettings">
                     <div
-                      v-if="isUIAllowed('teamAndAuth')"
-                      v-t="['c:navdraw:team-and-auth']"
+                      v-if="isUIAllowed('settings')"
+                      v-t="['c:navdraw:project-settings']"
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiAccountGroup class="group-hover:text-pink-500 nc-team-and-auth" />
-                      Team & Auth
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="appStore">
-                    <div
-                      v-if="isUIAllowed('appStore')"
-                      v-t="['c:navdraw:app-store']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'appStore')"
-                    >
-                      <MdiStore class="group-hover:text-pink-500 nc-app-store" />
-                      App Store
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="metaData">
-                    <div
-                      v-if="isUIAllowed('projectMetadata')"
-                      v-t="['c:navdraw:project-metadata']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'metaData')"
-                    >
-                      <MdiTableBorder class="group-hover:text-pink-500 nc-meta-data" />
-                      Project Metadata
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="audit">
-                    <div
-                      v-if="isUIAllowed('audit')"
-                      v-t="['c:navdraw:audit']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'audit')"
-                    >
-                      <MdiNotebookCheckOutline class="group-hover:text-pink-500 nc-audit" />
-                      Audit
+                      <MdiCog class="group-hover:text-pink-500 nc-team-settings" />
+                      Team & Settings
                     </div>
                   </a-menu-item>
 

From 6b2a84d19e63f53439a5fff6201b976ca5498397 Mon Sep 17 00:00:00 2001
From: Naveen MR <oof1lab@gmail.com>
Date: Tue, 16 Aug 2022 10:29:17 +0100
Subject: [PATCH 10/14] fix : header text will be gray

---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue        | 2 +-
 packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 4198159263..c2eaec027a 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -24,7 +24,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
+  <div class="flex items-center w-full text-xs text-normal text-gray-500 font-weight-medium" :class="{ 'h-full': column }">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index d0c81c38f3..b05f934a2d 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -101,7 +101,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
+  <div class="flex items-center w-full text-xs text-gray-500 font-weight-medium" :class="{ 'h-full': column }">
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
 
     <a-tooltip placement="bottom">

From 72bc08704966052112608f643657875a54b24d0b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:06:35 +0530
Subject: [PATCH 11/14] fix(gui-v2): overwrite ant-dropdown height

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5d85cf3ae3..5889014f18 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -292,7 +292,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
+        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault !h-auto" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>

From 24f68ae9b18154229e955b17fbcf4f049199ce37 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:14:50 +0530
Subject: [PATCH 12/14] refactor(gui-v2): reduce spacing between expand icon
 and checkbox

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5889014f18..afcf6543a1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -292,11 +292,15 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault !h-auto" @contextmenu.prevent="contextMenu = true">
+        <table
+          ref="smartTable"
+          class="xc-row-table nc-grid backgroundColorDefault !h-auto"
+          @contextmenu.prevent="contextMenu = true"
+        >
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
-                <div class="w-full h-full bg-gray-100 flex min-w-[80px] pl-5 pr-1 items-center">
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -354,8 +358,10 @@ const expandForm = (row: Row, state: Record<string, any>) => {
               <template #default="{ state }">
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
-                    <div class="align-center flex min-w-[80px]">
-                      <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                    <div class="align-center flex gap-1 min-w-[55px]">
+                      <div class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                        {{ rowIndex + 1 }}
+                      </div>
                       <div
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"

From d5a7e606bc8c095f082b4107dd91bdfe926db79a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:32:38 +0530
Subject: [PATCH 13/14] refactor(gui-v2): comments style update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 ++
 .../smartsheet/expanded-form/Comments.vue     | 27 ++++++++++---------
 .../smartsheet/expanded-form/index.vue        |  6 ++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 546d2a6a69..6ff3d158bd 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -61,6 +61,7 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
@@ -156,6 +157,7 @@ declare module '@vue/runtime-core' {
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
+    MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index 93012ce369..ee7b430cff 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { enumColor, nextTick, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
+import { enumColor, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
@@ -13,52 +13,53 @@ const showborder = ref(false)
 watch(
   commentsAndLogs,
   () => {
-    nextTick(() => {
+    // todo: replace setTimeout
+    setTimeout(() => {
       if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
-    })
+    }, 200)
   },
   { immediate: true },
 )
 </script>
 
 <template>
-  <div class="h-full d-flex flex-column w-full">
-    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2">
+  <div class="h-full flex flex-col w-full bg-[#eceff1] p-2">
+    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2 space-y-2">
       <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
       <template v-else>
         <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
           <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
           <div class="flex-grow">
-            <p class="mb-1 caption edited-text text-[10px] text-gray">
+            <p class="mb-1 caption edited-text text-[10px] text-gray-500">
               {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
               {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
             </p>
             <p
               v-if="log.op_type === 'COMMENT'"
-              class="caption mb-0 nc-chip w-full min-h-20px"
+              class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded"
               :style="{ backgroundColor: enumColor.light[2] }"
             >
               {{ log.description }}
             </p>
 
-            <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+            <p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" />
 
-            <p class="time text-right text-[10px] mb-0">
+            <p class="time text-right text-[10px] mb-0 mt-1 text-gray-500">
               {{ timeAgo(log.created_at) }}
             </p>
           </div>
         </div>
       </template>
     </div>
-    <div class="border-1 my-2 w-full ml-6" />
+    <div class="border-1 my-2 w-full" />
     <div class="p-0">
       <div class="flex justify-center">
         <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
           ><span class="text-[11px] text-gray-500">Comments only</span>
         </a-checkbox>
       </div>
-      <div class="flex-shrink-1 mt-2 d-flex pl-4">
+      <div class="flex-shrink-1 mt-2 d-flex">
         <a-input
           v-model:value="comment"
           class="!text-xs"
@@ -84,10 +85,10 @@ watch(
 
 <style scoped>
 :deep(.red.lighten-4) {
-  @apply bg-red-100;
+  @apply bg-red-100 p-1;
 }
 
 :deep(.green.lighten-4) {
-  @apply bg-green-100;
+  @apply bg-green-100 p-1;
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index 691f9369a3..e3e1af89fd 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -102,7 +102,7 @@ export default {
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
-    <a-card class="!bg-gray-100">
+    <div class="!bg-gray-100 rounded">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
@@ -131,7 +131,7 @@ export default {
           </div>
         </div>
       </div>
-    </a-card>
+    </div>
   </a-modal>
 </template>
 
@@ -154,7 +154,7 @@ export default {
 }
 
 .nc-form-wrapper {
-  max-height: max(calc(90vh - 100px), 600px);
+  max-height: max(calc(90vh - 150px), 600px);
   height: max-content !important;
 }
 </style>

From e4c97225707325bc16ac3c183b85de60f81b0341 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 16:19:52 +0530
Subject: [PATCH 14/14] refactor(gui-v2): remove padding

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/expanded-form/Comments.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index ee7b430cff..5bd9ce2745 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -85,10 +85,10 @@ watch(
 
 <style scoped>
 :deep(.red.lighten-4) {
-  @apply bg-red-100 p-1;
+  @apply bg-red-100;
 }
 
 :deep(.green.lighten-4) {
-  @apply bg-green-100 p-1;
+  @apply bg-green-100;
 }
 </style>