fix: styling issues

5 months ago · 7f40692fc1
5 changed files with 61 additions and 40 deletions
--- a/packages/nc-gui/components/cell/attachment/AttachFile.vue
+++ b/packages/nc-gui/components/cell/attachment/AttachFile.vue
@ -47,8 +47,8 @@ watch(activeMenu, (newVal, oldValue) => {
    @keydown.esc="dialogShow = false"
  >
    <div class="flex h-full flex-row">
-      <div style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem" class="px-2 !-full flex-grow bg-gray-100">
-        <NcMenu class="!h-full !bg-gray-100">
+      <div style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem" class="px-2 !-full flex-grow bg-gray-50">
+        <NcMenu class="!h-full !bg-gray-50">
          <NcMenuItem
            key="local"
            :class="{
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@ -28,8 +28,6 @@ const dropZoneRef = ref<HTMLDivElement>()

 const sortableRef = ref<HTMLDivElement>()

-const { isMobileMode } = useGlobal()
-
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)

 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@ -136,70 +134,84 @@ const handleFileDelete = (i: number) => {
        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"
+          v-for="(item, i) in visibleItems"
+          :key="`${item?.title}-${i}`"
+          class="nc-attachment-item group gap-2 flex border-1 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"
+            :class="{
+              'cursor-move': dragging,
+              'cursor-pointer': !dragging,
+              'h-full': !isImage(item.title, item.mimetype),
+            }"
+            class="nc-attachment 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"
+              object-fit="cover"
+              class="!w-full h-42 object-cover !m-0 rounded-t-[5px] justify-center"
              @click.stop="onClick(item)"
            />

            <component
              :is="FileIcon(item.icon)"
              v-else-if="item.icon"
-              :height="isMobileMode ? 45 : 150"
-              :width="isMobileMode ? 45 : 150"
+              :height="45"
+              :width="45"
              @click.stop="openAttachment(item)"
            />

-            <IcOutlineInsertDriveFile
-              v-else
-              :height="isMobileMode ? 45 : 150"
-              :width="isMobileMode ? 45 : 150"
-              @click.stop="openAttachment(item)"
-            />
+            <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="openAttachment(item)" />
          </div>

-          <div class="relative px-4 pb-2 flex text-gray-500 text-sm" :title="item.title">
-            <div class="flex-auto truncate line-height-4">
+          <div class="relative px-1 flex" :title="item.title">
+            <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
              {{ item.title }}
-            </div>
-            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-6 flex items-center bg-white">
+
+              <template #title>
+                {{ item.title }}
+              </template>
+            </NcTooltip>
+            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
              <NcTooltip placement="bottom">
                <template #title> {{ $t('title.downloadFile') }} </template>
-                <NcButton class="!text-gray-500" size="xsmall" type="text" @click="downloadAttachment(item)">
-                  <component :is="iconMap.download" class="h-[14px] w-[14px]" />
+                <NcButton
+                  class="!p-0 !w-5 !h-5 text-gray-500 !min-w-[fit-content]"
+                  size="xsmall"
+                  type="text"
+                  @click="downloadAttachment(item)"
+                >
+                  <component :is="iconMap.download" class="!text-xs" />
                </NcButton>
              </NcTooltip>

              <NcTooltip v-if="!isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                <template #title> {{ $t('title.renameFile') }} </template>
-                <NcButton size="xsmall" class="nc-attachment-rename !text-gray-500" type="text" @click="renameFile(item, i)">
-                  <component :is="iconMap.rename" class="h-[14px] w-[14px]" />
+                <NcButton
+                  size="xsmall"
+                  class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content]"
+                  type="text"
+                  @click="renameFile(item, i)"
+                >
+                  <component :is="iconMap.rename" class="text-xs" />
                </NcButton>
              </NcTooltip>

-              <NcTooltip v-if="!readOnly" placement="bottom">
+              <NcTooltip v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                <template #title> {{ $t('title.removeFile') }} </template>
-                <NcButton class="!text-red-500" size="xsmall" type="text" @click="onRemoveFileClick(item.title, i)">
-                  <component
-                    :is="iconMap.delete"
-                    v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
-                    class="h-[14px] w-[14px]"
-                  />
+                <NcButton
+                  class="!p-0 !h-4 !w-4 !text-red-500 nc-attachment-remove !min-w-[fit-content]"
+                  size="xsmall"
+                  type="text"
+                  @click="onRemoveFileClick(item.title, i)"
+                >
+                  <component :is="iconMap.delete" />
                </NcButton>
              </NcTooltip>
            </div>
@ -251,5 +263,9 @@ const handleFileDelete = (i: number) => {
      @apply !pointer-events-none;
    }
  }
+
+  .nc-checkbox > .ant-checkbox {
+    box-shadow: none !important;
+  }
 }
 </style>
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
@ -106,7 +106,7 @@ onBeforeUnmount(() => {
      ref="dropZoneRef"
      :class="{
        'border-brand-500': isOverDropZone,
-        'border-dashed border-1': !tempFiles.length,
+        'border-dashed border-2': !tempFiles.length,
      }"
      data-testid="attachment-drop-zone"
      :style="`height: ${tempFiles.length > 0 ? '324px' : '100%'}`"
@ -115,11 +115,11 @@ onBeforeUnmount(() => {
    >
      <div v-if="!tempFiles.length" class="flex cursor-pointer items-center justify-center flex-col gap-2">
        <template v-if="!isOverDropZone">
-          <component :is="iconMap.upload" class="w-5 h-5" />
+          <component :is="iconMap.upload" class="w-6 h-6" />
          <h1>
            {{ $t('labels.clickTo') }}

-            <span class="font-semibold"> {{ $t('labels.browseFiles') }} </span>
+            <span class="font-semibold text-brand-500"> {{ $t('labels.browseFiles') }} </span>
            {{ $t('general.or') }}
            <span class="font-semibold"> {{ $t('labels.dragFilesHere') }} </span>

--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
@ -38,7 +38,7 @@ const deleteAttachment = (index: number) => {
  tempAttachments.value.splice(index, 1)
 }

-const isValidUrl = ref(true)
+const isValidUrl = ref(false)

 const errorMessage = ref('')

--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@ -129,6 +129,7 @@ watch(
 const isNewAttachmentModalOpen = ref(false)

 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (modalVisible.value) return
  if (e.key === 'Enter' && !isReadonly.value && !selectedFile.value) {
    if (isNewAttachmentModalOpen.value) return
    e.stopPropagation()
@ -238,9 +239,13 @@ const handleFileDelete = (i: number) => {
        </div>

        <div class="relative px-1 flex" :title="item.title">
-          <div class="flex-auto text-[13px] items-center truncate text-sm line-height-4">
+          <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
            {{ item.title }}
-          </div>
+
+            <template #title>
+              {{ item.title }}
+            </template>
+          </NcTooltip>
          <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
            <NcTooltip placement="bottom">
              <template #title> {{ $t('title.downloadFile') }} </template>