From 01c5a87d89d43bf9420687df541f85243e8d87df Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:27 +0000
Subject: [PATCH] fix: remove comments fix: update attachment cell ui fix:
 update attachment expand model

---
 .../components/cell/attachment/Carousel.vue   |  18 +-
 .../components/cell/attachment/Modal.vue      | 159 ++++++++----------
 .../components/cell/attachment/index.vue      |  88 ++++++----
 packages/nc-gui/components/nc/Tooltip.vue     |  16 +-
 4 files changed, 154 insertions(+), 127 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index b4cdc29e8e..1a8276d9e4 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -196,14 +196,14 @@ onMounted(() => {
           <component :is="iconMap.arrowRight" class="text-7xl" />
         </div>
 
-        <div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2">
+        <!--        <div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2">
           <NcButton class="!hover:bg-transparent" type="text" size="small" @click="toggleComment">
             <div class="flex gap-1 text-white justify-center items-center">
               Comments
               <GeneralIcon icon="messageCircle" />
             </div>
           </NcButton>
-        </div>
+        </div> -->
 
         <div class="text-white absolute right-2 top-2 cursor-pointer"></div>
 
@@ -253,7 +253,11 @@ onMounted(() => {
         </div>
 
         <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
-          <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
+          <NcTooltip
+            v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)"
+            color="light"
+            placement="bottom"
+          >
             <template #title> {{ $t('title.renameFile') }} </template>
             <NcButton
               size="xsmall"
@@ -265,14 +269,14 @@ onMounted(() => {
             </NcButton>
           </NcTooltip>
 
-          <NcTooltip v-if="!isReadonly" placement="bottom">
+          <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
             <template #title> {{ $t('title.downloadFile') }} </template>
             <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
               <component :is="iconMap.download" />
             </NcButton>
           </NcTooltip>
 
-          <NcTooltip v-if="!isReadonly" placement="bottom">
+          <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
             <template #title> {{ $t('title.removeFile') }} </template>
             <NcButton
               class="!hover:bg-transparent !text-white"
@@ -300,9 +304,9 @@ onMounted(() => {
           </template>
         </GeneralDeleteModal>
       </div>
-      <div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88">
+      <!--      <div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88">
         <LazySmartsheetExpandedFormSidebarComments />
-      </div>
+      </div> -->
     </div>
   </GeneralOverlay>
 </template>
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 6ceed95d6b..3f123f2309 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -28,6 +28,8 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
+const { isMobileMode } = useGlobal()
+
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -82,19 +84,28 @@ const handleFileDelete = (i: number) => {
 </script>
 
 <template>
-  <a-modal
+  <NcModal
     v-model:visible="modalVisible"
+    wrap-class-name="nc-modal-attachment-expand-cell"
     class="nc-attachment-modal"
     :class="{ active: modalVisible }"
     width="80%"
-    :footer="null"
-    wrap-class-name="nc-modal-attachment-expand-cell"
   >
-    <template #title>
-      <div class="flex gap-4">
+    <div class="flex justify-between pb-2 gap-4">
+      <div class="font-semibold underline">{{ column?.title }}</div>
+
+      <div class="flex items-center gap-2">
+        <NcButton v-if="selectedVisibleItems.length > 0" size="small" @click="bulkDownloadAttachments">
+          <div class="flex gap-2 items-center">
+            <GeneralIcon icon="download" />
+            {{ $t('activity.bulkDownload') }}
+          </div>
+        </NcButton>
+
         <NcButton
           v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)"
           class="nc-attach-file group"
+          size="small"
           data-testid="attachment-expand-file-picker-button"
           @click="open"
         >
@@ -104,65 +115,65 @@ const handleFileDelete = (i: number) => {
           </div>
         </NcButton>
 
-        <div class="flex items-center gap-2">
-          {{ $t('labels.viewingAttachmentsOf') }}
-          <div class="font-semibold underline">{{ column?.title }}</div>
-        </div>
+        <NcButton type="secondary" size="small" @click="modalVisible = false">
+          <GeneralIcon icon="close" />
+        </NcButton>
+      </div>
+    </div>
 
-        <div
-          v-if="selectedVisibleItems.includes(true) && selectedVisibleItems.length > 1"
-          class="flex flex-1 items-center gap-3 justify-end mr-[30px]"
-        >
-          <NcButton type="primary" class="nc-attachment-download-all" @click="bulkDownloadAttachments">
-            {{ $t('activity.bulkDownload') }}
-          </NcButton>
-        </div>
+    <div ref="dropZoneRef" tabindex="0" class="relative">
+      <div
+        v-if="isSharedForm || (!readOnly && !dragging && isOverDropZone)"
+        class="text-white absolute inset-0 bg-white flex flex-col items-center justify-center gap-2 border-dashed border-1 border-gray-700"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
+        <div class="text-gray-800 text-3xl">{{ $t('labels.dropHere') }}</div>
       </div>
-    </template>
-    <div ref="dropZoneRef" tabindex="0">
-      <template v-if="isSharedForm || (!readOnly && !dragging)">
-        <general-overlay
-          v-model="isOverDropZone"
-          inline
-          class="text-white ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
-        >
-          <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
-          <div class="text-white text-3xl">{{ $t('labels.dropHere') }}</div>
-        </general-overlay>
-      </template>
 
-      <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
-        <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col group gap-1">
-          <a-card class="nc-attachment-item group">
-            <NcCheckbox
-              v-model:checked="selectedVisibleItems[i]"
-              class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
-              :class="{ '!opacity-100': selectedVisibleItems[i] }"
+      <div
+        ref="sortableRef"
+        :class="{ dragging }"
+        class="grid max-h-140 overflow-auto nc-scrollbar-md md:grid-cols-3 xl:grid-cols-5 gap-y-8 gap-x-4 relative"
+      >
+        <div
+          v-for="(item, i) of visibleItems"
+          :key="`${item.title}-${i}`"
+          class="nc-attachment-item group flex border-1 gap-2 rounded-md border-gray-200 flex-col relative"
+        >
+          <NcCheckbox
+            v-model:checked="selectedVisibleItems[i]"
+            class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
+            :class="{ '!opacity-100': selectedVisibleItems[i] }"
+          />
+
+          <div
+            :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
+            class="nc-attachment h-full flex justify-center items-center overflow-hidden"
+          >
+            <LazyCellAttachmentPreviewImage
+              v-if="isImage(item.title, item.mimetype)"
+              :srcs="getPossibleAttachmentSrc(item)"
+              class="max-h-full h-64 m-auto rounded-md justify-center"
+              @click.stop="onClick(item)"
             />
 
-            <div
-              :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
-              class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
-            >
-              <LazyCellAttachmentPreviewImage
-                v-if="isImage(item.title, item.mimetype)"
-                :srcs="getPossibleAttachmentSrc(item)"
-                class="max-h-full h-64 m-auto justify-center"
-                @click.stop="onClick(item)"
-              />
+            <component
+              :is="FileIcon(item.icon)"
+              v-else-if="item.icon"
+              :height="isMobileMode ? 45 : 150"
+              :width="isMobileMode ? 45 : 150"
+              @click.stop="openAttachment(item)"
+            />
 
-              <component
-                :is="FileIcon(item.icon)"
-                v-else-if="item.icon"
-                height="150"
-                width="150"
-                @click.stop="openAttachment(item)"
-              />
+            <IcOutlineInsertDriveFile
+              v-else
+              :height="isMobileMode ? 45 : 150"
+              :width="isMobileMode ? 45 : 150"
+              @click.stop="openAttachment(item)"
+            />
+          </div>
 
-              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openAttachment(item)" />
-            </div>
-          </a-card>
-          <div class="relative flex" :title="item.title">
+          <div class="relative px-1 flex" :title="item.title">
             <div class="flex-auto truncate line-height-4">
               {{ item.title }}
             </div>
@@ -200,6 +211,7 @@ const handleFileDelete = (i: number) => {
         </div>
       </div>
     </div>
+
     <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
       <template #entity-preview>
         <span>
@@ -215,48 +227,19 @@ const handleFileDelete = (i: number) => {
         </span>
       </template>
     </GeneralDeleteModal>
-  </a-modal>
+  </NcModal>
 </template>
 
 <style lang="scss">
 .hide-ui {
   @apply h-0 w-0 overflow-hidden whitespace-nowrap;
-
-  // When the parent with class 'group' is hovered
   .group:hover & {
     @apply h-auto w-auto overflow-visible whitespace-normal;
   }
 }
 .nc-attachment-modal {
   .nc-attachment-item {
-    @apply !h-2/3 !min-h-[200px] flex items-center justify-center relative;
-
-    @supports (-moz-appearance: none) {
-      @apply hover:border-0;
-    }
-
-    &::after {
-      @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
-      content: '';
-    }
-
-    @supports (-moz-appearance: none) {
-      &:hover::after {
-        @apply ring shadow;
-      }
-
-      &:active::after {
-        @apply ring ring-accent ring-opacity-100 shadow;
-      }
-    }
-  }
-
-  .ant-card-body {
-    @apply !p-2 w-full h-full;
-  }
-
-  .ant-modal-body {
-    @apply !p-0;
+    @apply h-[200px] max-h-[200px] flex relative;
   }
 
   .dragging {
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index aaf28c73a5..2cbdf2642c 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -231,41 +231,41 @@ const handleFileDelete = (i: number) => {
     </template>
 
     <div
-      v-if="!isReadonly"
+      v-if="!isReadonly && active && !visibleItems.length"
       :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
-      class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none shadow-sm hover:(bg-primary bg-opacity-10)"
+      class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none"
       data-testid="attachment-cell-file-picker-button"
       tabindex="0"
-      @click="open"
       @keydown.enter="keydownEnter"
       @keydown.space="keydownSpace"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
       <NcTooltip placement="bottom" class="xs:w-full">
-        <template #title
-          ><span data-rec="true">{{ $t('activity.attachmentDrop') }} </span></template
-        >
+        <template #title>
+          <span data-rec="true">{{ $t('activity.attachmentDrop') }} </span>
+        </template>
 
-        <div
-          v-if="active || !visibleItems.length || (isForm && visibleItems.length)"
-          class="flex items-center gap-1 xs:(w-full min-w-12 h-7 justify-center)"
+        <NcButton
+          type="secondary"
+          size="xsmall"
+          data-testid="attachment-cell-file-picker-button"
+          class="!px-2 !h-5.5 !min-w-[fit-content]"
+          @click.stop="open"
         >
-          <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
-          <div
-            v-if="!visibleItems.length"
-            data-rec="true"
-            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-tiny xs:(justify-center rounded-lg text-sm)"
-          >
-            {{ $t('activity.addFiles') }}
+          <div class="flex items-center !text-xs gap-1 justify-center">
+            <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
+            <span class="text-[10px]">
+              {{ $t('activity.addFiles') }}
+            </span>
           </div>
-        </div>
+        </NcButton>
       </NcTooltip>
     </div>
 
     <div v-else class="flex" />
 
-    <template v-if="visibleItems.length">
+    <template v-if="visibleItems.length > 0">
       <div
         ref="sortableRef"
         :class="{
@@ -312,7 +312,6 @@ const handleFileDelete = (i: number) => {
                 'h-8': rowHeight === 2,
                 'h-16.8': rowHeight === 4,
                 'h-20.8 !w-30': rowHeight === 6 || isForm || isExpandedForm,
-                'ml-2': active,
               }"
               @click="onFileClick(item)"
             >
@@ -334,20 +333,49 @@ const handleFileDelete = (i: number) => {
         </template>
       </div>
 
-      <div
-        v-if="active || (isForm && visibleItems.length)"
-        class="xs:hidden group cursor-pointer flex gap-1 items-center rounded border-none p-1"
+      <NcTooltip
+        placement="bottom"
+        class="nc-action-icon !absolute !hidden right-0 nc-text-area-expand-btn group-hover:block z-3"
+        :class="{
+          'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
+          'top-1': !(isGrid && !isForm),
+        }"
+        :style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
       >
-        <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+        <template #title>{{ $t('activity.viewAttachment') }}</template>
+        <NcButton
+          type="secondary"
+          size="xsmall"
+          data-testid="attachment-cell-file-picker-button"
+          class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
+          @click.stop="onExpand"
+        >
+          <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-        <NcTooltip v-else placement="bottom" class="flex">
-          <template #title> {{ $t('activity.viewAttachment') }}</template>
+          <component :is="iconMap.expand" v-else class="transform group-hover:(!text-grey-800) text-gray-700 text-xs" />
+        </NcButton>
+      </NcTooltip>
 
-          <NcButton type="text" size="xsmall" @click.stop="onExpand">
-            <component :is="iconMap.expand" />
-          </NcButton>
-        </NcTooltip>
-      </div>
+      <NcTooltip
+        placement="bottom"
+        class="nc-action-icon !absolute !hidden left-0 nc-text-area-expand-btn group-hover:block z-3"
+        :class="{
+          'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
+          'top-1': !(isGrid && !isForm),
+        }"
+        :style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
+      >
+        <template #title>{{ $t('activity.addFiles') }}</template>
+        <NcButton
+          type="secondary"
+          size="xsmall"
+          data-testid="attachment-cell-file-picker-button"
+          class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
+          @click.stop="open"
+        >
+          <MaterialSymbolsAttachFile class="text-gray-500 text-tiny group-hover:(!text-grey-800) text-gray-700" />
+        </NcButton>
+      </NcTooltip>
     </template>
 
     <LazyCellAttachmentModal v-if="modalRendered" />
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
index c5c96b85e7..7ad4701885 100644
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -8,6 +8,7 @@ interface Props {
   modifierKey?: string
   tooltipStyle?: CSSProperties
   // force disable tooltip
+  color?: 'dark' | 'light'
   disabled?: boolean
   placement?: TooltipPlacement | undefined
   showOnTruncateOnly?: boolean
@@ -28,6 +29,8 @@ const hideOnClick = computed(() => props.hideOnClick)
 const placement = computed(() => props.placement ?? 'top')
 const wrapChild = computed(() => props.wrapChild ?? 'div')
 
+const color = computed(() => (props.color ? props.color : 'dark'))
+
 const el = ref()
 
 const showTooltip = controlledRef(false, {
@@ -117,7 +120,7 @@ const onClick = () => {
 <template>
   <a-tooltip
     v-model:visible="showTooltip"
-    :overlay-class-name="`nc-tooltip ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`"
+    :overlay-class-name="`nc-tooltip-${color} ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`"
     :overlay-style="tooltipStyle"
     :overlay-inner-style="overlayInnerStyle"
     arrow-point-at-center
@@ -139,7 +142,7 @@ const onClick = () => {
 .nc-tooltip.hidden {
   @apply invisible;
 }
-.nc-tooltip {
+.nc-tooltip-dark {
   .ant-tooltip-inner {
     @apply !px-2 !py-1 !rounded-lg !bg-gray-800;
   }
@@ -147,4 +150,13 @@ const onClick = () => {
     @apply !bg-gray-800;
   }
 }
+
+.nc-tooltip-light {
+  .ant-tooltip-inner {
+    @apply !px-2 !py-1 !text-gray-800 !rounded-lg !bg-gray-200;
+  }
+  .ant-tooltip-arrow-content {
+    @apply !bg-gray-200;
+  }
+}
 </style>