Browse Source

chore(gui-v2): disable pointer events while dragging

pull/2972/head
braks 2 years ago
parent
commit
027fc9ef84
  1. 12
      packages/nc-gui-v2/components/cell/attachment/Modal.vue
  2. 4
      packages/nc-gui-v2/components/cell/attachment/index.vue

12
packages/nc-gui-v2/components/cell/attachment/Modal.vue

@ -66,7 +66,7 @@ onKeyDown('Escape', () => {
</div> </div>
</template> </template>
<div ref="dropZoneRef" :class="{ dragging }"> <div ref="dropZoneRef">
<div <div
v-if="!isReadonly && !dragging" v-if="!isReadonly && !dragging"
:class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']" :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
@ -76,7 +76,7 @@ onKeyDown('Escape', () => {
<div class="text-white text-3xl">Drop here</div> <div class="text-white text-3xl">Drop here</div>
</div> </div>
<div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6"> <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
<div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1"> <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
<a-card class="nc-attachment-item group"> <a-card class="nc-attachment-item group">
<a-tooltip v-if="!isReadonly"> <a-tooltip v-if="!isReadonly">
@ -134,7 +134,7 @@ onKeyDown('Escape', () => {
} }
.nc-attachment-item { .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 { &::after {
@apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out; @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; @apply !pointer-events-none;
} }
&.dragging { .dragging {
.nc-attachment-item {
@apply !pointer-events-none;
}
.ant-tooltip { .ant-tooltip {
@apply !hidden; @apply !hidden;
} }

4
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -74,7 +74,7 @@ onKeyDown('Escape', () => {
<div <div
v-if="!isReadonly" v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }" :class="{ 'mx-auto px-4': !visibleItems.length }"
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10" class="group flex gap-1 items-center active:ring rounded border-1 p-2 hover:bg-primary/10"
@click.stop="open" @click.stop="open"
> >
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@ -143,7 +143,7 @@ onKeyDown('Escape', () => {
@apply !pointer-events-none; @apply !pointer-events-none;
} }
&.dragging { .dragging {
.ant-tooltip { .ant-tooltip {
@apply !hidden; @apply !hidden;
} }

Loading…
Cancel
Save