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

ajout favoris et probleme dragend resolu

Browse Source
This commit is contained in:
Alexandre_BRAVO 2024-11-28 18:22:12 +01:00
commit 2e86a6c1dd
3 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -4,12 +4,12 @@
<div class="h-full w-full flex flex-col sm:flex-row"> <div class="h-full w-full flex flex-col sm:flex-row">
<!-- Première section --> <!-- Première section -->
<div <div
class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40"> class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 sm:mr-0 rounded-xl bg-NcBlack/40">
<WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" @dragEnded="toggleDragEnded" zipUrl="http://localhost:8000/dummyZip.zip"/> <WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" @dragEnded="toggleDragEnded" zipUrl="http://localhost:8000/dummyZip.zip"/>
</div> </div>
<!-- Deuxième section --> <!-- Deuxième section -->
<div <div
class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl"> class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 sm:ml-4 bg-NcBlack rounded-xl">
<FileTable :file="sharedFile" :zip="zip" :dragEnded="dragEnded" @dragEnded="toggleDragEnded"/> <FileTable :file="sharedFile" :zip="zip" :dragEnded="dragEnded" @dragEnded="toggleDragEnded"/>
</div> </div>
</div> </div>

27
src/components/WebContentViewer.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col h-full w-full border"> <div class="flex flex-col h-full w-full border">
<div class="flex h-12 items-center border-b border-gray-300"> <div class="flex h-12 items-center border-b border-gray-300">
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div> <div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
<div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div> <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
</div> </div>
<div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading" <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading && zipContent.length !== 0"
draggable="true" @dragstart="dragZip()"> draggable="true" @dragstart="dragZip()">
<template> <template>
<div class="flex items-center justify-center cursor-pointer"> <div class="flex items-center justify-center cursor-pointer">
@ -14,11 +14,11 @@
</svg> </svg>
</div> </div>
</template> </template>
<div class="w-4/6 flex items-center px-4 py-2 cursor-pointer"> <div class="w-5/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ zipName }}</div> <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ zipName }}</div>
</div> </div>
<div class="w-2/6 py-2 cursor-pointer"> <div class="w-1/6 py-2 cursor-pointer">
{{ formatFileSize(zipSize) }} {{ formatFileSize(zipSize) }}
</div> </div>
</div> </div>
@ -27,8 +27,11 @@
<div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col"> <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
<div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
:style="{
'padding-left': `${0.5 * (file.depth + 1)}rem`
}"
@click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)" @dragend="onDragEnd"> @click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)" @dragend="onDragEnd">
<div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer"> <div class="w-5/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<div class="w-12 h-12 flex items-center justify-center cursor-pointer"> <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
<template> <template>
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 "> <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
@ -51,6 +54,9 @@
</div> </div>
<div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
:style="{
'padding-left': `${0.5 * (file.depth + 1)}rem`
}"
v-else draggable="true" @dragstart="onDragStart(file, $event)"> v-else draggable="true" @dragstart="onDragStart(file, $event)">
<template> <template>
<div class="flex items-center justify-center cursor-pointer"> <div class="flex items-center justify-center cursor-pointer">
@ -63,11 +69,10 @@
</svg> </svg>
</div> </div>
</template> </template>
<div class="w-4/6 flex items-center px-4 py-2 cursor-pointer"> <div class="w-5/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ file.name }}</div> <div class="truncate max-sm:max-w-32 max-w-96 cursor-pointer">{{ file.name }}</div>
</div> </div>
<div class="w-2/6 py-2 cursor-pointer"> <div class="w-1/6 py-2 cursor-pointer">
{{ formatFileSize(file.size) }} {{ formatFileSize(file.size) }}
</div> </div>
</div> </div>
@ -89,6 +94,7 @@ import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'; import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
import Loading from 'vue-material-design-icons/Loading.vue'; import Loading from 'vue-material-design-icons/Loading.vue';
import { ref } from 'vue'; import { ref } from 'vue';
import path from 'path';
export default { export default {
name: 'WebContentViewer', name: 'WebContentViewer',
@ -186,6 +192,7 @@ export default {
size: isDirectory ? 0 : file._data.uncompressedSize, size: isDirectory ? 0 : file._data.uncompressedSize,
content: isDirectory ? null : '', // Initialiser 'content' pour les fichiers content: isDirectory ? null : '', // Initialiser 'content' pour les fichiers
children: isDirectory ? [] : null, children: isDirectory ? [] : null,
depth: pathParts.length, // Profondeur du fichier dans l'arborescence
//remove the name of the file from the path //remove the name of the file from the path
parentPath: i > 0 ? pathParts[i - 1] : '', parentPath: i > 0 ? pathParts[i - 1] : '',
unzip: promise unzip: promise

16
src/output.css
View File

@ -711,10 +711,18 @@ video {
width: 100%; width: 100%;
} }
.w-5\/6 {
width: 83.333333%;
}
.max-w-64 { .max-w-64 {
max-width: 16rem; max-width: 16rem;
} }
.max-w-96 {
max-width: 24rem;
}
.transform { .transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
@ -1090,6 +1098,14 @@ video {
margin: 1.5rem; margin: 1.5rem;
} }
.sm\:ml-4 {
margin-left: 1rem;
}
.sm\:mr-0 {
margin-right: 0px;
}
.sm\:w-1\/3 { .sm\:w-1\/3 {
width: 33.333333%; width: 33.333333%;
} }