github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor(nc-gui): use LazyCellAttachmentImage

pull/5046/head
Wing-Kam Wong 2 years ago
parent
59e6cd147d
commit
27a317a6e7
5 changed files with 21 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      packages/nc-gui/components/cell/attachment/Carousel.vue
  2. 13
      packages/nc-gui/components/cell/attachment/Modal.vue
  3. 17
      packages/nc-gui/components/cell/attachment/index.vue
  4. 9
      packages/nc-gui/components/smartsheet/Gallery.vue
  5. 9
      packages/nc-gui/components/smartsheet/Kanban.vue

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

@ -9,7 +9,7 @@ const carouselRef = ref()
const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype))) const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
const { getAttachmentSrc, showFallback } = useAttachment() const { getPossibleAttachmentSrc } = useAttachment()
/** navigate to previous image on button click */ /** navigate to previous image on button click */
onKeyDown( onKeyDown(
@ -84,18 +84,15 @@ onClickOutside(carouselRef, () => {
<template #customPaging="props"> <template #customPaging="props">
<a> <a>
<LazyNuxtImg <LazyCellAttachmentImage
quality="90"
placeholder
class="!block" class="!block"
:alt="imageItems[props.i].title || `#${props.i}`" :alt="imageItems[props.i].title || `#${props.i}`"
:src="getAttachmentSrc(imageItems[props.i])" :src="getPossibleAttachmentSrc(imageItems[props.i])"
:onerror="(e) => showFallback(e, imageItems[props.i])"
/> />
</a> </a>
</template> </template>
<div v-for="item of imageItems" :key="getAttachmentSrc(item)"> <div v-for="(item, idx) of imageItems" :key="idx">
<LazyNuxtImg :src="getAttachmentSrc(item)" class="max-w-70vw max-h-70vh" :onerror="(e) => showFallback(e, item)" /> <LazyCellAttachmentImage :src="getPossibleAttachmentSrc(item)" class="max-w-70vw max-h-70vh" />
</div> </div>
</a-carousel> </a-carousel>
</div> </div>

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

@ -2,7 +2,7 @@
import { onKeyDown } from '@vueuse/core' import { onKeyDown } from '@vueuse/core'
import { useAttachmentCell } from './utils' import { useAttachmentCell } from './utils'
import { useSortable } from './sort' import { useSortable } from './sort'
import { isImage, openLink, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports' import { isImage, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
@ -38,7 +38,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
const { isSharedForm } = useSmartsheetStoreOrThrow() const { isSharedForm } = useSmartsheetStoreOrThrow()
const { getAttachmentSrc, showFallback } = useAttachment() const { getPossibleAttachmentSrc, openAttachment } = useAttachment()
onKeyDown('Escape', () => { onKeyDown('Escape', () => {
modalVisible.value = false modalVisible.value = false
@ -160,11 +160,10 @@ function onRemoveFileClick(title: any, i: number) {
:class="[dragging ? 'cursor-move' : 'cursor-pointer']" :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden" class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
> >
<LazyNuxtImg <LazyCellAttachmentImage
v-if="isImage(item.title, item.mimetype)" v-if="isImage(item.title, item.mimetype)"
:src="getAttachmentSrc(item)" :src="getPossibleAttachmentSrc(item)"
class="max-w-full max-h-full margin-auto justify-center" class="max-w-full max-h-full margin-auto justify-center"
:onerror="(e) => showFallback(e, item)"
@click.stop="onClick(item)" @click.stop="onClick(item)"
/> />
@ -173,10 +172,10 @@ function onRemoveFileClick(title: any, i: number) {
v-else-if="item.icon" v-else-if="item.icon"
height="150" height="150"
width="150" width="150"
@click.stop="openLink(getAttachmentSrc(item))" @click.stop="openAttachment(item)"
/> />
<IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(getAttachmentSrc(item))" /> <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openAttachment(item)" />
</div> </div>
</a-card> </a-card>

17
packages/nc-gui/components/cell/attachment/index.vue
Unescape View File

@ -10,7 +10,6 @@ import {
inject, inject,
isImage, isImage,
nextTick, nextTick,
openLink,
ref, ref,
useAttachment, useAttachment,
useDropZone, useDropZone,
@ -47,7 +46,7 @@ const currentCellRef = ref<Element | undefined>(dropZoneInjection.value)
const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()! const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
const { getAttachmentSrc, showFallback } = useAttachment() const { getPossibleAttachmentSrc, openAttachment } = useAttachment()
const { const {
isPublic, isPublic,
@ -223,21 +222,13 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<div class="text-center w-full">{{ item.title }}</div> <div class="text-center w-full">{{ item.title }}</div>
</template> </template>
<template v-if="isImage(item.title, item.mimetype ?? item.type) && getAttachmentSrc(item)"> <template v-if="isImage(item.title, item.mimetype ?? item.type)">
<div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item"> <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
<LazyNuxtImg <LazyCellAttachmentImage :alt="item.title || `#${i}`" :src="getPossibleAttachmentSrc(item)" />
quality="75"
placeholder
fit="cover"
:alt="item.title || `#${i}`"
:src="getAttachmentSrc(item)"
class="max-w-full max-h-full"
:onerror="(e) => showFallback(e, item)"
/>
</div> </div>
</template> </template>
<div v-else class="nc-attachment flex items-center justify-center" @click="openLink(item.url || item.data)"> <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
<component :is="FileIcon(item.icon)" v-if="item.icon" /> <component :is="FileIcon(item.icon)" v-if="item.icon" />
<IcOutlineInsertDriveFile v-else /> <IcOutlineInsertDriveFile v-else />

9
packages/nc-gui/components/smartsheet/Gallery.vue
Unescape View File

@ -65,7 +65,7 @@ const route = useRoute()
const router = useRouter() const router = useRouter()
const { getAttachmentSrc, showFallback } = useAttachment() const { getPossibleAttachmentSrc } = useAttachment()
const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id)) const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
@ -202,14 +202,11 @@ watch(view, async (nextView) => {
<div style="z-index: 1"></div> <div style="z-index: 1"></div>
</template> </template>
<LazyNuxtImg <LazyCellAttachmentImage
v-for="(attachment, index) in attachments(record)" v-for="(attachment, index) in attachments(record)"
:key="`carousel-${record.row.id}-${index}`" :key="`carousel-${record.row.id}-${index}`"
quality="90"
placeholder
class="h-52 object-contain" class="h-52 object-contain"
:src="getAttachmentSrc(attachment)" :src="getPossibleAttachmentSrc(attachment)"
:onerror="(e) => showFallback(e, attachment)"
/> />
</a-carousel> </a-carousel>

9
packages/nc-gui/components/smartsheet/Kanban.vue
Unescape View File

@ -56,7 +56,7 @@ const route = useRoute()
const router = useRouter() const router = useRouter()
const { getAttachmentSrc, showFallback } = useAttachment() const { getPossibleAttachmentSrc } = useAttachment()
const { const {
loadKanbanData, loadKanbanData,
@ -459,14 +459,11 @@ watch(view, async (nextView) => {
<div style="z-index: 1"></div> <div style="z-index: 1"></div>
</template> </template>
<LazyNuxtImg <LazyCellAttachmentImage
v-for="(attachment, index) in attachments(record)" v-for="(attachment, index) in attachments(record)"
:key="`carousel-${record.row.id}-${index}`" :key="`carousel-${record.row.id}-${index}`"
quality="90"
placeholder
class="h-52 object-cover" class="h-52 object-cover"
:src="getAttachmentSrc(attachment)" :src="getPossibleAttachmentSrc(attachment)"
:onerror="(e) => showFallback(e, attachment)"
/> />
</a-carousel> </a-carousel>

Write Preview
Loading…
Cancel
Save