fix drag css

src/components/FileTable.vue

@@ -51,9 +51,9 @@
 
         <!-- Contenu -->
         <div :class="[
-            'overflow-y-auto h-full rounded-xl relative',
+            'overflow-y-auto h-full rounded-xl',
             isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : ''
-        ]" @drop.prevent="onDrop">
+        ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent @dragleave.prevent="onDragLeave($event)" >
 
             <div v-for="file in files" :key="file.filename"
                 class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
@@ -95,11 +95,6 @@
                     {{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
                 </div>
             </div>
-
-            <div class="absolute top-0 left-0 w-full h-full"
-            @dragenter.prevent="onDragEnter" @dragleave.prevent="onDragLeave">
-            </div>
-
         </div>
 
     </div>
@@ -111,8 +106,7 @@
 import { getClient, getRootPath } from '@nextcloud/files/dav';
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
-import Plus from 'vue-material-design-icons/Plus.vue'
+import Plus from 'vue-material-design-icons/Plus.vue';
-import { ref } from 'vue';
 
 export default {
     name: 'FileTable',
@@ -136,7 +130,7 @@ export default {
             isAddFilePopupVisible: false,
             newFileName: '',
             isTransfering: false,
-            isDragging: ref(false),
+            isDragging: false
         };
     },
     async mounted() {
@@ -169,14 +163,6 @@ export default {
             const parts = this.breadcrumbParts.slice(0, index + 1);
             return '/' + parts.join('/');
         },
-        onDragEnter(event) {
-            event.preventDefault();
-            this.isDragging = true;
-        },
-        onDragLeave(event) {
-            event.preventDefault();
-            this.isDragging = false;
-        },
         getBreadcrumbParts() {
             // Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide.
             if (this.current_dir === '/') return [];
@@ -219,11 +205,24 @@ export default {
             this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
             if (!this.isAddFilePopupVisible) this.newFileName = '';
         },
+        onDragOver(event) {
+            event.preventDefault();
+            if (!this.isDragging) {
+                this.isDragging = true;
+            } else {
+                return;
+            }
+        },
+        onDragLeave(event) {
+            event.preventDefault();
+            if (event.target === event.currentTarget) {
+                this.isDragging = false;
+            } 
+        },
         async onDrop(event) {
             event.preventDefault();
-            this.isDragging = false;
-
             try {
+                this.isDragging = false;
                 this.isTransfering = true;
                 const file = this.file;
                 if (!file) return;
@@ -297,4 +296,4 @@ export default {
 
 <style scoped>
 /* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
-</style>
+</style>

src/components/WebContentViewer.vue

@@ -67,7 +67,7 @@
             </div>
         </div>
         <div v-if="isLoading" class="flex h-full items-center justify-center">
-            <component :is="Loading" class="text-white w-24 h-24 animate-spin" size="48" />
+            <component :is="Loading" class="text-white w-24 h-24 animate-spin" :size="40"/>
         </div>
         <div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center">
             <span class="text-gray-500">Aucun contenu à afficher</span>

src/output.css

@@ -583,14 +583,48 @@ video {
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
 .inset-0 {
   inset: 0px;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -631,6 +665,10 @@ video {
   height: 4rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
@@ -639,8 +677,8 @@ video {
   height: 100%;
 }
 
-.h-24 {
+.h-1 {
-  height: 6rem;
+  height: 0.25rem;
 }
 
 .max-h-8 {
@@ -663,6 +701,10 @@ video {
   width: 33.333333%;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
 .w-4\/6 {
   width: 66.666667%;
 }
@@ -679,12 +721,8 @@ video {
   width: 100%;
 }
 
-.w-16 {
+.w-1 {
-  width: 4rem;
+  width: 0.25rem;
-}
-
-.w-24 {
-  width: 6rem;
 }
 
 .max-w-64 {
@@ -765,6 +803,10 @@ video {
   border-width: 1px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -773,11 +815,20 @@ video {
   border-right-width: 1px;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
+}
+
 .bg-NcBlack {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
@@ -811,6 +862,16 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -893,6 +954,16 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }