From d4f4ec7f766144970ae8b4b921c0af6943fa71d2 Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:26:17 +0100
Subject: [PATCH] add lightmode

---
 src/App.vue                         |  6 +++---
 src/components/EditFileName.vue     |  2 +-
 src/components/FileExistsDialog.vue |  6 +++---
 src/components/FileTable.vue        | 18 +++++++++---------
 src/components/WebContentViewer.vue |  6 +++---
 tailwind.config.js                  |  2 ++
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 35c6516..986a8be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,15 @@
 <template>
-	<div id="app" class="h-full w-full bg-black/80">
+	<div id="app" class="h-full w-full dark:bg-black/80 bg-white/80">
 		<!-- Conteneur principal, ajustement en flex-row à partir de sm -->
 		<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 sm:mr-0 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 dark:bg-NcBlack/40 bg-white/80">
 				<WebContentViewer :translate="translate" @zip-upload="handleZipUpload" @file-upload="handleFileUpload" @dragEnded="toggleDragEnded" 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 sm:ml-4 bg-NcBlack rounded-xl">
+				class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 sm:ml-4 dark:bg-NcBlack bg-white rounded-xl">
 				<FileTable :file="sharedFile" :zip="zip" :dragEnded="dragEnded" :translate="translate" @dragEnded="toggleDragEnded"/>
 			</div>
 		</div>
diff --git a/src/components/EditFileName.vue b/src/components/EditFileName.vue
index 5824128..cbeafda 100644
--- a/src/components/EditFileName.vue
+++ b/src/components/EditFileName.vue
@@ -1,6 +1,6 @@
 <template>
 <div  class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50" @click="closeModal">
-    <div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96" @click.stop>
+    <div class="dark:bg-NcBlack bg-white rounded-lg shadow-lg p-6 w-96" @click.stop>
         <h2 class="text-lg font-semibold mb-4">{{ translate('modify.file.name') }}</h2>
         <input
             type="text"
diff --git a/src/components/FileExistsDialog.vue b/src/components/FileExistsDialog.vue
index 25cd477..25cf005 100644
--- a/src/components/FileExistsDialog.vue
+++ b/src/components/FileExistsDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
-        <div v-if="!displayRename && !displayOverwrite" class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+        <div v-if="!displayRename && !displayOverwrite" class="dark:bg-NcBlack bg-white rounded-lg shadow-lg p-6 w-96">
             <h2 class="text-lg font-semibold mb-4">{{ translate('file.already.exist') }}</h2>
             <p>{{ translate('file.pt.1') }}{{ fileName }}{{ translate('file.pt.2') }}</p>
             <div class="flex justify-end mt-4 space-x-2">
@@ -11,7 +11,7 @@
         </div>
 
         <!-- Renommer le fichier -->
-        <div v-if="displayRename" class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+        <div v-if="displayRename" class="dark:bg-NcBlack bg-white rounded-lg shadow-lg p-6 w-96">
             <h2 class="text-lg font-semibold mb-4">{{ translate('change.file.name') }}</h2>
             <input
                 type="text"
@@ -28,7 +28,7 @@
         </div>
 
         <!-- Appliquer l'ecrasement a tous -->
-        <div v-if="displayOverwrite" class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+        <div v-if="displayOverwrite" class="dark:bg-NcBlack bg-white rounded-lg shadow-lg p-6 w-96">
             <h2 class="text-lg font-semibold mb-4">{{ translate('you.are.going.to.erase.file.folder') }}</h2>
             <div class="flex items-center content-evenly">
                 <input type="checkbox" v-model="forAll" />
diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
index 302a1f1..4c0c924 100644
--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@@ -44,7 +44,7 @@
             <!-- Popup pour la création de fichier -->
             <div v-if="isAddFilePopupVisible"
                 class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
-                <div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+                <div class="dark:bg-NcBlack bg-white rounded-lg shadow-lg p-6 w-96">
                     <h2 class="text-lg font-semibold mb-4">{{ translate('create.new.file') }}</h2>
                     <input v-model="newFileName" type="text" :placeholder="translate('name.of.file')"
                         class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
@@ -78,12 +78,12 @@
                 @dragleave.prevent="onDragLeave($event)" @dragend="onDragEnd">
 
                 <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"
+                    class="flex h-16 items-center dark:hover:bg-NcGray hover:bg-NcWhite rounded-lg border-b last:border-b-0 border-gray-300 cursor-pointer"
                     @click="handleClickElem(file)">
 
                     <!-- Nom -->
-                    <div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300">
-                        <div class="w-12 h-12 flex items-center justify-center">
+                    <div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
+                        <div class="w-12 h-12 flex items-center justify-cente cursor-pointer">
                             <template v-if="file.type === 'directory'">
                                 <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
                                     <path
@@ -92,7 +92,7 @@
                                 </svg>
                             </template>
                             <template v-if="file.type === 'file' && file.basename.split('.').pop() !== 'zip'">
-                                <div :class="['flex items-center justify-center']">
+                                <div :class="['flex items-center justify-center cursor-pointer']">
                                     <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
                                         class="w-10 h-10"
                                         style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
@@ -114,25 +114,25 @@
                     </div>
 
                     <!-- Type -->
-                    <div class="w-2/12 px-4 py-2 border-r border-gray-300">
+                    <div class="w-2/12 px-4 py-2 border-r border-gray-300 cursor-pointer">
                         {{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
                     </div>
 
                     <!-- Taille -->
-                    <div class="w-2/12 px-4 py-2">
+                    <div class="w-2/12 px-4 py-2 cursor-pointer">
                         {{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
                     </div>
 
                     <!-- Options -->
                     <div class="w-1/12 px-4 py-2" @click.stop>
                         <NcActions>
-                            <NcActionButton @click="deleteElem(file)">
+                            <NcActionButton @click="deleteElem(file)" :closeAfterClick="true">
                                 <template #icon>
                                     <Delete :size="20" />
                                 </template>
                                 {{ translate('delete') }}
                             </NcActionButton>
-                            <NcActionButton @click="editElem(file)">
+                            <NcActionButton @click="editElem(file)" :closeAfterClick="true">
                                 <template #icon>
                                     <Pencil :size="20" />
                                 </template>
diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index 5c3c3cc..6d3226d 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -6,7 +6,7 @@
         </div>
 
         <!-- Fichier .zip -->
-        <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 && zipContent.length !== 0"
+        <div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading && zipContent.length !== 0"
             draggable="true" @dragstart="dragZip()" @dragend="onDragEnd">
             <template>
                 <div class="flex items-center justify-center cursor-pointer">
@@ -28,7 +28,7 @@
         <div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto h-full">
             <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"
+                <div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite 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`
                     }"
@@ -55,7 +55,7 @@
                     <div class="w-1/6 px-4 py-2 cursor-pointer">-</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"
+                <div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite 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`
                     }"
diff --git a/tailwind.config.js b/tailwind.config.js
index 717eeb9..b68702f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,12 +4,14 @@ module.exports = {
     "./src/**/*.{html,js,jsx,vue}", // Fichiers dans le dossier `src`
     "./templates/**/*.{html,php}", // Fichiers dans le dossier `templates`
   ],
+  darkMode: ['selector', '[data-themes="dark"], [data-themes="default"]'],
   theme: {
     extend: {
       colors: {
         NcBlack: '#171717',
         NcBlue: '#0072c3',
         NcGray: '#212121',
+        NcWhite: '#ededed',
       },
     },
   },