KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add css

Browse Source
This commit is contained in:
GMrrc 2024-11-21 15:19:21 +01:00
parent 576fe190d9
commit 006035639d
2 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/FileTable.vue
View File

@ -6,15 +6,13 @@
<NcBreadcrumbs class="max-h-8"> <NcBreadcrumbs class="max-h-8">
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)"> <NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
</NcBreadcrumb> </NcBreadcrumb>
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts" :key="index" <NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts"
:name="part" @click="handleClickBreadcrumb(index)"> :key="index" :name="part" @click="handleClickBreadcrumb(index)">
</NcBreadcrumb> </NcBreadcrumb>
<template #actions> <template #actions>
<div class="flex items-center ml-2"> <div class="flex items-center ml-2">
<button <button @click="toggleAddFilePopup"
@click="toggleAddFilePopup" class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition">
class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition"
>
<Plus :size="20" /> <Plus :size="20" />
<span>Nouveau</span> <span>Nouveau</span>
</button> </button>
@ -25,26 +23,19 @@
<!-- Popup pour la création de fichier --> <!-- Popup pour la création de fichier -->
<div v-if="isAddFilePopupVisible" class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50"> <div v-if="isAddFilePopupVisible"
class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
<div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96"> <div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4">Créer un nouveau fichier</h2> <h2 class="text-lg font-semibold mb-4">Créer un nouveau fichier</h2>
<input <input v-model="newFileName" type="text" placeholder="Nom du fichier"
v-model="newFileName" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
type="text"
placeholder="Nom du fichier"
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div class="flex justify-end mt-4 space-x-2"> <div class="flex justify-end mt-4 space-x-2">
<button <button @click="toggleAddFilePopup"
@click="toggleAddFilePopup" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"
>
Annuler Annuler
</button> </button>
<button <button @click="createNewFile"
@click="createNewFile" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
>
Créer Créer
</button> </button>
</div> </div>
@ -59,7 +50,11 @@
</div> </div>
<!-- Contenu --> <!-- Contenu -->
<div class="overflow-y-auto" @dragover.prevent @dragenter.prevent @dragleave.prevent @drop.prevent="onDrop"> <div :class="[
'overflow-y-auto h-full',
isDragging ? 'border-green-500 border-4 border-dashed transition-all duration-300 ease-in-out' : ''
]" @dragover.prevent @dragenter.prevent="enterDrag" @dragleave.prevent="leaveDrag" @drop.prevent="onDrop">
<div v-for="file in files" :key="file.filename" <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" class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
@click="handleClickElem(file)"> @click="handleClickElem(file)">
@ -81,7 +76,8 @@
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"> style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<path <path
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z" d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" /> style="fill:#969696;fill-rule:nonzero"
transform="matrix(.7 0 0 .7 -.43 -.388)" />
</svg> </svg>
</div> </div>
</template> </template>
@ -111,6 +107,7 @@ import { getClient, getRootPath } from '@nextcloud/files/dav';
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'; import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.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 { export default {
name: 'FileTable', name: 'FileTable',
@ -121,8 +118,8 @@ export default {
}, },
props: { props: {
file: { file: {
type: Object, type: Object,
default: null, default: null,
}, },
}, },
data() { data() {
@ -134,6 +131,7 @@ export default {
isAddFilePopupVisible: false, isAddFilePopupVisible: false,
newFileName: '', newFileName: '',
isTransfering: false, isTransfering: false,
isDragging: ref(false),
}; };
}, },
async mounted() { async mounted() {
@ -166,6 +164,12 @@ export default {
const parts = this.breadcrumbParts.slice(0, index + 1); const parts = this.breadcrumbParts.slice(0, index + 1);
return '/' + parts.join('/'); return '/' + parts.join('/');
}, },
enterDrag() {
this.isDragging = true;
},
leaveDrag() {
this.isDragging = false;
},
getBreadcrumbParts() { getBreadcrumbParts() {
// Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide. // Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide.
if (this.current_dir === '/') return []; if (this.current_dir === '/') return [];
@ -210,7 +214,7 @@ export default {
}, },
async onDrop(event) { async onDrop(event) {
event.preventDefault(); event.preventDefault();
try { try {
const moveFilesOfFolder = async (folder) => { const moveFilesOfFolder = async (folder) => {

5
src/components/WebContentViewer.vue
View File

@ -175,7 +175,7 @@ export default {
content: isDirectory ? null : '', // Initialiser 'content' pour les fichiers content: isDirectory ? null : '', // Initialiser 'content' pour les fichiers
children: isDirectory ? [] : null, children: isDirectory ? [] : null,
//remove the name of the file from the path //remove the name of the file from the path
parentPath: pathParts.slice(0, i).join('/'), parentPath: i > 0 ? pathParts[i - 1] : '',
unzip: promise unzip: promise
}; };
currentLevel.push(existing); currentLevel.push(existing);
@ -220,7 +220,6 @@ export default {
this.$set(this.folderMap, file.fullPath, !currentState); this.$set(this.folderMap, file.fullPath, !currentState);
}, },
async onDragStart(file) { async onDragStart(file) {
console.log('Drag start', file);
const getFilesFromFolder = (folder) => { const getFilesFromFolder = (folder) => {
const files = []; const files = [];
@ -256,4 +255,4 @@ export default {
<style scoped> <style scoped>
/* Ajoutez ici des styles si nécessaire */ /* Ajoutez ici des styles si nécessaire */
</style> </style>