From 18432ad4926e0754836980f0f54931bfeeca5b63 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 11:46:59 +0200
Subject: [PATCH] refactor(gui-v2): implement overlay in attachment components

---
 .../components/cell/attachment/Modal.vue       | 18 ++++++++++--------
 .../components/cell/attachment/index.vue       | 16 ++++++++--------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 2e09a67057..487b92cc16 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/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">
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index a68fb5bd80..245677c7e2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/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