From 2a99584a33edb0929424f3e8dcdcf7ad9a5fc60a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 22:05:37 +0530
Subject: [PATCH] fix(gui-v2): show icons on cell hover

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue     | 22 +------------------
 .../components/virtual-cell/BelongsTo.vue     | 12 ++++++++--
 .../components/virtual-cell/HasMany.vue       | 14 +++++++++---
 .../components/virtual-cell/ManyToMany.vue    | 18 ++++++++++-----
 packages/nc-gui-v2/context/index.ts           |  2 +-
 5 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 6ab9fc31a2..77546d9933 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -22,7 +22,7 @@ provide(ColumnInj, column)
 provide(ValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
-provide(ValueInj, value)
+provide(ValueInj, toRef(props, 'modelValue'))
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
@@ -42,23 +42,3 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
     <VirtualCellLookup v-else-if="isLookup" />
   </div>
 </template>
-
-<style scoped>
-.nc-hint {
-  font-size: 0.61rem;
-  color: grey;
-}
-
-.nc-virtual-cell {
-  position: relative;
-}
-
-.nc-locked-overlay {
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 9b5fb2ba04..16b3975800 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -23,14 +23,22 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
+  <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value || localState)" />
       </template>
     </div>
     <div class="flex-1" />
-    <MdiExpandIcon class="hidden group-hover:inline text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <MdiExpandIcon class="nc-action-icon text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
+<style scoped>
+.nc-action-icon{
+  @apply hidden
+}
+.chips-wrapper:hover .nc-action-icon {
+  @apply inline-block
+}
+</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 81a3349252..b093bf0ea7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -25,7 +25,7 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full chips-wrapper group">
+  <div class="flex align-center gap-1 w-full chips-wrapper">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
@@ -33,9 +33,17 @@ await loadRelatedTableMeta()
       </template>
     </div>
 
-    <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
-    <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <MdiExpandIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+    <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" />
   </div>
 </template>
+<style scoped>
+.nc-action-icon{
+  @apply hidden
+}
+.chips-wrapper:hover .nc-action-icon {
+  @apply inline-block
+}
+</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index b3707d4f32..dfad9d76fd 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -26,8 +26,7 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper">
-    <div class="flex align-center gap-1 w-full chips-wrapper group">
+    <div class="flex align-center gap-1 w-full h-full chips-wrapper">
       <!--    <template v-if="!isForm"> -->
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="value">
@@ -43,14 +42,21 @@ await loadRelatedTableMeta()
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
       </div>
-
+<div class="flex-1"/>
       <MdiExpandIcon
-        class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+        class="nc-action-icon text-gray-500/50 hover:text-gray-500"
         @click="childListDlg = true"
       />
-      <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
       <ListItems v-model="listItemsDlg" />
       <ListChildItems v-model="childListDlg" />
     </div>
-  </div>
 </template>
+<style scoped>
+.nc-action-icon{
+  @apply hidden
+}
+.chips-wrapper:hover .nc-action-icon {
+  @apply inline-block
+}
+</style>
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index c459452198..6a3b562efe 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -17,7 +17,7 @@ export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changeP
 export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
-export const ValueInj: InjectionKey<any> = Symbol('value-injection')
+export const ValueInj: InjectionKey<Ref<any>> = Symbol('value-injection')
 export const ActiveViewInj: InjectionKey<Ref<GridType | FormType | KanbanType | GalleryType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')