From 006035639dddd65531845f913ac631fc446799ed Mon Sep 17 00:00:00 2001 From: GMrrc <143954951+GMrrc@users.noreply.github.com> Date: Thu, 21 Nov 2024 15:19:21 +0100 Subject: [PATCH 1/3] add css --- src/components/FileTable.vue | 56 +++++++++++++++-------------- src/components/WebContentViewer.vue | 5 ++- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue index 0eb7bd3..1e4abba 100644 --- a/src/components/FileTable.vue +++ b/src/components/FileTable.vue @@ -6,15 +6,13 @@ - + @@ -111,6 +107,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 { ref } from 'vue'; export default { name: 'FileTable', @@ -121,8 +118,8 @@ export default { }, props: { file: { - type: Object, - default: null, + type: Object, + default: null, }, }, data() { @@ -134,6 +131,7 @@ export default { isAddFilePopupVisible: false, newFileName: '', isTransfering: false, + isDragging: ref(false), }; }, async mounted() { @@ -166,6 +164,12 @@ export default { const parts = this.breadcrumbParts.slice(0, index + 1); return '/' + parts.join('/'); }, + enterDrag() { + this.isDragging = true; + }, + leaveDrag() { + this.isDragging = false; + }, getBreadcrumbParts() { // Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide. if (this.current_dir === '/') return []; @@ -210,7 +214,7 @@ export default { }, async onDrop(event) { event.preventDefault(); - + try { const moveFilesOfFolder = async (folder) => { diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue index 3ddfe09..fbf09e7 100644 --- a/src/components/WebContentViewer.vue +++ b/src/components/WebContentViewer.vue @@ -175,7 +175,7 @@ export default { content: isDirectory ? null : '', // Initialiser 'content' pour les fichiers children: isDirectory ? [] : null, //remove the name of the file from the path - parentPath: pathParts.slice(0, i).join('/'), + parentPath: i > 0 ? pathParts[i - 1] : '', unzip: promise }; currentLevel.push(existing); @@ -220,7 +220,6 @@ export default { this.$set(this.folderMap, file.fullPath, !currentState); }, async onDragStart(file) { - console.log('Drag start', file); const getFilesFromFolder = (folder) => { const files = []; @@ -256,4 +255,4 @@ export default { + \ No newline at end of file From 37d8b4499c5259bc0c3e9f6e2e95cfd54cf941ef Mon Sep 17 00:00:00 2001 From: GMrrc <143954951+GMrrc@users.noreply.github.com> Date: Thu, 21 Nov 2024 15:55:02 +0100 Subject: [PATCH 2/3] css on dragover --- src/components/FileTable.vue | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue index f98fd96..d134d69 100644 --- a/src/components/FileTable.vue +++ b/src/components/FileTable.vue @@ -51,9 +51,9 @@
+ 'overflow-y-auto h-full rounded-xl relative', + isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : '' + ]" @drop.prevent="onDrop">
+ +
+
+
@@ -164,10 +169,12 @@ export default { const parts = this.breadcrumbParts.slice(0, index + 1); return '/' + parts.join('/'); }, - enterDrag() { + onDragEnter(event) { + event.preventDefault(); this.isDragging = true; }, - leaveDrag() { + onDragLeave(event) { + event.preventDefault(); this.isDragging = false; }, getBreadcrumbParts() { @@ -214,6 +221,7 @@ export default { }, async onDrop(event) { event.preventDefault(); + this.isDragging = false; try { this.isTransfering = true; From d0b757af7438ef4e54ce71e986754142df639e00 Mon Sep 17 00:00:00 2001 From: GMrrc <143954951+GMrrc@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:04:06 +0100 Subject: [PATCH 3/3] fix drag css --- src/components/FileTable.vue | 41 +++++++------- src/components/WebContentViewer.vue | 2 +- src/output.css | 87 ++++++++++++++++++++++++++--- 3 files changed, 100 insertions(+), 30 deletions(-) diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue index d134d69..0511d91 100644 --- a/src/components/FileTable.vue +++ b/src/components/FileTable.vue @@ -51,9 +51,9 @@
+ ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent @dragleave.prevent="onDragLeave($event)" >
- -
-
-
@@ -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 { ref } from 'vue'; +import Plus from 'vue-material-design-icons/Plus.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 { + \ No newline at end of file diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue index fbf09e7..83115ae 100644 --- a/src/components/WebContentViewer.vue +++ b/src/components/WebContentViewer.vue @@ -67,7 +67,7 @@
- +
Aucun contenu à afficher diff --git a/src/output.css b/src/output.css index 5c5a4ec..90b8327 100644 --- a/src/output.css +++ b/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 { - height: 6rem; +.h-1 { + 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 { - width: 4rem; -} - -.w-24 { - width: 6rem; +.w-1 { + width: 0.25rem; } .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; }