Browse Source

refactor(gui-v2): implement overlay in attachment components

pull/2972/head
braks 2 years ago
parent
commit
18432ad492
  1. 18
      packages/nc-gui-v2/components/cell/attachment/Modal.vue
  2. 16
      packages/nc-gui-v2/components/cell/attachment/index.vue

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

@ -68,14 +68,16 @@ onKeyDown('Escape', () => {
</template>
<div ref="dropZoneRef">
<div
v-if="!isReadonly && !dragging"
:class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-gray-700/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
<div class="text-white text-3xl">Drop here</div>
</div>
<template v-if="!isReadonly && !dragging">
<general-overlay
v-model="isOverDropZone"
inline
class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
<div class="text-white text-3xl">Drop here</div>
</general-overlay>
</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 v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">

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

@ -70,14 +70,14 @@ onMounted(() => {
<Carousel />
<template v-if="!isReadonly && !dragging && dropZoneRef">
<teleport :to="`td[data-col='${column.id}']`">
<div
:class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
class="text-white text-lg transition-all duration-150 ease-in-out ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div>
</teleport>
<general-overlay
v-model="isOverDropZone"
inline
:target="`td[data-col='${column.id}']`"
class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</general-overlay>
</template>
<div

Loading…
Cancel
Save