Merge pull request #9964 from nocodb/nc-fix/grid-view-attachment-cell-icon-size

Nc fix/grid view attachment cell icon size

packages/nc-gui/components/cell/attachment/IconView.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  item: any
+}>()
+
+const icon = useAttachmentIcon(() => props.item.title, props.item.mimetype)
+
+</script>
+
+<template>
+  <GeneralIcon :icon="icon" class="text-white" />
+</template>

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -158,9 +158,23 @@ const handleFileDelete = (i: number) => {
               @click.stop="onClick(item)"
             />
 
-            <component :is="FileIcon(item.icon)" v-else-if="item.icon" :height="45" :width="45" @click.stop="onClick(item)" />
+            <component
+              :is="FileIcon(item.icon)"
+              v-else-if="item.icon"
+              :height="45"
+              :width="45"
+              class="text-white"
+              @click.stop="onClick(item)"
+            />
 
-            <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="onClick(item)" />
+            <GeneralIcon
+              v-else
+              icon="ncFileTypeUnknown"
+              :height="45"
+              :width="45"
+              class="text-white"
+              @click.stop="onClick(item)"
+            />
           </div>
 
           <div class="relative px-1 pb-1 items-center flex" :title="item.title">

packages/nc-gui/components/cell/attachment/index.vue

@@ -261,16 +261,7 @@ defineExpose({
             @click="onFileClick(item)"
           />
 
-          <component
+          <CellAttachmentIconView v-else :item="item" :height="45" :width="45" @click="selectedFile = item" />
-            :is="FileIcon(item.icon)"
-            v-else-if="item.icon"
-            :height="45"
-            :width="45"
-            class="text-white"
-            @click="selectedFile = item"
-          />
-
-          <GeneralIcon v-else icon="ncFileTypeUnknown" :height="45" :width="45" class="text-white" @click="selectedFile = item" />
         </div>
 
         <div class="relative px-1 flex" :title="item.title">
@@ -329,13 +320,7 @@ defineExpose({
   <div
     v-else
     ref="attachmentCellRef"
-    :style="{
+    class="nc-attachment-cell relative group color-transition"
-      height: `max(${!rowHeight || rowHeight === 1 ? rowHeightInPx['1'] - 10 : rowHeightInPx[`${rowHeight}`] - 18}px, ${
-        isGrid ? '22px' : '32px'
-      })`,
-    }"
-    class="nc-attachment-cell relative group flex color-transition gap-2 flex items-center w-full xs:(min-h-12 max-h-32)"
-    :class="{ 'justify-center': !active, 'justify-between': active }"
   >
     <LazyCellAttachmentCarousel v-if="selectedFile" />
 
@@ -355,14 +340,14 @@ defineExpose({
     <div
       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"
+      class="group cursor-pointer flex gap-1 items-center rounded border-none"
       tabindex="0"
       @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">
+      <NcTooltip placement="bottom" class="w-full text-center">
         <template #title>
           <span data-rec="true">{{ $t('activity.attachmentDrop') }} </span>
         </template>
@@ -371,11 +356,11 @@ defineExpose({
           type="secondary"
           size="xsmall"
           data-testid="attachment-cell-file-picker-button"
-          class="!px-2 !h-5.5 !min-w-[fit-content]"
+          class="!px-2 !h-7 !min-w-[fit-content]"
           @click.stop="open"
         >
-          <div class="flex items-center !text-xs gap-1 justify-center">
+          <div class="flex items-center gap-1 justify-center">
-            <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
+            <GeneralIcon icon="upload" class="text-gray-500 text-tiny" />
             <span class="text-[10px]">
               {{ $t('activity.addFiles') }}
             </span>
@@ -389,56 +374,42 @@ defineExpose({
         ref="sortableRef"
         :class="{
           'justify-center': !isGallery && !isKanban,
-          'py-1': rowHeight === 1,
-          'py-1.5 !gap-4 ': rowHeight !== 1,
         }"
-        class="nc-attachment-wrapper flex cursor-pointer w-full items-center flex-wrap gap-3 nc-scrollbar-thin mt-0 items-start px-[1px]"
+        class="nc-attachment-wrapper flex cursor-pointer w-full items-center flex-wrap gap-2 mt-0 items-start overflow-y-auto nc-scrollbar-thin"
         :style="{
-          maxHeight: `max(100%, ${isGrid ? '22px' : '32px'})`,
+          height: `max(${!rowHeight || rowHeight === 1 ? rowHeightInPx['1']: rowHeightInPx[`${rowHeight}`] - 17}px, ${isGrid ? 22 : 32}px)`,
+          paddingTop: !rowHeight || rowHeight === 1 ? '4px !important' : undefined,
+          paddingBottom: !rowHeight || rowHeight === 1 ? '4px !important' : undefined,
         }"
       >
-        <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
+        <NcTooltip v-for="(item, i) of visibleItems" :key="item.url || item.title" placement="bottom" class="nc-attachment-item">
-          <NcTooltip placement="bottom" class="nc-attachment-item">
+          <template #title>
-            <template #title>
+            <div class="text-center w-full">{{ item.title }}</div>
-              <div class="text-center w-full">{{ item.title }}</div>
+          </template>
-            </template>
+          <div
-            <div v-if="isImage(item.title, item.mimetype ?? item.type)">
+            class="aspect-square"
-              <div
+            :class="{
-                class="nc-attachment flex items-center flex-col flex-wrap justify-center flex-auto"
+              'h-[24px]': !rowHeight || rowHeight === 1,
-                @click="() => onFileClick(item)"
+              'h-[32px]': rowHeight === 2,
-              >
+              'h-[64px]': rowHeight === 4 || rowHeight === 6,
-                <LazyCellAttachmentPreviewImage
+            }"
-                  :alt="item.title || `#${i}`"
+          >
-                  class="rounded"
+            <LazyCellAttachmentPreviewImage
-                  :class="{
+              v-if="isImage(item.title, item.mimetype ?? item.type)"
-                    'h-5.5': !isGrid && (!rowHeight || rowHeight === 1),
+              :alt="item.title || `#${i}`"
-                    'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
+              class="nc-attachment rounded-lg w-full h-full object-cover overflow-hidden"
-                    'h-8': rowHeight === 2,
+              :srcs="getPossibleAttachmentSrc(item, attachmentSize)"
-                    'h-16.8': rowHeight === 4,
+              @click="() => onFileClick(item)"
-                    'h-20.8': rowHeight === 6,
+            />
-                  }"
-                  :srcs="getPossibleAttachmentSrc(item, attachmentSize)"
-                />
-              </div>
-            </div>
             <div
               v-else
-              class="nc-attachment flex items-center justify-center px-4"
+              class="nc-attachment h-full w-full flex items-center justify-center"
-              :class="{
-                'h-5.5': !isGrid && (!rowHeight || rowHeight === 1),
-                'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
-                'h-8': rowHeight === 2,
-                'h-16.8': rowHeight === 4,
-                'h-20.8 !w-30': rowHeight === 6,
-              }"
               @click="onFileClick(item)"
             >
-              <component :is="FileIcon(item.icon)" v-if="item.icon" />
+              <CellAttachmentIconView :item="item" class="max-h-full max-w-full" />
-
-              <GeneralIcon v-else icon="ncFileTypeUnknown" class="text-white" />
             </div>
-          </NcTooltip>
+          </div>
-        </template>
+        </NcTooltip>
       </div>
 
       <NcTooltip

packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue

@@ -83,7 +83,12 @@ watch(
         <div class="group gap-3 overflow-hidden px-3 py-2 hover:bg-gray-100">
           <div class="flex items-start justify-between">
             <div class="flex items-start gap-3 flex-1 w-full">
-              <GeneralUserIcon :email="audit?.created_by_email" :name="audit?.created_display_name" class="mt-0.5" size="medium" />
+              <GeneralUserIcon
+                :email="audit?.created_by_email"
+                :name="audit?.created_display_name"
+                class="mt-0.5"
+                size="medium"
+              />
               <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
                 <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
                   <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">

packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue

@@ -464,7 +464,6 @@ onKeyStroke('ArrowDown', onDown)
                         <GeneralUserIcon
                           :email="collaboratorsMap.get(integration.created_by)?.email"
                           :name="collaboratorsMap.get(integration.created_by)?.display_name"
-
                           size="base"
                           class="flex-none"
                           :class="{

packages/nc-gui/composables/useAttachmentIcon.ts

@@ -0,0 +1,38 @@
+
+export const useAttachmentIcon = (title: MaybeRefOrGetter<string | undefined>, mimetype: MaybeRefOrGetter<string | undefined>) => {
+  return computed<keyof typeof iconMap>(() => {
+    if (isImage(toValue(title) || '', toValue(mimetype))) {
+      return 'image'
+    }
+
+    if (isPdf(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypePdf'
+    }
+
+    if (isVideo(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeVideo'
+    }
+
+    if (isAudio(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeAudio'
+    }
+
+    if (isWord(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeWord'
+    }
+
+    if (isExcel(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeExcel'
+    }
+
+    if (isPresentation(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypePresentation'
+    }
+
+    if (isZip(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeZip'
+    }
+
+    return 'ncFileTypeUnknown'
+  })
+}