From 053aeada32a1d51e2fdaa7b7badccba27dc6cc67 Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Fri, 1 Sep 2023 14:50:15 +0530
Subject: [PATCH] fix(nc-gui): expand icon visible only on click

---
 packages/nc-gui/components/cell/TextArea.vue  | 30 ++++++++++---------
 .../components/cell/attachment/index.vue      | 16 ++++++----
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 81782d1bd7..fd6250da82 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel } from '#imports'
+import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel, iconMap, ActiveCellInj } from '#imports'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -32,6 +32,8 @@ const isVisible = ref(false)
 const inputWrapperRef = ref<HTMLElement | null>(null)
 const inputRef = ref<HTMLTextAreaElement | null>(null)
 
+const active = inject(ActiveCellInj, ref(false))
+
 watch(isVisible, () => {
   if (isVisible.value) {
     setTimeout(() => {
@@ -86,21 +88,21 @@ onClickOutside(inputWrapperRef, (e) => {
 
       <span v-else>{{ vModel }}</span>
 
-      <NcButton
-        class="!absolute right-0 bottom-0 nc-long-text-toggle-expand !duration-0"
-        :class="{
-          'top-1': rowHeight !== 1,
-          'mt-2': editEnabled,
-          'top-0.15': rowHeight === 1,
-          '!hidden': isExpandedFormOpen,
-        }"
-        type="text"
-        size="xsmall"
+      <div
+        v-if="active"
+        class="!absolute right-0 h-5 w-5 group cursor-pointer py-1 flex justify-center gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+        :class="{'right-2 bottom-2':editEnabled}"
+        data-testid="attachment-cell-file-picker-button"
         @click.stop="isVisible = !isVisible"
       >
-        <GeneralIcon v-if="isVisible" icon="shrink" class="nc-long-text-toggle-expand h-3.75 w-3.75 !text-xs" />
-        <GeneralIcon v-else icon="expand" class="nc-long-text-toggle-expand h-3.75 w-3.75 !text-xs" />
-      </NcButton>
+        <a-tooltip placement="bottom">
+            <template #title>Expand</template>
+            <component
+              :is="iconMap.expand"
+              class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
+            />
+        </a-tooltip>
+      </div>
     </div>
     <template #overlay>
       <div ref="inputWrapperRef" class="flex flex-col min-w-120 min-h-70 py-3 pl-3 pr-1 expanded-cell-input">
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index fcef6b4d22..d7ce9ff80e 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -64,6 +64,8 @@ const {
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, _isReadonly)
 
+const active = inject(ActiveCellInj, ref(false))
+
 const isReadonly = computed(() => {
   return isLockedMode.value || _isReadonly.value
 })
@@ -127,6 +129,7 @@ watch(
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
   if (e.key === 'Enter' && !isReadonly.value) {
+    console.log(ActiveCellInj)
     e.stopPropagation()
     if (!modalVisible.value) {
       modalVisible.value = true
@@ -147,7 +150,8 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
     :style="{
       height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
-    class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
+    class="nc-attachment-cell relative flex color-transition flex items-center"
+    :class="{'justify-center': !active, 'justify-between': active}"
   >
     <LazyCellAttachmentCarousel />
 
@@ -172,14 +176,13 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-      <a-tooltip v-else placement="bottom">
+      <a-tooltip placement="bottom">
         <template #title> Click or drop a file into cell</template>
 
-        <div class="flex items-center gap-1">
+        <div v-if="active || !visibleItems.length" class="flex items-center gap-1">
           <MaterialSymbolsAttachFile
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
           />
-
           <div
             v-if="!visibleItems.length"
             class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
@@ -207,7 +210,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
-              <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
+              <div class="nc-attachment flex items-center justify-center" :class="{'ml-2':active}" @click.stop="selectedImage = item">
                 <LazyCellAttachmentImage
                   class="max-h-[1.8rem] max-w-[1.8rem]"
                   :alt="item.title || `#${i}`"
@@ -215,7 +218,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
                 />
               </div>
             </div>
-            <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
+            <div v-else class="nc-attachment flex items-center justify-center" :class="{'ml-2':active}" @click="openAttachment(item)">
               <component :is="FileIcon(item.icon)" v-if="item.icon" />
 
               <IcOutlineInsertDriveFile v-else />
@@ -225,6 +228,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
       </div>
 
       <div
+        v-if="active"
         class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       >
         <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />