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

add style to FileTable

Browse Source
This commit is contained in:
GMrrc
2024-11-15 17:45:06 +01:00
parent 94e5876c34
commit 9b69ca3902
4 changed files with 238 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/FileTable.vue
View File

@ -1,31 +1,55 @@
<template>
<div class="flex flex-col h-full w-full border">
<!-- En-tête -->
<div class="flex h-12 items-center border-b">
<div class="flex-1 px-4 py-2 font-semibold border-r border-gray-300">Nom</div>
<div class="flex-1 px-4 py-2 font-semibold border-r border-gray-300">Type</div>
<div class="flex-1 px-4 py-2 font-semibold">Taille</div>
<div class="flex flex-col h-full w-full border">
<!-- En-tête -->
<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-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
</div>
<!-- Contenu -->
<div
v-for="file in files"
:key="file.filename"
class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
@click="handleClick(file)"
>
<!-- Nom -->
<div class="cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300">
<div class="w-12 h-12 flex items-center justify-center">
<template v-if="file.type === 'directory'">
<svg
fill="currentColor"
width="40"
height="40"
viewBox="0 0 24 24"
class="text-NcBlue"
>
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
></path>
</svg>
</template>
<template v-else>
<div class="w-10 h-10 bg-gray-200 flex items-center justify-center rounded-lg"></div>
</template>
</div>
<div class="ml-4">{{ file.basename }}</div>
</div>
<!-- Contenu -->
<div
v-for="file in files"
:key="file.filename"
class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0"
@click="handleClick(file)"
>
<div class="flex-1 px-4 py-2 border-r border-gray-300">
{{ file.basename }}
</div>
<div class="flex-1 px-4 py-2 border-r border-gray-300">
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
</div>
<div class="flex-1 px-4 py-2">
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
</div>
<!-- Type -->
<div class="cursor-pointer w-1/6 px-4 py-2 border-r border-gray-300">
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
</div>
<!-- Taille -->
<div class="cursor-pointer w-1/6 px-4 py-2">
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
</div>
</div>
</template>
</div>
</template>
<script>