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>

81
src/output.css
View File

@ -557,6 +557,10 @@ video {
margin-right: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.flex {
display: flex;
}
@ -573,6 +577,14 @@ video {
height: 100%;
}
.h-8 {
height: 2rem;
}
.h-10 {
height: 2.5rem;
}
.w-1\/3 {
width: 33.333333%;
}
@ -585,6 +597,30 @@ video {
width: 100%;
}
.w-1\/6 {
width: 16.666667%;
}
.w-5\/6 {
width: 83.333333%;
}
.w-8 {
width: 2rem;
}
.w-10 {
width: 2.5rem;
}
.w-4\/6 {
width: 66.666667%;
}
.w-12 {
width: 3rem;
}
.flex-1 {
flex: 1 1 0%;
}
@ -605,6 +641,10 @@ video {
align-items: center;
}
.justify-center {
justify-content: center;
}
.rounded-xl {
border-radius: 0.75rem;
}
@ -625,11 +665,20 @@ video {
border-right-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-NcGray {
--tw-border-opacity: 1;
border-color: rgb(33 33 33 / var(--tw-border-opacity, 1));
}
.bg-NcBlack {
--tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
@ -639,10 +688,19 @@ video {
background-color: rgb(0 0 0 / 0.8);
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.p-4 {
padding: 1rem;
}
.p-2 {
padding: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@ -657,6 +715,24 @@ video {
font-weight: 600;
}
.text-white\/20 {
color: rgb(255 255 255 / 0.2);
}
.text-white\/50 {
color: rgb(255 255 255 / 0.5);
}
.text-NcBlue {
--tw-text-opacity: 1;
color: rgb(0 114 195 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.last\:border-b-0:last-child {
border-bottom-width: 0px;
}
@ -668,4 +744,9 @@ video {
.hover\:bg-NcGray:hover {
--tw-bg-opacity: 1;
background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}