From 99ecc40f9ac9a349716b92e6ace4b4d606eceddf Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Mon, 10 Jun 2024 16:38:56 +0530 Subject: [PATCH] Nc Refactor: Gallery view (#8674) * fix(nc-gui): introduce header icon in gallery view card and update style * fix(nc-gui): field modal width issue if it is rich text * fix(nc-gui): hide longtext expanded icon on gallery & kanban view card hove * fix(nc-gui): date field alignment issue * fix(nc-gui): udpate kanban view card * fix(nc-gui): udpate gallery & kanban view card display value style * fix(nocodb): hide cover image in new gallery, kanban view if it is not pv column * feat(nc-gui): change cover image object fit property change support * fix(nc-gui): virtual cell card value alignment issue * fix(nc-gui): gallery view card image navigation issue * fix(nc-gui): gallerym, kanban card cover image dots navigation overflow issue * fix(nocodb): use optional chaining to access nested variable * chore(nc-gui): lint * fix(nc-gui): long text max line shuld be 4 in card * test: update open expanded form in gallery test * fix(nc-gui): add empty card in gallery view if cards length is less than 4 * fix(nc-gui): update gallery view card min width * fix(nocodb): small changes * fix(nc-gui): review changes * fix(nc-gui): add input shadow effect * fix(nc-gui): update card image navigation buttons icon * fix(nc-gui): udpate gallery view bg color * fix(nc-gui): update email, url, phone cell height from card * fix(nc-gui): update isEmptyRow function logic * fix(nc-gui): some review changes * fix(nc-gui): card display value color * fix(nc-gui): udpate gallery view card min width * fix(nc-gui): update card shadow & border on hover * fix(nc-gui): update gallery loader card width * fix(nc-gui): add min height for card image * chore(nc-gui): lint * fix(nc-gui): card rich text height * fix(nc-gui): align record count in right side in gallery view * fix(nc-gui): review changes * fix(nc-gui): shared view show & hide field issue * chore(nc-gui): lint * fix(nc-gui): link record test fail issue --- packages/nc-gui/components/cell/Checkbox.vue | 2 +- .../nc-gui/components/cell/DateTimePicker.vue | 15 +- packages/nc-gui/components/cell/RichText.vue | 16 +- packages/nc-gui/components/cell/TextArea.vue | 24 +- .../components/cell/attachment/index.vue | 2 +- .../notification/Item/ProjectInvite.vue | 3 +- .../nc-gui/components/smartsheet/Gallery.vue | 274 +++++++++++++----- .../nc-gui/components/smartsheet/Kanban.vue | 258 ++++++++++++----- .../smartsheet/SharedMapMarkerPopup.vue | 7 - .../smartsheet/column/EditOrAdd.vue | 1 - .../smartsheet/toolbar/FieldsMenu.vue | 187 +++++++++++- .../nc-gui/components/virtual-cell/QrCode.vue | 3 - .../virtual-cell/barcode/JsBarcodeWrapper.vue | 1 - .../virtual-cell/components/ListItem.vue | 9 +- packages/nc-gui/composables/useViewColumns.ts | 45 ++- packages/nc-gui/lang/en.json | 5 +- packages/nc-gui/lib/enums.ts | 5 + packages/nc-gui/utils/dataUtils.ts | 3 +- packages/nc-gui/utils/formValidations.ts | 4 +- packages/nc-gui/windi.config.ts | 2 + packages/nocodb/src/models/GalleryView.ts | 15 +- packages/nocodb/src/models/KanbanView.ts | 14 +- packages/nocodb/src/models/View.ts | 18 +- .../pages/Dashboard/Gallery/index.ts | 4 +- 24 files changed, 713 insertions(+), 204 deletions(-) diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue index 834e4d98e4..52480dbdf6 100644 --- a/packages/nc-gui/components/cell/Checkbox.vue +++ b/packages/nc-gui/components/cell/Checkbox.vue @@ -114,7 +114,7 @@ useSelectedCellKeyupListener(active, (e) => { 'justify-center': !isEditColumnMenu && !isGallery && !isForm, 'py-2': isEditColumnMenu, }" - @click="onClick(true)" + @click.stop="onClick(true)" >
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue index 1ab109f118..33c6c4d0cc 100644 --- a/packages/nc-gui/components/cell/RichText.vue +++ b/packages/nc-gui/components/cell/RichText.vue @@ -48,10 +48,20 @@ const isGrid = inject(IsGridInj, ref(false)) const isSurveyForm = inject(IsSurveyFormInj, ref(false)) +const isGallery = inject(IsGalleryInj, ref(false)) + +const isKanban = inject(IsKanbanInj, ref(false)) + const isFocused = ref(false) const keys = useMagicKeys() +const localRowHeight = computed(() => { + if (readOnlyCell.value && !isExpandedFormOpen.value && (isGallery.value || isKanban.value)) return 6 + + return rowHeight.value +}) + const shouldShowLinkOption = computed(() => { return isFormField.value ? isFocused.value : true }) @@ -157,7 +167,7 @@ const editor = useEditor({ .turndown(editor.getHTML().replaceAll(/

<\/p>/g, '
')) .replaceAll(/\n\n
\n\n/g, '
\n\n') - vModel.value = isFormField.value && markdown === '
' ? '' : markdown + vModel.value = markdown === '
' ? '' : markdown }, editable: !props.readOnly, autofocus: props.autofocus, @@ -322,8 +332,8 @@ onClickOutside(editorDom, (e) => { 'mt-2.5 flex-grow': fullMode, 'scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent': !fullMode || (!fullMode && isExpandedFormOpen), 'flex-grow': isExpandedFormOpen, - [`!overflow-hidden nc-truncate nc-line-clamp-${rowHeightTruncateLines(rowHeight)}`]: - !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm, + [`!overflow-hidden nc-truncate nc-line-clamp-${rowHeightTruncateLines(localRowHeight)}`]: + !fullMode && readOnly && localRowHeight && !isExpandedFormOpen && !isForm, }" @keydown.alt.enter.stop @keydown.shift.enter.stop diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue index b959ab9962..4b35a74cb7 100644 --- a/packages/nc-gui/components/cell/TextArea.vue +++ b/packages/nc-gui/components/cell/TextArea.vue @@ -21,6 +21,10 @@ const isForm = inject(IsFormInj, ref(false)) const isGrid = inject(IsGridInj, ref(false)) +const isGallery = inject(IsGalleryInj, ref(false)) + +const isKanban = inject(IsKanbanInj, ref(false)) + const readOnly = inject(ReadonlyInj, ref(false)) const { showNull } = useGlobal() @@ -60,6 +64,12 @@ const height = computed(() => { return rowHeight.value * 36 }) +const localRowHeight = computed(() => { + if (readOnly.value && !isExpandedFormOpen.value && (isGallery.value || isKanban.value)) return 6 + + return rowHeight.value +}) + const isVisible = ref(false) const inputWrapperRef = ref(null) @@ -222,11 +232,11 @@ watch(inputWrapperRef, () => { class="w-full cursor-pointer nc-readonly-rich-text-wrapper" :class="{ 'nc-readonly-rich-text-grid ': !isExpandedFormOpen && !isForm, - 'nc-readonly-rich-text-sort-height': rowHeight === 1 && !isExpandedFormOpen && !isForm, + 'nc-readonly-rich-text-sort-height': localRowHeight === 1 && !isExpandedFormOpen && !isForm, }" :style="{ - maxHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${21 * rowHeightTruncateLines(rowHeight)}px`, - minHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${21 * rowHeightTruncateLines(rowHeight)}px`, + maxHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${21 * rowHeightTruncateLines(localRowHeight)}px`, + minHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${21 * rowHeightTruncateLines(localRowHeight)}px`, }" @dblclick="onExpand" @keydown.enter="onExpand" @@ -265,12 +275,12 @@ watch(inputWrapperRef, () => { @@ -280,7 +290,7 @@ watch(inputWrapperRef, () => {

{{ item.body.user.display_name ?? item.body.user.email }} has invited you to collaborate - on - {{ item.body.base.title }} base. + on {{ item.body.base.title }} base.
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue index df749761c1..598ded899c 100644 --- a/packages/nc-gui/components/smartsheet/Gallery.vue +++ b/packages/nc-gui/components/smartsheet/Gallery.vue @@ -56,12 +56,12 @@ const coverImageColumn: any = computed(() => : {}, ) -const isRowEmpty = (record: any, col: any) => { - const val = record.row[col.title] - if (!val) return true +const coverImageObjectFitClass = computed(() => { + const fk_cover_image_object_fit = parseProp(galleryData.value?.meta)?.fk_cover_image_object_fit || CoverImageObjectFit.FIT - return Array.isArray(val) && val.length === 0 -} + if (fk_cover_image_object_fit === CoverImageObjectFit.FIT) return '!object-contain' + if (fk_cover_image_object_fit === CoverImageObjectFit.COVER) return '!object-cover' +}) const { isUIAllowed } = useRoles() const hasEditPermission = computed(() => isUIAllowed('dataEdit')) @@ -205,7 +205,7 @@ watch(
-
+
-
+
-

- - - -

- -
-
-
-
- - - -
-
- -
+
+

+ + +

+ +
+
+
+
+ + + +
+
+ +
+ + + +
+
-
-
-
+ +
- + - diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue index c59b8c4378..2f6189c77d 100644 --- a/packages/nc-gui/components/smartsheet/Kanban.vue +++ b/packages/nc-gui/components/smartsheet/Kanban.vue @@ -96,16 +96,16 @@ const coverImageColumn: any = computed(() => : {}, ) -const kanbanContainerRef = ref() +const coverImageObjectFitClass = computed(() => { + const fk_cover_image_object_fit = parseProp(kanbanMetaData.value?.meta)?.fk_cover_image_object_fit || CoverImageObjectFit.FIT -const selectedStackTitle = ref('') + if (fk_cover_image_object_fit === CoverImageObjectFit.FIT) return '!object-contain' + if (fk_cover_image_object_fit === CoverImageObjectFit.COVER) return '!object-cover' +}) -const isRowEmpty = (record: any, col: any) => { - const val = record.row[col.title] - if (!val) return true +const kanbanContainerRef = ref() - return Array.isArray(val) && val.length === 0 -} +const selectedStackTitle = ref('') reloadViewDataHook?.on(async () => { await loadKanbanMeta() @@ -512,8 +512,8 @@ const getRowId = (row: RowType) => { acc + curr?.path, '')" class="gallery-carousel !border-b-1 !border-gray-200" + arrows > @@ -570,60 +580,66 @@ const getRowId = (row: RowType) => {
-

- - - -

- -
-
-
-
- - - -
-
- -
+
+

+ + +

+ +
+
+
+
+ + + +
+
+ +
+ + + +
+
-
-
-
@@ -783,8 +799,7 @@ const getRowId = (row: RowType) => { } .ant-carousel.gallery-carousel :deep(.slick-dots) { - @apply !w-auto absolute h-auto bottom-[-15px] absolute h-auto; - height: auto; + @apply !w-full max-w-[calc(100%_-_36%)] absolute left-0 right-0 bottom-[-18px] h-6 overflow-x-auto nc-scrollbar-thin !mx-auto; } .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) { @@ -812,8 +827,121 @@ const getRowId = (row: RowType) => { } :deep(.ant-card) { - &:hover .nc-action-icon { - @apply invisible; + @apply transition-shadow duration-0.3s; + + box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02); + + &:hover { + box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.06); + + .nc-action-icon { + @apply invisible; + } + } +} + +.nc-card-display-value-wrapper { + @apply my-0 text-xl leading-8 text-gray-600; + + .nc-cell, + .nc-virtual-cell { + @apply text-xl leading-8; + + :deep(.nc-cell-field), + :deep(input), + :deep(textarea), + :deep(.nc-cell-field-link) { + @apply !text-xl leading-8 text-gray-600; + } + } +} + +.nc-card-col-header { + :deep(.nc-cell-icon), + :deep(.nc-virtual-cell-icon) { + @apply ml-0; + } +} + +:deep(.nc-cell), +:deep(.nc-virtual-cell) { + @apply text-small leading-[18px]; + + .nc-cell-field, + input, + textarea, + .nc-cell-field-link { + @apply !text-small !leading-[18px]; + } +} +:deep(.nc-cell) { + &.nc-cell-longtext { + .long-text-wrapper { + @apply min-h-1; + .nc-readonly-rich-text-wrapper { + @apply !min-h-1; + } + .nc-rich-text { + @apply pl-0; + .tiptap.ProseMirror { + @apply -ml-1 min-h-1; + } + } + } + } + &.nc-cell-checkbox { + @apply children:pl-0; + } + &.nc-cell-singleselect .nc-cell-field > div { + @apply flex items-center; + } + &.nc-cell-multiselect .nc-cell-field > div { + @apply h-5; + } + &.nc-cell-email, + &.nc-cell-phonenumber { + @apply flex items-center; + } + + &.nc-cell-email, + &.nc-cell-phonenumber, + &.nc-cell-url { + .nc-cell-field-link { + @apply py-0; + } + } +} + +:deep(.nc-virtual-cell) { + .nc-links-wrapper { + @apply py-0 children:min-h-4; + } + &.nc-virtual-cell-linktoanotherrecord { + .chips-wrapper { + @apply min-h-4 !children:min-h-4; + .chip.group { + @apply my-0; + } + } + } + &.nc-virtual-cell-lookup { + .nc-lookup-cell { + @apply !h-5.5; + + .nc-cell-lookup-scroll { + @apply py-0 h-auto; + } + } + } + &.nc-virtual-cell-formula { + .nc-cell-field { + @apply py-0; + } + } + + &.nc-virtual-cell-qrcode, + &.nc-virtual-cell-barcode { + @apply children:justify-start; } } diff --git a/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue b/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue index 2b1dc7e4f2..ca081e18fd 100644 --- a/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue +++ b/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue @@ -15,13 +15,6 @@ const { loadData } = useViewData(meta, view) provide(IsFormInj, ref(false)) provide(IsGridInj, ref(false)) -const isRowEmpty = (record: any, col: any) => { - const val = record.row[col.title] - if (!val) return true - - return Array.isArray(val) && val.length === 0 -} - reloadViewDataHook?.on(async () => { await loadData() }) diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue index 7005f7d767..d0d3410a07 100644 --- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue +++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue @@ -299,7 +299,6 @@ const filterOption = (input: string, option: { value: UITypes }) => { 'bg-white': !props.fromTableExplorer, 'w-[384px]': !props.embedMode, 'min-w-500px': formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links, - '!w-146': isTextArea(formState) && formState.meta?.richMode, '!w-116 overflow-visible': formState.uidt === UITypes.Formula && !props.embedMode, '!w-[500px]': formState.uidt === UITypes.Attachment && !props.embedMode && !appInfo.ee, '!w-[600px]': formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links, diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue index fb0dc2604f..65860952bc 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue @@ -19,6 +19,8 @@ const isPublic = inject(IsPublicInj, ref(false)) const { $api, $e } = useNuxtApp() +const { t } = useI18n() + const { showSystemFields, fields, @@ -194,6 +196,80 @@ const coverImageColumnId = computed({ }, }) +const updateCoverImageObjectFit = async (val: string) => { + if ( + ![ViewTypes.GALLERY, ViewTypes.KANBAN].includes(activeView.value?.type as ViewTypes) || + !activeView.value?.id || + !activeView.value?.view + ) { + return + } + + if (activeView.value?.type === ViewTypes.GALLERY) { + const payload = { + ...parseProp((activeView.value?.view as GalleryType)?.meta), + fk_cover_image_object_fit: val, + } + await $api.dbView.galleryUpdate(activeView.value?.id, { + meta: payload, + }) + ;(activeView.value.view as GalleryType).meta = payload + } else if (activeView.value?.type === ViewTypes.KANBAN) { + const payload = { + ...parseProp((activeView.value?.view as KanbanType)?.meta), + fk_cover_image_object_fit: val, + } + await $api.dbView.kanbanUpdate(activeView.value?.id, { + meta: payload, + }) + ;(activeView.value.view as KanbanType).meta = payload + } + + await reloadViewMetaHook?.trigger() +} + +const coverImageObjectFitOptions = [ + { value: CoverImageObjectFit.FIT, label: t('labels.fitImage') }, + { value: CoverImageObjectFit.COVER, label: t('labels.coverImageArea') }, +] + +const coverImageObjectFitDropdown = ref<{ + isOpen: boolean + isSaving: keyof typeof CoverImageObjectFit | null +}>({ + isOpen: false, + isSaving: null, +}) + +const coverImageObjectFit = computed({ + get: () => { + return [ViewTypes.GALLERY, ViewTypes.KANBAN].includes(activeView.value?.type as ViewTypes) && activeView.value?.view + ? parseProp(activeView.value?.view?.meta)?.fk_cover_image_object_fit || CoverImageObjectFit.FIT + : undefined + }, + set: async (val) => { + if (val !== coverImageObjectFit.value) { + coverImageObjectFitDropdown.value.isSaving = val + + addUndo({ + undo: { + fn: updateCoverImageObjectFit, + args: [coverImageObjectFit.value], + }, + redo: { + fn: updateCoverImageObjectFit, + args: [val], + }, + scope: defineViewScope({ view: activeView.value }), + }) + + await updateCoverImageObjectFit(val) + } + coverImageObjectFitDropdown.value.isSaving = null + coverImageObjectFitDropdown.value.isOpen = false + }, +}) + const onShowAll = () => { addUndo({ undo: { @@ -341,18 +417,80 @@ useMenuCloseOnEsc(open) >
-
Select cover image field
- {{ $t('labels.coverImageField') }}
+ +
- - + + + + +
+
+ + + {{ option.label }} +
+ +
+ + + + + + +
@@ -469,7 +607,7 @@ useMenuCloseOnEsc(open)
- {{ showAllColumns ? 'Hide all' : 'Show all' }} fields + {{ showAllColumns ? $t('general.hideAll') : $t('general.showAll') }} {{ $t('objects.fields') }} - {{ showSystemField ? 'Hide system fields' : 'Show system fields' }} + {{ showSystemField ? $t('title.hideSystemFields') : $t('activity.showSystemFields') }}
@@ -499,4 +637,29 @@ useMenuCloseOnEsc(open) .nc-fields-show-system-fields { @apply !text-xs !w-1/2 !text-gray-500 !border-none bg-gray-100 hover:(!text-gray-600 bg-gray-200); } + +.nc-cover-image-object-fit-dropdown-menu { + :deep(.nc-menu-item-inner) { + @apply !w-full flex items-center justify-between; + } +} +.nc-dropdown-cover-image-wrapper { + @apply h-8; + &:not(:focus-within) { + @apply shadow-default hover:shadow-hover; + } + &:focus-within { + @apply shadow-selected border-brand-500; + } +} + +:deep(.ant-input-affix-wrapper) { + &:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-focused):not(:focus) { + @apply shadow-default hover:(shadow-hover border-gray-200); + } + &.ant-input-affix-wrapper-focused, + &:focus { + @apply border-brand-500 shadow-selected; + } +} diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue index 8e336817b2..6cb897e227 100644 --- a/packages/nc-gui/components/virtual-cell/QrCode.vue +++ b/packages/nc-gui/components/virtual-cell/QrCode.vue @@ -6,8 +6,6 @@ const maxNumberOfAllowedCharsForQrValue = 2000 const cellValue = inject(CellValueInj) -const isGallery = inject(IsGalleryInj, ref(false)) - const qrValue = computed(() => String(cellValue?.value || '')) const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false)) @@ -39,7 +37,6 @@ const qrCodeLarge = useQRCode(qrValue, { const modalVisible = ref(false) const showQrModal = (ev: MouseEvent) => { - if (isGallery.value) return ev.stopPropagation() modalVisible.value = true } diff --git a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue index e3440f265e..1d9bd896fa 100644 --- a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue +++ b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue @@ -42,7 +42,6 @@ const downloadSvg = () => { } const onBarcodeClick = (ev: MouseEvent) => { - if (isGallery.value) return ev.stopPropagation() emit('onClickBarcode') } diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue index a7f6b0f29d..b703638b23 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue @@ -41,13 +41,6 @@ interface Attachment { mimetype: string } -const isRowEmpty = (row: any, col: any) => { - const val = row[col.title] - if (!val) return true - - return Array.isArray(val) && val.length === 0 -} - const attachments: ComputedRef = computed(() => { try { if (props.attachment && row.value[props.attachment.title]) { @@ -124,7 +117,7 @@ const displayValue = computed(() => { class="flex ml-[-0.25rem] sm:flex-row xs:(flex-col mt-2) gap-4 min-h-5" >
-
+