From b80807cc3c0ffcc4d9008deffa3d5e62e1dcccd7 Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:04:30 +0100
Subject: [PATCH] padding of webcontent view

---
 src/App.vue                         |  4 ++--
 src/components/WebContentViewer.vue | 24 ++++++++++++++++--------
 src/output.css                      | 20 ++++++++++++++++++++
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 197896f..7de3b55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,12 +4,12 @@
 		<div class="h-full w-full flex flex-col sm:flex-row">
 			<!-- Première section -->
 			<div 
-				class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40">
+				class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 sm:mr-0 rounded-xl bg-NcBlack/40">
 				<WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
 			</div>
 			<!-- Deuxième section -->
 			<div 
-				class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl">
+				class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 sm:ml-4 bg-NcBlack rounded-xl">
 				<FileTable :file="sharedFile" :zip="zip"/>
 			</div>
 		</div>
diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index 4b422e6..16b72d4 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex flex-col h-full w-full border">
         <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-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
+            <div class="w-5/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">Taille</div>
         </div>
 
         <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading"
@@ -14,11 +14,11 @@
                     </svg>
                 </div>
             </template>
-            <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
+            <div class="w-5/6 flex items-center px-4 py-2  cursor-pointer">
                 <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ zipName }}</div>
 
             </div>
-            <div class="w-2/6 py-2 cursor-pointer">
+            <div class="w-1/6 py-2 cursor-pointer">
                 {{ formatFileSize(zipSize) }}
             </div>
         </div>
@@ -27,8 +27,11 @@
             <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
 
                 <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+                    :style="{ 
+                        'padding-left': `${0.5 * (file.depth + 1)}rem`
+                    }"
                     @click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)">
-                    <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
+                    <div class="w-5/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
                         <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
                             <template>
                                 <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
@@ -51,6 +54,9 @@
                 </div>
 
                 <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+                    :style="{ 
+                        'padding-left': `${0.5 * (file.depth + 1)}rem`
+                    }"
                     v-else draggable="true" @dragstart="onDragStart(file, $event)">
                     <template>
                         <div class="flex items-center justify-center cursor-pointer">
@@ -63,11 +69,11 @@
                             </svg>
                         </div>
                     </template>
-                    <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
-                        <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ file.name }}</div>
+                    <div class="w-5/6 flex items-center px-4 py-2  cursor-pointer">
+                        <div class="truncate max-sm:max-w-32 max-w-96 cursor-pointer">{{ file.name }}</div>
 
                     </div>
-                    <div class="w-2/6 py-2 cursor-pointer">
+                    <div class="w-1/6 py-2 cursor-pointer">
                         {{ formatFileSize(file.size) }}
                     </div>
                 </div>
@@ -89,6 +95,7 @@ import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
 import Loading from 'vue-material-design-icons/Loading.vue';
 import { ref } from 'vue';
+import path from 'path';
 
 export default {
     name: 'WebContentViewer',
@@ -186,6 +193,7 @@ export default {
                                 size: isDirectory ? 0 : file._data.uncompressedSize,
                                 content: isDirectory ? null : '',  // Initialiser 'content' pour les fichiers
                                 children: isDirectory ? [] : null,
+                                depth: pathParts.length, // Profondeur du fichier dans l'arborescence
                                 //remove the name of the file from the path
                                 parentPath: i > 0 ? pathParts[i - 1] : '',
                                 unzip: promise
diff --git a/src/output.css b/src/output.css
index 10da219..f034c22 100644
--- a/src/output.css
+++ b/src/output.css
@@ -707,10 +707,18 @@ video {
   width: 100%;
 }
 
+.w-5\/6 {
+  width: 83.333333%;
+}
+
 .max-w-64 {
   max-width: 16rem;
 }
 
+.max-w-96 {
+  max-width: 24rem;
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1031,6 +1039,18 @@ video {
     margin: 1.5rem;
   }
 
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .sm\:mr-0 {
+    margin-right: 0px;
+  }
+
+  .sm\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .sm\:w-1\/3 {
     width: 33.333333%;
   }