add style to FileTable
This commit is contained in:
GMrrc
parent
94e5876c34
commit
9b69ca3902
117
js/main.js
117
js/main.js
@ -1000,18 +1000,36 @@ var render = function render() {
|
||||
}, [_vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) {
|
||||
return _c("div", {
|
||||
key: file.filename,
|
||||
staticClass: "flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0",
|
||||
staticClass: "flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300",
|
||||
on: {
|
||||
click: function ($event) {
|
||||
return _vm.handleClick(file);
|
||||
}
|
||||
}
|
||||
}, [_c("div", {
|
||||
staticClass: "flex-1 px-4 py-2 border-r border-gray-300"
|
||||
}, [_vm._v("\n " + _vm._s(file.basename) + "\n ")]), _vm._v(" "), _c("div", {
|
||||
staticClass: "flex-1 px-4 py-2 border-r border-gray-300"
|
||||
staticClass: "cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300"
|
||||
}, [_c("div", {
|
||||
staticClass: "w-12 h-12 flex items-center justify-center"
|
||||
}, [file.type === "directory" ? [_c("svg", {
|
||||
staticClass: "text-NcBlue",
|
||||
attrs: {
|
||||
fill: "currentColor",
|
||||
width: "40",
|
||||
height: "40",
|
||||
viewBox: "0 0 24 24"
|
||||
}
|
||||
}, [_c("path", {
|
||||
attrs: {
|
||||
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"
|
||||
}
|
||||
})])] : [_c("div", {
|
||||
staticClass: "w-10 h-10 bg-gray-200 flex items-center justify-center rounded-lg"
|
||||
})]], 2), _vm._v(" "), _c("div", {
|
||||
staticClass: "ml-4"
|
||||
}, [_vm._v(_vm._s(file.basename))])]), _vm._v(" "), _c("div", {
|
||||
staticClass: "cursor-pointer w-1/6 px-4 py-2 border-r border-gray-300"
|
||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "Dossier" : "Fichier") + "\n ")]), _vm._v(" "), _c("div", {
|
||||
staticClass: "flex-1 px-4 py-2"
|
||||
staticClass: "cursor-pointer w-1/6 px-4 py-2"
|
||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n ")])]);
|
||||
})], 2);
|
||||
};
|
||||
@ -1019,13 +1037,13 @@ var staticRenderFns = [function () {
|
||||
var _vm = this,
|
||||
_c = _vm._self._c;
|
||||
return _c("div", {
|
||||
staticClass: "flex h-12 items-center border-b"
|
||||
staticClass: "flex h-12 items-center border-b border-gray-300"
|
||||
}, [_c("div", {
|
||||
staticClass: "flex-1 px-4 py-2 font-semibold border-r border-gray-300"
|
||||
staticClass: "w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300"
|
||||
}, [_vm._v("Nom")]), _vm._v(" "), _c("div", {
|
||||
staticClass: "flex-1 px-4 py-2 font-semibold border-r border-gray-300"
|
||||
staticClass: "w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300"
|
||||
}, [_vm._v("Type")]), _vm._v(" "), _c("div", {
|
||||
staticClass: "flex-1 px-4 py-2 font-semibold"
|
||||
staticClass: "w-1/6 px-4 py-2 text-gray-500 font-semibold"
|
||||
}, [_vm._v("Taille")])]);
|
||||
}];
|
||||
render._withStripped = true;
|
||||
@ -1941,6 +1959,10 @@ video {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -1957,6 +1979,14 @@ video {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.w-1\\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
@ -1969,6 +1999,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%;
|
||||
}
|
||||
@ -1989,6 +2043,10 @@ video {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
@ -2009,11 +2067,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));
|
||||
@ -2023,10 +2090,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;
|
||||
@ -2041,6 +2117,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;
|
||||
}
|
||||
@ -2052,6 +2146,11 @@ 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));
|
||||
}`, ""]);
|
||||
// Exports
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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));
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user