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

fix CSS

Browse Source
This commit is contained in:
GMrrc 2024-11-18 14:22:51 +01:00
parent cf5d59dce5
commit 8670be9d4d
4 changed files with 142 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/main.js
View File

@ -1027,7 +1027,7 @@ var render = function render() {
return _c("div", { return _c("div", {
staticClass: "flex flex-col h-full w-full border" staticClass: "flex flex-col h-full w-full border"
}, [_c("NcBreadcrumbs", { }, [_c("NcBreadcrumbs", {
staticClass: "max-h-8 mr-4" staticClass: "max-h-8 ml-3 mt-1"
}, [_c("NcBreadcrumb", { }, [_c("NcBreadcrumb", {
attrs: { attrs: {
name: "Home", name: "Home",
@ -1053,16 +1053,16 @@ var render = function render() {
})], 2), _vm._v(" "), _vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) { })], 2), _vm._v(" "), _vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) {
return _c("div", { return _c("div", {
key: file.filename, key: file.filename,
staticClass: "flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300", staticClass: "flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300",
on: { on: {
click: function ($event) { click: function ($event) {
return _vm.handleClickElem(file); return _vm.handleClickElem(file);
} }
} }
}, [_c("div", { }, [_c("div", {
staticClass: "cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300" staticClass: "w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer"
}, [_c("div", { }, [_c("div", {
staticClass: "w-12 h-12 flex items-center justify-center" staticClass: "w-12 h-12 flex items-center justify-center cursor-pointer"
}, [file.type === "directory" ? [_c("svg", { }, [file.type === "directory" ? [_c("svg", {
staticClass: "text-NcBlue w-10 h-10", staticClass: "text-NcBlue w-10 h-10",
attrs: { attrs: {
@ -1074,7 +1074,7 @@ var render = function render() {
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" 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", { })])] : [_c("div", {
staticClass: "flex items-center justify-center" staticClass: "flex items-center justify-center cursor-pointer"
}, [_c("svg", { }, [_c("svg", {
staticClass: "w-10 h-10", staticClass: "w-10 h-10",
staticStyle: { staticStyle: {
@ -1098,12 +1098,12 @@ var render = function render() {
transform: "matrix(.7 0 0 .7 -.43 -.388)" transform: "matrix(.7 0 0 .7 -.43 -.388)"
} }
})])])]], 2), _vm._v(" "), _c("div", { })])])]], 2), _vm._v(" "), _c("div", {
staticClass: "ml-4" staticClass: "ml-4 cursor-pointer"
}, [_vm._v(_vm._s(file.basename))])]), _vm._v(" "), _c("div", { }, [_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" staticClass: "w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer"
}, [_vm._v("\r\n " + _vm._s(file.type === "directory" ? "Dossier" : "Fichier") + "\r\n ")]), _vm._v(" "), _c("div", { }, [_vm._v("\n " + _vm._s(file.type === "directory" ? "Dossier" : "Fichier") + "\n ")]), _vm._v(" "), _c("div", {
staticClass: "cursor-pointer w-1/6 px-4 py-2" staticClass: "w-1/6 px-4 py-2 cursor-pointer"
}, [_vm._v("\r\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\r\n ")])]); }, [_vm._v("\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n ")])]);
})], 2); })], 2);
}; };
var staticRenderFns = [function () { var staticRenderFns = [function () {
@ -3044,6 +3044,14 @@ video {
margin-right: 1rem; margin-right: 1rem;
} }
.ml-3 {
margin-left: 0.75rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.flex { .flex {
display: flex; display: flex;
} }

2
js/main.js.map
View File

File diff suppressed because one or more lines are too long

96
src/components/FileTable.vue
View File

@ -1,75 +1,63 @@
<template> <template>
<div class="flex flex-col h-full w-full border"> <div class="flex flex-col h-full w-full border">
<!-- Breadcrumb --> <!-- Breadcrumb -->
<NcBreadcrumbs class="max-h-8 mr-4"> <NcBreadcrumbs class="max-h-8 ml-3 mt-1">
<NcBreadcrumb name="Home" <NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
title="Title of the Home folder"
@click="handleClickBreadcrumb(-1)">
</NcBreadcrumb> </NcBreadcrumb>
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" <NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts" :key="index"
v-for="(part, index) in breadcrumbParts" :name="part" @click="handleClickBreadcrumb(index)">
:key="index"
:name="part"
@click="handleClickBreadcrumb(index)">
</NcBreadcrumb> </NcBreadcrumb>
</NcBreadcrumbs> </NcBreadcrumbs>
<!-- En-tête --> <!-- En-tête -->
<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-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 border-r border-gray-300">Type</div>
<div class="w-1/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>
<!-- Contenu -->
<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"
@click="handleClickElem(file)">
<!-- 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="handleClickElem(file)"
>
<!-- Nom --> <!-- Nom -->
<div class="cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300"> <div class="w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
<div class="w-12 h-12 flex items-center justify-center"> <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
<template v-if="file.type === 'directory'"> <template v-if="file.type === 'directory'">
<svg <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
fill="currentColor"
viewBox="0 0 24 24"
class="text-NcBlue w-10 h-10"
>
<path <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" 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> </path>
</svg> </svg>
</template> </template>
<template v-else> <template v-else>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center cursor-pointer">
<svg <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
class="w-10 h-10" class="w-10 h-10"
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" style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)"/> 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)" />
</svg> </svg>
</div> </div>
</template> </template>
</div> </div>
<div class="ml-4">{{ file.basename }}</div> <div class="ml-4 cursor-pointer">{{ file.basename }}</div>
</div> </div>
<!-- Type --> <!-- Type -->
<div class="cursor-pointer w-1/6 px-4 py-2 border-r border-gray-300"> <div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }} {{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
</div> </div>
<!-- Taille --> <!-- Taille -->
<div class="cursor-pointer w-1/6 px-4 py-2"> <div class="w-1/6 px-4 py-2 cursor-pointer">
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }} {{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
@ -80,23 +68,23 @@ 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';
export default { export default {
name: 'FileTable', name: 'FileTable',
components: { components: {
NcBreadcrumbs, NcBreadcrumbs,
NcBreadcrumb NcBreadcrumb
}, },
data() { data() {
return { return {
files: [], // Liste des fichiers et dossiers récupérés files: [], // Liste des fichiers et dossiers récupérés
current_dir: '/', current_dir: '/',
breadcrumbParts : [] breadcrumbParts: []
}; };
}, },
async mounted() { async mounted() {
await this.fetchFiles(); await this.fetchFiles();
this.breadcrumbParts = this.getBreadcrumbParts(); this.breadcrumbParts = this.getBreadcrumbParts();
}, },
methods: { methods: {
async fetchFiles() { async fetchFiles() {
try { try {
const client = getClient(); const client = getClient();
@ -145,7 +133,7 @@ methods: {
this.breadcrumbParts = this.getBreadcrumbParts(); this.breadcrumbParts = this.getBreadcrumbParts();
await this.fetchFiles(); await this.fetchFiles();
} }
} }
}; };
</script> </script>

8
src/output.css
View File

@ -565,6 +565,14 @@ video {
margin-right: 1rem; margin-right: 1rem;
} }
.ml-3 {
margin-left: 0.75rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.flex { .flex {
display: flex; display: flex;
} }