add style

js/main.js

@@ -914,13 +914,9 @@ __webpack_require__.r(__webpack_exports__);
   methods: {
     async fetchFiles() {
       try {
-        // Création du client WebDAV
         const client = (0,_nextcloud_files_dav__WEBPACK_IMPORTED_MODULE_0__.getClient)();
+        const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
 
-        // Récupération des fichiers et dossiers à la racine
-        const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); //changer admin par le nom de l'utilisateur courant
-
-        // Mise à jour de la liste des fichiers et dossiers
         this.files = directoryItems.map(file => ({
           basename: file.basename,
           size: file.size,
@@ -931,7 +927,6 @@ __webpack_require__.r(__webpack_exports__);
         console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
       }
     },
-    // Fonction pour formater la taille des fichiers
     formatFileSize(size) {
       if (size < 1024) return `${size} B`;
       if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
@@ -940,11 +935,9 @@ __webpack_require__.r(__webpack_exports__);
     },
     async handleClick(file) {
       if (file.type === 'directory') {
-        // Si c'est un dossier, on change le répertoire courant et on fetch son contenu
         this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
         await this.fetchFiles();
       } else {
-        // Si c'est un fichier, on ouvre le lien de téléchargement
         window.open(file.href, '_blank');
       }
     }
@@ -969,10 +962,17 @@ var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c("div", {
+    staticClass: "h-full w-full bg-slate-500",
     attrs: {
       id: "app"
     }
-  }, [_c("h1", [_vm._v("FEUR")]), _vm._v(" "), _c("FileTable")], 1);
+  }, [_c("div", {
+    staticClass: "h-full w-full flex flex-row"
+  }, [_c("div", {
+    staticClass: "w-1/3 p-4 m-6 mr-2 bg-black/10 rounded-xl"
+  }), _vm._v(" "), _c("div", {
+    staticClass: "w-2/3 p-4 m-6 ml-2 bg-black/10 rounded-xl"
+  }, [_c("FileTable")], 1)])]);
 };
 var staticRenderFns = [];
 render._withStripped = true;
@@ -995,22 +995,38 @@ __webpack_require__.r(__webpack_exports__);
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c("table", [_vm._m(0), _vm._v(" "), _c("tbody", _vm._l(_vm.files, function (file) {
+  return _c("div", {
-    return _c("tr", {
+    staticClass: "flex flex-col h-full w-full border"
-      key: file.filename
+  }, [_vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) {
-    }, [_c("td", [_c("div", {
+    return _c("div", {
+      key: file.filename,
+      staticClass: "flex h-16 items-center hover:bg-blue-500/20 cursor-pointer border-b last:border-b-0",
       on: {
         click: function ($event) {
           return _vm.handleClick(file);
         }
       }
-    }, [_vm._v(_vm._s(file.basename))])]), _vm._v(" "), _c("td", [_vm._v(_vm._s(file.type === "directory" ? "Dossier" : "Fichier"))]), _vm._v(" "), _c("td", [_vm._v(_vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)))])]);
+    }, [_c("div", {
-  }), 0)]);
+      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"
+    }, [_vm._v("\n      " + _vm._s(file.type === "directory" ? "Dossier" : "Fichier") + "\n    ")]), _vm._v(" "), _c("div", {
+      staticClass: "flex-1 px-4 py-2"
+    }, [_vm._v("\n      " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n    ")])]);
+  })], 2);
 };
 var staticRenderFns = [function () {
   var _vm = this,
     _c = _vm._self._c;
-  return _c("thead", [_c("tr", [_c("th", [_vm._v("Nom")]), _vm._v(" "), _c("th", [_vm._v("Type")]), _vm._v(" "), _c("th", [_vm._v("Taille")])])]);
+  return _c("div", {
+    staticClass: "flex h-12 items-center border-b"
+  }, [_c("div", {
+    staticClass: "flex-1 px-4 py-2 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"
+  }, [_vm._v("Type")]), _vm._v(" "), _c("div", {
+    staticClass: "flex-1 px-4 py-2 font-semibold"
+  }, [_vm._v("Taille")])]);
 }];
 render._withStripped = true;
 
@@ -1338,32 +1354,7 @@ __webpack_require__.r(__webpack_exports__);
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `
-/* Styles pour le tableau */
+/* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
-table[data-v-36ad32b2] {
-    border-collapse: collapse;
-    width: 80%;
-    margin: 20px auto;
-}
-table[data-v-36ad32b2], th[data-v-36ad32b2], td[data-v-36ad32b2] {
-    border: 1px solid #ddd;
-    padding: 8px;
-}
-th[data-v-36ad32b2] {
-    background-color: #4CAF50;
-    color: white;
-}
-tr[data-v-36ad32b2] {
-    background-color: #f2f2f2;
-}
-td a[data-v-36ad32b2] {
-    color: #4CAF50;
-    text-decoration: none;
-}
-
-/* Ajout du style pour le hover */
-td div[data-v-36ad32b2] {
-    cursor: pointer; /* Change le curseur en main lors du survol */
-}
 `, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@@ -1936,6 +1927,194 @@ video {
 
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.m-6 {
+  margin: 1.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.table {
+  display: table;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.max-h-12 {
+  max-height: 3rem;
+}
+
+.max-h-10 {
+  max-height: 2.5rem;
+}
+
+.w-1\\/3 {
+  width: 33.333333%;
+}
+
+.w-2\\/3 {
+  width: 66.666667%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.table-auto {
+  table-layout: auto;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
+}
+
+.bg-black\\/30 {
+  background-color: rgb(0 0 0 / 0.3);
+}
+
+.bg-black\\/10 {
+  background-color: rgb(0 0 0 / 0.1);
+}
+
+.bg-black\\/20 {
+  background-color: rgb(0 0 0 / 0.2);
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.last\\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
+.hover\\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\\:bg-blue-500\\/10:hover {
+  background-color: rgb(59 130 246 / 0.1);
+}
+
+.hover\\:bg-blue-500\\/20:hover {
+  background-color: rgb(59 130 246 / 0.2);
 }`, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

src/App.vue

@@ -1,7 +1,13 @@
 <template>
-	<div id="app">
+	<div id="app" class="h-full w-full bg-slate-500">
-		<h1>FEUR</h1>
+		<div class="h-full w-full flex flex-row">
-		<FileTable/>
+			<div class="w-1/3 p-4 m-6 mr-2 bg-black/10 rounded-xl">
+			</div>
+			<div class="w-2/3 p-4 m-6 ml-2 bg-black/10 rounded-xl">
+				<FileTable/>
+			</div>
+		</div>
+		
 	</div>
 </template>
 

src/components/FileTable.vue

@@ -1,111 +1,82 @@
 <template>
-    <table>
+    <div class="flex flex-col h-full w-full border">
-        <thead>
+      <!-- En-tête -->
-            <tr>
+      <div class="flex h-12 items-center border-b">
-                <th>Nom</th>
+        <div class="flex-1 px-4 py-2 font-semibold border-r border-gray-300">Nom</div>
-                <th>Type</th>
+        <div class="flex-1 px-4 py-2 font-semibold border-r border-gray-300">Type</div>
-                <th>Taille</th>
+        <div class="flex-1 px-4 py-2 font-semibold">Taille</div>
-            </tr>
+      </div>
-        </thead>
+  
-        <tbody>
+      <!-- Contenu -->
-            <!-- Boucle pour afficher les fichiers et dossiers récupérés -->
+      <div 
-            <tr v-for="file in files" :key="file.filename">
+        v-for="file in files" 
-                <td>
+        :key="file.filename" 
-                    <!-- Affiche un lien cliquable vers le fichier ou le dossier -->
+        class="flex h-16 items-center hover:bg-blue-500/20 cursor-pointer border-b last:border-b-0"
-                    <div @click='handleClick(file)'>{{ file.basename }}</div>
+        @click="handleClick(file)"
-                </td>
+      >
-                <td>{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}</td>
+        <div class="flex-1 px-4 py-2 border-r border-gray-300">
-                <td>{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}</td>
+          {{ file.basename }}
-            </tr>
+        </div>
-        </tbody>
+        <div class="flex-1 px-4 py-2 border-r border-gray-300">
-    </table>
+          {{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
-</template>
+        </div>
-
+        <div class="flex-1 px-4 py-2">
-<script>
+          {{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
-import { getClient } from '@nextcloud/files/dav';
+        </div>
-
+      </div>
-export default {
+    </div>
+  </template>
+  
+  
+  <script>
+  import { getClient } from '@nextcloud/files/dav';
+  
+  export default {
     name: 'FileTable',
     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: '/'
-        };
+      };
     },
     async mounted() {
-        await this.fetchFiles();
+      await this.fetchFiles();
     },
     methods: {
-        async fetchFiles() {
+      async fetchFiles() {
-            try {
+        try {
-                // Création du client WebDAV
+          const client = getClient();
-                const client = getClient();
+          const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
-
+  
-                // Récupération des fichiers et dossiers à la racine
+          this.files = directoryItems.map(file => ({
-                const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); //changer admin par le nom de l'utilisateur courant
+            basename: file.basename,
-
+            size: file.size,
-                // Mise à jour de la liste des fichiers et dossiers
+            href: client.getFileDownloadLink(file.filename),
-                this.files = directoryItems.map(file => ({
+            type: file.type
-                    basename: file.basename,
+          }));
-                    size: file.size,
+        } catch (error) {
-                    href: client.getFileDownloadLink(file.filename),
+          console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
-                    type: file.type
-                }));
-            } catch (error) {
-                console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
-            }
-        },
-        // Fonction pour formater la taille des fichiers
-        formatFileSize(size) {
-            if (size < 1024) return `${size} B`;
-            if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
-            if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
-            return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
-        },
-        async handleClick(file) {
-        if (file.type === 'directory') {
-            // Si c'est un dossier, on change le répertoire courant et on fetch son contenu
-            this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
-            await this.fetchFiles();
-        } else {
-            // Si c'est un fichier, on ouvre le lien de téléchargement
-            window.open(file.href, '_blank');
         }
+      },
+      formatFileSize(size) {
+        if (size < 1024) return `${size} B`;
+        if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
+        if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
+        return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
+      },
+      async handleClick(file) {
+        if (file.type === 'directory') {
+          this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
+          await this.fetchFiles();
+        } else {
+          window.open(file.href, '_blank');
+        }
+      }
     }
-    }
+  };
-}
+  </script>
-</script>
+  
-
+  <style scoped>
-<style scoped>
+  /* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
-    /* Styles pour le tableau */
+  </style>
-    table {
+  
-        border-collapse: collapse;
-        width: 80%;
-        margin: 20px auto;
-    }
-
-    table, th, td {
-        border: 1px solid #ddd;
-        padding: 8px;
-    }
-
-    th {
-        background-color: #4CAF50;
-        color: white;
-    }
-
-    tr {
-        background-color: #f2f2f2;
-    }
-
-    td a {
-        color: #4CAF50;
-        text-decoration: none;
-    }
-
-    /* Ajout du style pour le hover */
-    td div {
-        cursor: pointer; /* Change le curseur en main lors du survol */
-    }
-</style>
-

src/output.css

@@ -543,4 +543,192 @@ video {
 
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.m-6 {
+  margin: 1.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.table {
+  display: table;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.max-h-12 {
+  max-height: 3rem;
+}
+
+.max-h-10 {
+  max-height: 2.5rem;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.table-auto {
+  table-layout: auto;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
+}
+
+.bg-black\/30 {
+  background-color: rgb(0 0 0 / 0.3);
+}
+
+.bg-black\/10 {
+  background-color: rgb(0 0 0 / 0.1);
+}
+
+.bg-black\/20 {
+  background-color: rgb(0 0 0 / 0.2);
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-500\/10:hover {
+  background-color: rgb(59 130 246 / 0.1);
+}
+
+.hover\:bg-blue-500\/20:hover {
+  background-color: rgb(59 130 246 / 0.2);
 }

tailwind.config.js

@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js, jsx, vue}", "./templates/**/*.{html, php}"],
+  content: [
+    "./src/**/*.{html,js,jsx,vue}", // Fichiers dans le dossier `src`
+    "./templates/**/*.{html,php}", // Fichiers dans le dossier `templates`
+  ],
   theme: {
     extend: {},
   },