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

fix: remove comments fix: update attachment cell ui fix: update attachment expand model

pull/8990/head
DarkPhoenix2704 4 months ago
parent
ebc4f724f9
commit
01c5a87d89
No known key found for this signature in database
GPG Key ID: 3F76B10622A07849
4 changed files with 154 additions and 127 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. 18
      packages/nc-gui/components/cell/attachment/Carousel.vue
  2. 117
      packages/nc-gui/components/cell/attachment/Modal.vue
  3. 78
      packages/nc-gui/components/cell/attachment/index.vue
  4. 16
      packages/nc-gui/components/nc/Tooltip.vue

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

@ -196,14 +196,14 @@ onMounted(() => {
<component :is="iconMap.arrowRight" class="text-7xl" /> <component :is="iconMap.arrowRight" class="text-7xl" />
</div> </div>
<div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2"> <!-- <div v-if="isUIAllowed('commentList') && !isExpandedFormOpen" class="absolute top-2 right-2">
<NcButton class="!hover:bg-transparent" type="text" size="small" @click="toggleComment"> <NcButton class="!hover:bg-transparent" type="text" size="small" @click="toggleComment">
<div class="flex gap-1 text-white justify-center items-center"> <div class="flex gap-1 text-white justify-center items-center">
Comments Comments
<GeneralIcon icon="messageCircle" /> <GeneralIcon icon="messageCircle" />
</div> </div>
</NcButton> </NcButton>
</div> </div> -->
<div class="text-white absolute right-2 top-2 cursor-pointer"></div> <div class="text-white absolute right-2 top-2 cursor-pointer"></div>
@ -253,7 +253,11 @@ onMounted(() => {
</div> </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"> <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="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom"> <NcTooltip
v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)"
color="light"
placement="bottom"
>
<template #title> {{ $t('title.renameFile') }} </template> <template #title> {{ $t('title.renameFile') }} </template>
<NcButton <NcButton
size="xsmall" size="xsmall"
@ -265,14 +269,14 @@ onMounted(() => {
</NcButton> </NcButton>
</NcTooltip> </NcTooltip>
<NcTooltip v-if="!isReadonly" placement="bottom"> <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
<template #title> {{ $t('title.downloadFile') }} </template> <template #title> {{ $t('title.downloadFile') }} </template>
<NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)"> <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
<component :is="iconMap.download" /> <component :is="iconMap.download" />
</NcButton> </NcButton>
</NcTooltip> </NcTooltip>
<NcTooltip v-if="!isReadonly" placement="bottom"> <NcTooltip v-if="!isReadonly" color="light" placement="bottom">
<template #title> {{ $t('title.removeFile') }} </template> <template #title> {{ $t('title.removeFile') }} </template>
<NcButton <NcButton
class="!hover:bg-transparent !text-white" class="!hover:bg-transparent !text-white"
@ -300,9 +304,9 @@ onMounted(() => {
</template> </template>
</GeneralDeleteModal> </GeneralDeleteModal>
</div> </div>
<div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88"> <!-- <div v-if="openComments && isUIAllowed('commentList') && !isExpandedFormOpen" class="bg-white w-88 min-w-88 max-w-88">
<LazySmartsheetExpandedFormSidebarComments /> <LazySmartsheetExpandedFormSidebarComments />
</div> </div> -->
</div> </div>
</GeneralOverlay> </GeneralOverlay>
</template> </template>

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

@ -28,6 +28,8 @@ const dropZoneRef = ref<HTMLDivElement>()
const sortableRef = ref<HTMLDivElement>() const sortableRef = ref<HTMLDivElement>()
const { isMobileMode } = useGlobal()
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly) const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop) const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@ -82,19 +84,28 @@ const handleFileDelete = (i: number) => {
</script> </script>
<template> <template>
<a-modal <NcModal
v-model:visible="modalVisible" v-model:visible="modalVisible"
wrap-class-name="nc-modal-attachment-expand-cell"
class="nc-attachment-modal" class="nc-attachment-modal"
:class="{ active: modalVisible }" :class="{ active: modalVisible }"
width="80%" width="80%"
:footer="null"
wrap-class-name="nc-modal-attachment-expand-cell"
> >
<template #title> <div class="flex justify-between pb-2 gap-4">
<div class="flex gap-4"> <div class="font-semibold underline">{{ column?.title }}</div>
<div class="flex items-center gap-2">
<NcButton v-if="selectedVisibleItems.length > 0" size="small" @click="bulkDownloadAttachments">
<div class="flex gap-2 items-center">
<GeneralIcon icon="download" />
{{ $t('activity.bulkDownload') }}
</div>
</NcButton>
<NcButton <NcButton
v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)"
class="nc-attach-file group" class="nc-attach-file group"
size="small"
data-testid="attachment-expand-file-picker-button" data-testid="attachment-expand-file-picker-button"
@click="open" @click="open"
> >
@ -104,36 +115,31 @@ const handleFileDelete = (i: number) => {
</div> </div>
</NcButton> </NcButton>
<div class="flex items-center gap-2"> <NcButton type="secondary" size="small" @click="modalVisible = false">
{{ $t('labels.viewingAttachmentsOf') }} <GeneralIcon icon="close" />
<div class="font-semibold underline">{{ column?.title }}</div>
</div>
<div
v-if="selectedVisibleItems.includes(true) && selectedVisibleItems.length > 1"
class="flex flex-1 items-center gap-3 justify-end mr-[30px]"
>
<NcButton type="primary" class="nc-attachment-download-all" @click="bulkDownloadAttachments">
{{ $t('activity.bulkDownload') }}
</NcButton> </NcButton>
</div> </div>
</div> </div>
</template>
<div ref="dropZoneRef" tabindex="0"> <div ref="dropZoneRef" tabindex="0" class="relative">
<template v-if="isSharedForm || (!readOnly && !dragging)"> <div
<general-overlay v-if="isSharedForm || (!readOnly && !dragging && isOverDropZone)"
v-model="isOverDropZone" class="text-white absolute inset-0 bg-white flex flex-col items-center justify-center gap-2 border-dashed border-1 border-gray-700"
inline
class="text-white ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
> >
<MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" /> <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
<div class="text-white text-3xl">{{ $t('labels.dropHere') }}</div> <div class="text-gray-800 text-3xl">{{ $t('labels.dropHere') }}</div>
</general-overlay> </div>
</template>
<div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6"> <div
<div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col group gap-1"> ref="sortableRef"
<a-card class="nc-attachment-item group"> :class="{ dragging }"
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"
>
<NcCheckbox <NcCheckbox
v-model:checked="selectedVisibleItems[i]" v-model:checked="selectedVisibleItems[i]"
class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)" class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
@ -142,27 +148,32 @@ const handleFileDelete = (i: number) => {
<div <div
: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 flex justify-center items-center overflow-hidden"
> >
<LazyCellAttachmentPreviewImage <LazyCellAttachmentPreviewImage
v-if="isImage(item.title, item.mimetype)" v-if="isImage(item.title, item.mimetype)"
:srcs="getPossibleAttachmentSrc(item)" :srcs="getPossibleAttachmentSrc(item)"
class="max-h-full h-64 m-auto justify-center" class="max-h-full h-64 m-auto rounded-md justify-center"
@click.stop="onClick(item)" @click.stop="onClick(item)"
/> />
<component <component
:is="FileIcon(item.icon)" :is="FileIcon(item.icon)"
v-else-if="item.icon" v-else-if="item.icon"
height="150" :height="isMobileMode ? 45 : 150"
width="150" :width="isMobileMode ? 45 : 150"
@click.stop="openAttachment(item)" @click.stop="openAttachment(item)"
/> />
<IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openAttachment(item)" /> <IcOutlineInsertDriveFile
v-else
:height="isMobileMode ? 45 : 150"
:width="isMobileMode ? 45 : 150"
@click.stop="openAttachment(item)"
/>
</div> </div>
</a-card>
<div class="relative flex" :title="item.title"> <div class="relative px-1 flex" :title="item.title">
<div class="flex-auto truncate line-height-4"> <div class="flex-auto truncate line-height-4">
{{ item.title }} {{ item.title }}
</div> </div>
@ -200,6 +211,7 @@ const handleFileDelete = (i: number) => {
</div> </div>
</div> </div>
</div> </div>
<GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)"> <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
<template #entity-preview> <template #entity-preview>
<span> <span>
@ -215,48 +227,19 @@ const handleFileDelete = (i: number) => {
</span> </span>
</template> </template>
</GeneralDeleteModal> </GeneralDeleteModal>
</a-modal> </NcModal>
</template> </template>
<style lang="scss"> <style lang="scss">
.hide-ui { .hide-ui {
@apply h-0 w-0 overflow-hidden whitespace-nowrap; @apply h-0 w-0 overflow-hidden whitespace-nowrap;
// When the parent with class 'group' is hovered
.group:hover & { .group:hover & {
@apply h-auto w-auto overflow-visible whitespace-normal; @apply h-auto w-auto overflow-visible whitespace-normal;
} }
} }
.nc-attachment-modal { .nc-attachment-modal {
.nc-attachment-item { .nc-attachment-item {
@apply !h-2/3 !min-h-[200px] flex items-center justify-center relative; @apply h-[200px] max-h-[200px] flex relative;
@supports (-moz-appearance: none) {
@apply hover:border-0;
}
&::after {
@apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
content: '';
}
@supports (-moz-appearance: none) {
&:hover::after {
@apply ring shadow;
}
&:active::after {
@apply ring ring-accent ring-opacity-100 shadow;
}
}
}
.ant-card-body {
@apply !p-2 w-full h-full;
}
.ant-modal-body {
@apply !p-0;
} }
.dragging { .dragging {

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

@ -231,41 +231,41 @@ const handleFileDelete = (i: number) => {
</template> </template>
<div <div
v-if="!isReadonly" v-if="!isReadonly && active && !visibleItems.length"
:class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }" :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none shadow-sm hover:(bg-primary bg-opacity-10)" class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none"
data-testid="attachment-cell-file-picker-button" data-testid="attachment-cell-file-picker-button"
tabindex="0" tabindex="0"
@click="open"
@keydown.enter="keydownEnter" @keydown.enter="keydownEnter"
@keydown.space="keydownSpace" @keydown.space="keydownSpace"
> >
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<NcTooltip placement="bottom" class="xs:w-full"> <NcTooltip placement="bottom" class="xs:w-full">
<template #title <template #title>
><span data-rec="true">{{ $t('activity.attachmentDrop') }} </span></template <span data-rec="true">{{ $t('activity.attachmentDrop') }} </span>
> </template>
<div <NcButton
v-if="active || !visibleItems.length || (isForm && visibleItems.length)" type="secondary"
class="flex items-center gap-1 xs:(w-full min-w-12 h-7 justify-center)" size="xsmall"
data-testid="attachment-cell-file-picker-button"
class="!px-2 !h-5.5 !min-w-[fit-content]"
@click.stop="open"
> >
<div class="flex items-center !text-xs gap-1 justify-center">
<MaterialSymbolsAttachFile class="text-gray-500 text-tiny" /> <MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
<div <span class="text-[10px]">
v-if="!visibleItems.length"
data-rec="true"
class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-tiny xs:(justify-center rounded-lg text-sm)"
>
{{ $t('activity.addFiles') }} {{ $t('activity.addFiles') }}
</span>
</div> </div>
</div> </NcButton>
</NcTooltip> </NcTooltip>
</div> </div>
<div v-else class="flex" /> <div v-else class="flex" />
<template v-if="visibleItems.length"> <template v-if="visibleItems.length > 0">
<div <div
ref="sortableRef" ref="sortableRef"
:class="{ :class="{
@ -312,7 +312,6 @@ const handleFileDelete = (i: number) => {
'h-8': rowHeight === 2, 'h-8': rowHeight === 2,
'h-16.8': rowHeight === 4, 'h-16.8': rowHeight === 4,
'h-20.8 !w-30': rowHeight === 6 || isForm || isExpandedForm, 'h-20.8 !w-30': rowHeight === 6 || isForm || isExpandedForm,
'ml-2': active,
}" }"
@click="onFileClick(item)" @click="onFileClick(item)"
> >
@ -334,20 +333,49 @@ const handleFileDelete = (i: number) => {
</template> </template>
</div> </div>
<div <NcTooltip
v-if="active || (isForm && visibleItems.length)" placement="bottom"
class="xs:hidden group cursor-pointer flex gap-1 items-center rounded border-none p-1" class="nc-action-icon !absolute !hidden right-0 nc-text-area-expand-btn group-hover:block z-3"
:class="{
'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
'top-1': !(isGrid && !isForm),
}"
:style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
>
<template #title>{{ $t('activity.viewAttachment') }}</template>
<NcButton
type="secondary"
size="xsmall"
data-testid="attachment-cell-file-picker-button"
class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
@click.stop="onExpand"
> >
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<NcTooltip v-else placement="bottom" class="flex"> <component :is="iconMap.expand" v-else class="transform group-hover:(!text-grey-800) text-gray-700 text-xs" />
<template #title> {{ $t('activity.viewAttachment') }}</template> </NcButton>
</NcTooltip>
<NcButton type="text" size="xsmall" @click.stop="onExpand"> <NcTooltip
<component :is="iconMap.expand" /> placement="bottom"
class="nc-action-icon !absolute !hidden left-0 nc-text-area-expand-btn group-hover:block z-3"
:class="{
'top-0': isGrid && !isForm && !(!rowHeight || rowHeight === 1),
'top-1': !(isGrid && !isForm),
}"
:style="isGrid && !isForm && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
>
<template #title>{{ $t('activity.addFiles') }}</template>
<NcButton
type="secondary"
size="xsmall"
data-testid="attachment-cell-file-picker-button"
class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
@click.stop="open"
>
<MaterialSymbolsAttachFile class="text-gray-500 text-tiny group-hover:(!text-grey-800) text-gray-700" />
</NcButton> </NcButton>
</NcTooltip> </NcTooltip>
</div>
</template> </template>
<LazyCellAttachmentModal v-if="modalRendered" /> <LazyCellAttachmentModal v-if="modalRendered" />

16
packages/nc-gui/components/nc/Tooltip.vue
Unescape View File

@ -8,6 +8,7 @@ interface Props {
modifierKey?: string modifierKey?: string
tooltipStyle?: CSSProperties tooltipStyle?: CSSProperties
// force disable tooltip // force disable tooltip
color?: 'dark' | 'light'
disabled?: boolean disabled?: boolean
placement?: TooltipPlacement | undefined placement?: TooltipPlacement | undefined
showOnTruncateOnly?: boolean showOnTruncateOnly?: boolean
@ -28,6 +29,8 @@ const hideOnClick = computed(() => props.hideOnClick)
const placement = computed(() => props.placement ?? 'top') const placement = computed(() => props.placement ?? 'top')
const wrapChild = computed(() => props.wrapChild ?? 'div') const wrapChild = computed(() => props.wrapChild ?? 'div')
const color = computed(() => (props.color ? props.color : 'dark'))
const el = ref() const el = ref()
const showTooltip = controlledRef(false, { const showTooltip = controlledRef(false, {
@ -117,7 +120,7 @@ const onClick = () => {
<template> <template>
<a-tooltip <a-tooltip
v-model:visible="showTooltip" v-model:visible="showTooltip"
:overlay-class-name="`nc-tooltip ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`" :overlay-class-name="`nc-tooltip-${color} ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`"
:overlay-style="tooltipStyle" :overlay-style="tooltipStyle"
:overlay-inner-style="overlayInnerStyle" :overlay-inner-style="overlayInnerStyle"
arrow-point-at-center arrow-point-at-center
@ -139,7 +142,7 @@ const onClick = () => {
.nc-tooltip.hidden { .nc-tooltip.hidden {
@apply invisible; @apply invisible;
} }
.nc-tooltip { .nc-tooltip-dark {
.ant-tooltip-inner { .ant-tooltip-inner {
@apply !px-2 !py-1 !rounded-lg !bg-gray-800; @apply !px-2 !py-1 !rounded-lg !bg-gray-800;
} }
@ -147,4 +150,13 @@ const onClick = () => {
@apply !bg-gray-800; @apply !bg-gray-800;
} }
} }
.nc-tooltip-light {
.ant-tooltip-inner {
@apply !px-2 !py-1 !text-gray-800 !rounded-lg !bg-gray-200;
}
.ant-tooltip-arrow-content {
@apply !bg-gray-200;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save