clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-05 06:17:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nc-gui): try possible attachment sources

Browse Source
This commit is contained in:
Wing-Kam Wong
2023-02-07 14:08:31 +08:00
parent c90f8e3a6d
commit 2a14bb5ec7
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/nc-gui/components/cell/attachment/Carousel.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { onKeyDown } from '@vueuse/core'
import { useAttachmentCell } from './utils'
import { computed, isImage, onClickOutside, ref } from '#imports'
import { computed, isImage, onClickOutside, ref, useAttachment } from '#imports'
const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
@@ -9,6 +9,8 @@ const carouselRef = ref()
const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
const { getAttachmentSrc, showFallback, getBackgroundImage } = useAttachment()
/** navigate to previous image on button click */
onKeyDown(
(e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
@@ -87,14 +89,14 @@ onClickOutside(carouselRef, () => {
placeholder
class="!block"
:alt="imageItems[props.i].title || `#${props.i}`"
:src="imageItems[props.i].url || imageItems[props.i].data"
:src="getAttachmentSrc(imageItems[props.i])"
:onerror="(e) => showFallback(e, imageItems[props.i])"
/>
</a>
</template>
<div v-for="item of imageItems" :key="item.url">
<div v-for="item of imageItems" :key="getAttachmentSrc(item)">
<div
:style="{ backgroundImage: `url('${item.url || item.data}')` }"
:style="{ backgroundImage: getBackgroundImage(item) }"
class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
/>
</div>

12
packages/nc-gui/components/cell/attachment/Modal.vue
View File

@@ -2,7 +2,7 @@
import { onKeyDown } from '@vueuse/core'
import { useAttachmentCell } from './utils'
import { useSortable } from './sort'
import { isImage, openLink, ref, useDropZone, useUIPermission, watch } from '#imports'
import { isImage, openLink, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
const { isUIAllowed } = useUIPermission()
@@ -38,6 +38,8 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
const { isSharedForm } = useSmartsheetStoreOrThrow()
const { getAttachmentSrc, getBackgroundImage } = useAttachment()
onKeyDown('Escape', () => {
modalVisible.value = false
isOverDropZone.value = false
@@ -159,8 +161,8 @@ function onRemoveFileClick(title: any, i: number) {
class="nc-attachment h-full w-full flex items-center justify-center"
>
<div
v-if="isImage(item.title, item.mimetype)"
:style="{ backgroundImage: `url('${item.url || item.data}')` }"
v-if="isImage(item.title, item.mimetype) && getAttachmentSrc(item)"
:style="{ backgroundImage: getBackgroundImage(item) }"
class="w-full h-full bg-contain bg-center bg-no-repeat"
@click.stop="onClick(item)"
/>
@@ -170,10 +172,10 @@ function onRemoveFileClick(title: any, i: number) {
v-else-if="item.icon"
height="150"
width="150"
@click.stop="openLink(item.url || item.data)"
@click.stop="openLink(getAttachmentSrc(item))"
/>
<IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
<IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(getAttachmentSrc(item))" />
</div>
</a-card>