Merge pull request #6845 from nocodb/nc-fix/links-modal-ui-fix

Nc fix/links modal UI fix

packages/nc-gui/assets/nc-icons/file-image.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="white" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#F4F4F5"/>
+<path d="M28.6667 18H19.3333C18.597 18 18 18.597 18 19.3333V28.6667C18 29.403 18.597 30 19.3333 30H28.6667C29.403 30 30 29.403 30 28.6667V19.3333C30 18.597 29.403 18 28.6667 18Z" stroke="#9AA2AF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.0002 25.9998L26.6668 22.6665L19.3335 29.9998" stroke="#9AA2AF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.6665 22.6665C22.2188 22.6665 22.6665 22.2188 22.6665 21.6665C22.6665 21.1142 22.2188 20.6665 21.6665 20.6665C21.1142 20.6665 20.6665 21.1142 20.6665 21.6665C20.6665 22.2188 21.1142 22.6665 21.6665 22.6665Z" stroke="#9AA2AF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/nc-gui/components/virtual-cell/components/ListItem.vue

@@ -82,20 +82,24 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     :hoverable="false"
   >
     <div class="flex flex-row items-center justify-start w-full">
-      <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24">
+      <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24 !max-h-24 !max-w-24">
         <template #customPaging> </template>
         <template v-for="(attachmentObj, index) in attachments">
           <LazyCellAttachmentImage
             v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
             :key="`carousel-${attachmentObj.title}-${index}`"
-            class="!h-24 !w-24 object-cover !rounded-l-xl"
+            class="!h-24 !w-24 !max-h-24 !max-w-24 object-cover !rounded-l-xl"
             :srcs="getPossibleAttachmentSrc(attachmentObj)"
           />
         </template>
       </a-carousel>
-      <div v-else-if="attachment" class="h-24 w-24 w-full !flex flex-row items-center !rounded-l-xl justify-center">
+      <div
-        <img class="object-contain h-24 w-24" src="~assets/icons/FileIconImageBox.png" />
+        v-else-if="attachment"
+        class="h-24 w-24 !min-h-24 !min-w-24 !max-h-24 !max-w-24 !flex flex-row items-center !rounded-l-xl justify-center"
+      >
+        <GeneralIcon class="w-full h-full !text-6xl !leading-10 !text-transparent rounded-lg" icon="fileImage" />
       </div>
+
       <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center overflow-hidden">
         <div class="flex justify-between xs:gap-x-2">
           <span class="font-semibold text-gray-800 nc-display-value xs:(truncate)">
@@ -167,3 +171,9 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     </NcButton>
   </a-card>
 </template>
+
+<style lang="scss" scoped>
+:deep(.slick-list) {
+  @apply rounded-lg;
+}
+</style>

packages/nc-gui/utils/iconUtils.ts

@@ -89,6 +89,7 @@ import BelongsToSolidIcon from '~icons/nc-icons/bt-solid'
 import Record from '~icons/nc-icons/record'
 import Project from '~icons/nc-icons/project'
 import LookupIcon from '~icons/nc-icons/lookup'
+import FileImageIcon from '~icons/nc-icons/file-image'
 
 // Roles
 import SuperAdmin from '~icons/nc-icons/super-admin'
@@ -450,6 +451,7 @@ export const iconMap = {
   role_super: SuperAdmin,
   role_no_access: NoAccess,
   commentHere: NcCommentHere,
+  fileImage: FileImageIcon,
 }
 
 export const getMdiIcon = (type: string): any => {