{
v-if="isImage(item.title, item.mimetype)"
:alt="item.title || `#${i}`"
:src="item.url || item.data"
- @click="selectImage(item.url || item.data, i)"
+ @click="selectImage(item)"
/>
diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
index c7985cc2bc..80cf19fb46 100644
--- a/packages/nc-gui-v2/components/cell/attachment/sort.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -39,8 +39,6 @@ export function useSortable(
// todo: replace with vuedraggable
const initSortable = (el: HTMLElement) => {
- if (sortable) sortable.destroy()
-
sortable = new Sortable(el, {
handle: '.nc-attachment',
ghostClass: 'ghost',
@@ -50,11 +48,12 @@ export function useSortable(
}
watchPostEffect((onCleanup) => {
+ const _element = unref(element)
+
onCleanup(() => {
- if (sortable) sortable.destroy()
+ if (_element && sortable) sortable.destroy()
})
- const _element = unref(element)
if (_element) initSortable(_element)
})
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 1716d85969..c874b6e6d4 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -31,6 +31,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
const modalVisible = ref(false)
+ const selectedImage = ref()
+
const { project } = useProject()
const { api, isLoading } = useApi()
@@ -140,6 +142,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
removeFile,
downloadFile,
updateModelValue,
+ selectedImage,
}
},
'attachmentCell',
From 72172bf6cfcc0aebe72abf8f9a664c1ea8fca1ca Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 23:51:56 +0200
Subject: [PATCH 17/40] feat(gui-v2): disable interaction on attachments for
readonly state
---
.../nc-gui-v2/components/cell/attachment/Modal.vue | 10 ++++++----
.../nc-gui-v2/components/cell/attachment/index.vue | 13 ++++++++++---
.../nc-gui-v2/components/cell/attachment/sort.ts | 3 ++-
.../nc-gui-v2/components/cell/attachment/utils.ts | 5 ++++-
4 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index da5295b52f..da610af049 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -17,6 +17,7 @@ const {
isLoading,
isPublicGrid,
isForm,
+ isReadonly,
visibleItems,
modalVisible,
column,
@@ -34,7 +35,7 @@ const dropZoneRef = ref
()
const sortableRef = ref()
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -49,7 +50,7 @@ onKeyDown('Escape', () => {
@@ -58,6 +59,7 @@ onKeyDown('Escape', () => {
+
[Readonly]
Viewing Attachments of
{{ column.title }}
@@ -66,7 +68,7 @@ onKeyDown('Escape', () => {
@@ -77,7 +79,7 @@ onKeyDown('Escape', () => {
-
+
Remove File
+import { onKeyDown } from '@vueuse/core'
import { useProvideAttachmentCell } from './utils'
import Modal from './Modal.vue'
import { useSortable } from './sort'
@@ -27,10 +28,10 @@ const dropZoneRef = ref()
const sortableRef = ref()
-const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage } =
+const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
useProvideAttachmentCell(updateModelValue)
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -51,13 +52,18 @@ function updateModelValue(data: string | Record) {
const selectImage = (file: any) => {
selectedImage.value = file
}
+
+onKeyDown('Escape', () => {
+ modalVisible.value = false
+ isOverDropZone.value = false
+})
-
+
@@ -67,6 +73,7 @@ const selectImage = (file: any) => {
,
items: MaybeRef
,
updateModelValue: (data: string | Record[]) => void,
+ isReadonly: MaybeRef = false,
) {
let dragging = $ref(false)
@@ -54,7 +55,7 @@ export function useSortable(
if (_element && sortable) sortable.destroy()
})
- if (_element) initSortable(_element)
+ if (_element && !unref(isReadonly)) initSortable(_element)
})
return {
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index c874b6e6d4..0909787fb7 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,7 +1,7 @@
import { notification } from 'ant-design-vue'
import FileSaver from 'file-saver'
import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, MetaInj } from '~/context'
+import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
import { isImage } from '~/utils'
import { NOCO } from '~/lib'
import MdiPdfBox from '~icons/mdi/pdf-box'
@@ -12,6 +12,8 @@ import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
(updateModelValue: (data: string | Record[]) => void) => {
+ const isReadonly = inject(ReadonlyInj, false)
+
const isPublicForm = inject('isPublicForm', false)
const isForm = inject('isForm', false)
@@ -130,6 +132,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
isPublicForm,
isForm,
isPublicGrid,
+ isReadonly,
meta,
column,
editEnabled,
From 629838c874ecc9cf763d253471c0c997f950f220 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:13:19 +0200
Subject: [PATCH 18/40] chore(gui-v2): update attachment cell styles
---
.../components/cell/attachment/Modal.vue | 4 +-
.../components/cell/attachment/index.vue | 102 +++++++++---------
2 files changed, 52 insertions(+), 54 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index da610af049..f51ffaf9f2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -70,10 +70,10 @@ onKeyDown('Escape', () => {
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index ffcf4f0cb2..1350d36499 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -60,78 +60,76 @@ onKeyDown('Escape', () => {
-
+
Drop here
-
-
-
+
+
-
- Click or drop a file into cell
+
+ Click or drop a file into cell
-
+ Add file(s)
+
+
+
-
+
+
+
+
+
+
+
+ View attachments
+
+
+
+
From 7bfbb43e5cec969f20825357cf39a637ff81a5b8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:19:35 +0200
Subject: [PATCH 19/40] chore(gui-v2): prevent image overflow in modal
---
.../components/cell/attachment/Modal.vue | 16 ++++++++++------
1 file changed, 10 insertions(+), 6 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index f51ffaf9f2..09a8b7f7c6 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -97,8 +97,12 @@ onKeyDown('Escape', () => {
-
-
+
+
{
}
.nc-attachment-download {
- @apply absolute bottom-2 right-2;
+ @apply bg-white absolute bottom-2 right-2;
@apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
@apply cursor-pointer rounded shadow flex items-center p-1 border-1;
@apply active:(ring border-0 ring-pink-500);
}
.nc-attachment-remove {
- @apply absolute top-2 right-2;
+ @apply absolute top-2 right-2 bg-white;
@apply hover:(ring ring-red-500);
- @apply cursor-pointer rounded-full border-1;
+ @apply cursor-pointer rounded-full border-2;
@apply active:(ring border-0 ring-red-500);
}
.ant-card-body {
- @apply !p-2;
+ @apply !p-2 w-full h-full;
}
.ant-modal-body {
From 027fc9ef84b0790c916461c0895e4c4617a14528 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:36:16 +0200
Subject: [PATCH 20/40] chore(gui-v2): disable pointer events while dragging
---
.../nc-gui-v2/components/cell/attachment/Modal.vue | 12 ++++++++----
.../nc-gui-v2/components/cell/attachment/index.vue | 4 ++--
2 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 09a8b7f7c6..bba97751ae 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -66,7 +66,7 @@ onKeyDown('Escape', () => {
-
+
-
+
@@ -134,7 +134,7 @@ onKeyDown('Escape', () => {
}
.nc-attachment-item {
- @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative hover:(!border-0);
+ @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative 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;
@@ -177,7 +177,11 @@ onKeyDown('Escape', () => {
@apply !pointer-events-none;
}
- &.dragging {
+ .dragging {
+ .nc-attachment-item {
+ @apply !pointer-events-none;
+ }
+
.ant-tooltip {
@apply !hidden;
}
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 1350d36499..85afdfcba2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -74,7 +74,7 @@ onKeyDown('Escape', () => {
@@ -143,7 +143,7 @@ onKeyDown('Escape', () => {
@apply !pointer-events-none;
}
- &.dragging {
+ .dragging {
.ant-tooltip {
@apply !hidden;
}
From eb7ddcd8e769a37e887828b34069ae12acfb0c43 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:44:54 +0200
Subject: [PATCH 21/40] chore(gui-v2): position img centered
---
packages/nc-gui-v2/components/cell/attachment/Modal.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index bba97751ae..a8f40eec88 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -100,8 +100,8 @@ onKeyDown('Escape', () => {
Date: Wed, 3 Aug 2022 00:59:31 +0200
Subject: [PATCH 22/40] chore(gui-v2): only enable hover styles for FF
---
.../components/cell/attachment/Modal.vue | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index a8f40eec88..ad685df8b8 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -134,19 +134,25 @@ onKeyDown('Escape', () => {
}
.nc-attachment-item {
- @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative hover:!border-0;
+ @apply !h-2/3 !min-h-[200px] flex items-center justify-center 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: '';
}
- &:hover::after {
- @apply ring shadow transform scale-103;
- }
+ @supports (-moz-appearance: none) {
+ &:hover::after {
+ @apply ring shadow transform scale-103;
+ }
- &:active::after {
- @apply ring ring-pink-500 shadow transform scale-103;
+ &:active::after {
+ @apply ring ring-pink-500 shadow transform scale-103;
+ }
}
}
From 153a0abcfac06b09312d98ba91d89d1a29934700 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 01:25:19 +0200
Subject: [PATCH 23/40] refactor(gui-v2): remove scrolling from view list items
---
.../components/cell/attachment/index.vue | 19 ++++++++++---------
1 file changed, 10 insertions(+), 9 deletions(-)
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 85afdfcba2..9d4ae77f5b 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -74,7 +74,7 @@ onKeyDown('Escape', () => {
@@ -91,16 +91,12 @@ onKeyDown('Escape', () => {
-