Browse Source

fix: Attachment UX improvements

pull/6723/head
Muhammed Mustafa 1 year ago
parent
commit
6f008f27ff
  1. 2
      packages/nc-gui/components/cell/attachment/Carousel.vue
  2. 10
      packages/nc-gui/components/cell/attachment/index.vue

2
packages/nc-gui/components/cell/attachment/Carousel.vue

@ -55,7 +55,7 @@ useEventListener(container, 'click', (e) => {
<template>
<GeneralOverlay v-model="selectedImage" :z-index="1001" class="bg-gray-500 bg-opacity-50">
<template v-if="selectedImage">
<div ref="container" class="overflow-hidden p-12 text-center relative">
<div ref="container" class="overflow-hidden p-12 text-center relative xs:h-screen">
<div class="text-white group absolute top-5 right-5">
<component
:is="iconMap.closeCircle"

10
packages/nc-gui/components/cell/attachment/index.vue

@ -161,8 +161,6 @@ const open = (e: Event) => {
e.stopPropagation()
console.log('open attachment cell', isMobileMode.value, isExpandedForm.value)
_open()
}
@ -210,7 +208,7 @@ const onExpand = () => {
<div
v-if="!isReadonly"
:class="{ 'sm:(mx-auto px-4) xs:(w-full)': !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 active:(ring ring-accent ring-opacity-100) rounded border-none shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
data-testid="attachment-cell-file-picker-button"
@click="open"
@ -224,7 +222,7 @@ const onExpand = () => {
<div
v-if="active || !visibleItems.length || (isForm && visibleItems.length)"
class="flex items-center gap-1 xs:(w-full h-8 justify-center)"
class="flex items-center gap-1 xs:(w-full min-w-12 h-8 justify-center)"
>
<MaterialSymbolsAttachFile
class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
@ -262,7 +260,9 @@ const onExpand = () => {
:class="{ 'ml-2': active }"
@click="
() => {
if (isGallery || isMobileMode || (isKanban && !isExpandedForm)) return
if (isGallery || (isKanban && !isExpandedForm)) return
if (isMobileMode && !isExpandedForm) return
selectedImage = item
}
"

Loading…
Cancel
Save