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

chore: refactor

pull/8990/head
DarkPhoenix2704 4 months ago
parent
d1eea7f285
commit
f146c7306d
No known key found for this signature in database
GPG Key ID: 3F76B10622A07849
1 changed files with 130 additions and 131 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. 261
      packages/nc-gui/components/cell/attachment/Carousel.vue

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

@ -37,7 +37,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
useEventListener(container, 'click', (e) => { useEventListener(container, 'click', (e) => {
const target = e.target as HTMLElement const target = e.target as HTMLElement
if (!target.closest('.keep-open') || !target.closest('.nc-button')) { if (!target.closest('.keep-open') || !target.closest('.nc-button') || !target?.closest('img') || !target?.closest('video')) {
selectedFile.value = false selectedFile.value = false
} }
}) })
@ -83,153 +83,152 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
<template> <template>
<GeneralOverlay v-model="selectedFile" transition :z-index="50" class="bg-black bg-opacity-90"> <GeneralOverlay v-model="selectedFile" transition :z-index="50" class="bg-black bg-opacity-90">
<div v-if="selectedFile" class="flex w-full justify-center items-center"> <div
<div ref="container" class="overflow-hidden w-full flex items-center justify-center text-center relative h-screen"> v-if="selectedFile"
<NcButton ref="container"
class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5" class="flex w-full overflow-hidden justify-center text-center relative h-screen items-center"
size="xsmall" >
type="text" <NcButton
@click.stop="selectedFile = false" class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
size="xsmall"
type="text"
@click.stop="selectedFile = false"
>
<component :is="iconMap.close" class="text-white" />
</NcButton>
<div
class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
>
<h3
style="width: max-content"
class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
@click.stop="downloadAttachment(selectedFile)"
> >
<component :is="iconMap.close" class="text-white" /> {{ selectedFile && selectedFile.title }}
</NcButton> </h3>
</div>
<div
class="keep-open select-none absolute top-5 pointer-events-none inset-x-0 mx-auto group flex items-center justify-center leading-8 inline-block text-center rounded shadow"
>
<h3
style="width: max-content"
class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
@click.stop="downloadAttachment(selectedImage)"
>
{{ selectedFile && selectedFile.title }}
</h3>
</div>
<NcCarousel <NcCarousel class="!absolute inset-16 keep-open flex justify-center items-center" @init-api="(val) => (emblaMainApi = val)">
class="!absolute inset-16 keep-open flex justify-center items-center" <NcCarouselContent>
@init-api="(val) => (emblaMainApi = val)" <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
> <div class="w-full h-full justify-center flex items-center">
<NcCarouselContent> <LazyCellAttachmentPreviewImage
<NcCarouselItem v-for="(item, index) in visibleItems" :key="index"> v-if="isImage(item.title, item.mimeType)"
<div class="w-full h-full justify-center flex items-center"> class="nc-attachment-img-wrapper"
object-fit="contain"
:alt="item.title"
:srcs="getPossibleAttachmentSrc(item)"
/>
<LazyCellAttachmentPreviewVideo
v-else-if="isVideo(item.title, item.mimeType)"
class="!h-full flex items-center"
:src="getPossibleAttachmentSrc(item)[0]"
:sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
/>
<LazyCellAttachmentPreviewPdf
v-else-if="isPdf(item.title, item.mimeType)"
class="keep-open"
:src="getPossibleAttachmentSrc(item)[0]"
/>
<div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
<component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
<div class="text-gray-800 text-sm">{{ item.title }}</div>
</div>
</div>
</NcCarouselItem>
</NcCarouselContent>
</NcCarousel>
<div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
<NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
<NcCarouselContent class="!flex !gap-2 ml-0">
<NcCarouselItem
v-for="(item, index) in visibleItems"
:key="index"
:class="{
'opacity-100': index === selectedIndex,
'!basis-1/2': visibleItems.length === 2,
'!basis-1/3': visibleItems.length === 3,
'!basis-1': visibleItems.length === 1,
'!basis-1/4': visibleItems.length === 4,
'!basis-1/8': visibleItems.length > 4,
}"
class="px-2 keep-open opacity-50 cursor-pointer"
@click="onThumbClick(index)"
>
<div class="flex items-center justify-center">
<LazyCellAttachmentPreviewImage <LazyCellAttachmentPreviewImage
v-if="isImage(item.title, item.mimeType)" v-if="isImage(item.title, item.mimeType)"
class="nc-attachment-img-wrapper" class="nc-attachment-img-wrapper h-12"
object-fit="contain" object-fit="contain"
:alt="item.title" :alt="item.title"
:srcs="getPossibleAttachmentSrc(item)" :srcs="getPossibleAttachmentSrc(item)"
/> />
<div
<LazyCellAttachmentPreviewVideo
v-else-if="isVideo(item.title, item.mimeType)" v-else-if="isVideo(item.title, item.mimeType)"
class="!h-full flex items-center" class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
:src="getPossibleAttachmentSrc(item)[0]" >
:sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))" <GeneralIcon class="text-white" icon="play" />
/> </div>
<LazyCellAttachmentPreviewPdf
v-else-if="isPdf(item.title, item.mimeType)" <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
class="keep-open" <GeneralIcon class="text-white" icon="file" />
:src="getPossibleAttachmentSrc(item)[0]"
/>
<div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
<component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
<div class="text-gray-800 text-sm">{{ item.title }}</div>
</div> </div>
</div> </div>
</NcCarouselItem> </NcCarouselItem>
</NcCarouselContent> </NcCarouselContent>
</NcCarousel> </NcCarousel>
</div>
<div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center"> <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
<NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)"> <NcTooltip v-if="!isReadonly" placement="bottom">
<NcCarouselContent class="!flex !gap-2 ml-0"> <template #title> {{ $t('title.removeFile') }} </template>
<NcCarouselItem <NcButton
v-for="(item, index) in visibleItems" class="!text-red-500 !hover:bg-transparent"
:key="index" size="xsmall"
:class="{ type="text"
'opacity-100': index === selectedIndex, @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
'!basis-1/2': visibleItems.length === 2, >
'!basis-1/3': visibleItems.length === 3, <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
'!basis-1': visibleItems.length === 1,
'!basis-1/4': visibleItems.length === 4,
'!basis-1/8': visibleItems.length > 4,
}"
class="px-2 keep-open opacity-50 cursor-pointer"
@click="onThumbClick(index)"
>
<div class="flex items-center justify-center">
<LazyCellAttachmentPreviewImage
v-if="isImage(item.title, item.mimeType)"
class="nc-attachment-img-wrapper h-12"
object-fit="contain"
:alt="item.title"
:srcs="getPossibleAttachmentSrc(item)"
/>
<div
v-else-if="isVideo(item.title, item.mimeType)"
class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
>
<GeneralIcon class="text-white" icon="play" />
</div>
<div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
<GeneralIcon class="text-white" icon="file" />
</div>
</div>
</NcCarouselItem>
</NcCarouselContent>
</NcCarousel>
</div>
<div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
<NcTooltip v-if="!isReadonly" placement="bottom">
<template #title> {{ $t('title.removeFile') }} </template>
<NcButton
class="!text-red-500 !hover:bg-transparent"
size="xsmall"
type="text"
@click="onRemoveFileClick(selectedFile.title, selectedIndex)"
>
<component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
</NcButton>
</NcTooltip>
<NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
<template #title> {{ $t('title.renameFile') }} </template>
<NcButton
size="xsmall"
class="nc-attachment-rename !hover:bg-transparent !text-white"
type="text"
@click="renameFile(selectedFile, selectedIndex, true)"
>
<component :is="iconMap.rename" />
</NcButton>
</NcTooltip>
<NcButton size="small" @click="downloadFile(selectedFile)">
<div class="flex items-center gap-2 justify-center">
<component :is="iconMap.download" />
{{ $t('title.downloadFile') }}
</div>
</NcButton> </NcButton>
</div> </NcTooltip>
<GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
<template #entity-preview> <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
<span> <template #title> {{ $t('title.renameFile') }} </template>
<div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4"> <NcButton
<GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon> size="xsmall"
<div class="nc-attachment-rename !hover:bg-transparent !text-white"
class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75" type="text"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" @click="renameFile(selectedFile, selectedIndex, true)"
> >
{{ filetoDelete.title }} <component :is="iconMap.rename" />
</div> </NcButton>
</div> </NcTooltip>
</span>
</template> <NcButton size="small" @click="downloadFile(selectedFile)">
</GeneralDeleteModal> <div class="flex items-center gap-2 justify-center">
<component :is="iconMap.download" />
{{ $t('title.downloadFile') }}
</div>
</NcButton>
</div> </div>
<GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
<template #entity-preview>
<span>
<div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
<GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
<div
class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
>
{{ filetoDelete.title }}
</div>
</div>
</span>
</template>
</GeneralDeleteModal>
</div> </div>
</GeneralOverlay> </GeneralOverlay>
</template> </template>

Write Preview
Loading…
Cancel
Save