From 1ea94b469b21e8ff4b708af91d05a6137427f4e2 Mon Sep 17 00:00:00 2001
From: Djeex <djeex@djeex.fr>
Date: Tue, 19 Aug 2025 11:52:38 +0200
Subject: [PATCH] Theme editor UI ajdustment

---
 src/webui/index.html              |  4 +--
 src/webui/js/theme-editor.js      | 50 ++++++++++++++++++-------------
 src/webui/site-info/index.html    |  2 +-
 src/webui/style/style.css         | 35 ++++++++++++++++++++--
 src/webui/theme-editor/index.html | 50 ++++++++++++++++++++++---------
 5 files changed, 101 insertions(+), 40 deletions(-)

diff --git a/src/webui/index.html b/src/webui/index.html
index 4e88f39..6e7727b 100644
--- a/src/webui/index.html
+++ b/src/webui/index.html
@@ -31,8 +31,8 @@
       </div>
       <div class="nav-links">
         <ul class="nav-list">
-          <li class="nav-item appear2"><a href="/site-info">Site info</a>
-          <li class="nav-item appear2"><a href="#">Theme info</a>
+          <li class="nav-item appear2"><a href="/site-info">Site info</a></li>
+          <li class="nav-item appear2"><a href="/theme-editor">Theme info</a></li>
           <li class="nav-item appear2"><a href="#">Gallery</a>
         </ul>
       </div>
diff --git a/src/webui/js/theme-editor.js b/src/webui/js/theme-editor.js
index 7a3271b..8233476 100644
--- a/src/webui/js/theme-editor.js
+++ b/src/webui/js/theme-editor.js
@@ -31,19 +31,27 @@ function showToast(message, type = "success", duration = 3000) {
   }, duration);
 }
 
-function setColorInput(colorId, textId, value) {
+function setupColorPicker(colorId, btnId, textId, initial) {
   const colorInput = document.getElementById(colorId);
+  const colorBtn = document.getElementById(btnId);
   const textInput = document.getElementById(textId);
-  if (colorInput) colorInput.value = value;
-  if (textInput) textInput.value = value;
-  if (colorInput && textInput) {
-    colorInput.addEventListener("input", () => {
-      textInput.value = colorInput.value;
-    });
-    textInput.addEventListener("input", () => {
+
+  colorInput.value = initial;
+  colorBtn.style.background = initial;
+  textInput.value = initial.toUpperCase();
+
+  // Color input is positioned over the button and is clickable
+  colorInput.addEventListener("input", () => {
+    colorBtn.style.background = colorInput.value;
+    textInput.value = colorInput.value.toUpperCase();
+  });
+
+  textInput.addEventListener("input", () => {
+    if (/^#[0-9A-F]{6}$/i.test(textInput.value)) {
       colorInput.value = textInput.value;
-    });
-  }
+      colorBtn.style.background = textInput.value;
+    }
+  });
 }
 
 function setFontDropdown(selectId, value, options) {
@@ -75,7 +83,7 @@ function renderGoogleFonts(googleFonts) {
         <input type="text" name="google_fonts[${idx}][family]" value="${font.family || ""}">
         <label>Weights (comma separated)</label>
         <input type="text" name="google_fonts[${idx}][weights]" value="${(font.weights || []).join(',')}">
-        <button type="button" class="remove-google-font" data-idx="${idx}">Remove</button>
+        <button type="button" class="remove-google-font remove-btn" data-idx="${idx}"> 🗑️ Remove</button>
       </div>
     `;
   });
@@ -106,13 +114,13 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   // Colors
   if (themeYaml.colors) {
-    setColorInput("color-primary", "color-primary-text", themeYaml.colors.primary || "#0065a1");
-    setColorInput("color-primary-dark", "color-primary-dark-text", themeYaml.colors.primary_dark || "#005384");
-    setColorInput("color-secondary", "color-secondary-text", themeYaml.colors.secondary || "#00b0f0");
-    setColorInput("color-accent", "color-accent-text", themeYaml.colors.accent || "#ffc700");
-    setColorInput("color-text-dark", "color-text-dark-text", themeYaml.colors.text_dark || "#616161");
-    setColorInput("color-background", "color-background-text", themeYaml.colors.background || "#fff");
-    setColorInput("color-browser-color", "color-browser-color-text", themeYaml.colors.browser_color || "#fff");
+    setupColorPicker("color-primary", "color-primary-btn", "color-primary-text", themeYaml.colors.primary || "#0065a1");
+    setupColorPicker("color-primary-dark", "color-primary-dark-btn", "color-primary-dark-text", themeYaml.colors.primary_dark || "#005384");
+    setupColorPicker("color-secondary", "color-secondary-btn", "color-secondary-text", themeYaml.colors.secondary || "#00b0f0");
+    setupColorPicker("color-accent", "color-accent-btn", "color-accent-text", themeYaml.colors.accent || "#ffc700");
+    setupColorPicker("color-text-dark", "color-text-dark-btn", "color-text-dark-text", themeYaml.colors.text_dark || "#616161");
+    setupColorPicker("color-background", "color-background-btn", "color-background-text", themeYaml.colors.background || "#fff");
+    setupColorPicker("color-browser-color", "color-browser-color-btn", "color-browser-color-text", themeYaml.colors.browser_color || "#fff");
   }
 
   // Fonts
@@ -243,13 +251,13 @@ document.addEventListener("DOMContentLoaded", async () => {
   function updateFaviconPreview(src) {
     if (faviconPreview) {
       faviconPreview.src = src || "";
-      faviconPreview.style.display = src ? "inline-block" : "none";
+      faviconPreview.style.display = src ? "block" : "none";
     }
     if (removeFaviconBtn) {
-      removeFaviconBtn.style.display = src ? "inline-block" : "none";
+      removeFaviconBtn.style.display = src ? "block" : "none";
     }
     if (chooseFaviconBtn) {
-      chooseFaviconBtn.style.display = src ? "none" : "inline-block";
+      chooseFaviconBtn.style.display = src ? "none" : "block";
     }
   }
 
diff --git a/src/webui/site-info/index.html b/src/webui/site-info/index.html
index 9fa3106..860f52d 100644
--- a/src/webui/site-info/index.html
+++ b/src/webui/site-info/index.html
@@ -32,7 +32,7 @@
       <div class="nav-links">
         <ul class="nav-list">
           <li class="nav-item appear2"><a href="/site-info">Site info</a></li>
-          <li class="nav-item appear2"><a href="#">Theme info</a></li>
+          <li class="nav-item appear2"><a href="/theme-editor">Theme info</a></li>
           <li class="nav-item appear2"><a href="#">Gallery</a></li>
         </ul>
       </div>
diff --git a/src/webui/style/style.css b/src/webui/style/style.css
index b37bc9c..4881568 100644
--- a/src/webui/style/style.css
+++ b/src/webui/style/style.css
@@ -484,7 +484,7 @@ h2 {
 
 /* --- Site Info Form --- */
 
-#site-info.content-inner {
+#site-info.content-inner, #theme-editor.content-inner {
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
@@ -661,4 +661,35 @@ img#thumbnail-preview {
 
 #site-info-form .thumbnail-form-label, #theme-editor-form .thumbnail-form-label {
   margin-top: 10px;
-}
\ No newline at end of file
+}
+
+#favicon-preview {
+  margin-top: 8px;
+}
+
+
+.color-fields {
+  gap: 8px;
+  position: relative;
+}
+
+
+#theme-editor button.color-btn {
+  height: 100%;
+  border-radius: 8px;
+  cursor: pointer;
+  display: inline-block;
+  margin-top: 0px;
+  margin-bottom: 4px;
+}
+
+input[type="color"].color-input {
+  margin:0;
+  padding: 0;
+  cursor: pointer;
+  height:100%;
+  position:absolute; 
+  left:0; 
+  top:0;
+  opacity:0;
+}
diff --git a/src/webui/theme-editor/index.html b/src/webui/theme-editor/index.html
index 2a0bec4..5254ba2 100644
--- a/src/webui/theme-editor/index.html
+++ b/src/webui/theme-editor/index.html
@@ -51,40 +51,62 @@
       <fieldset>
         <h2>Colors</h2>
         <div class="fields">
+          <!-- Example for one color field, repeat for all -->
           <div class="input-field">
             <label>Primary</label>
-            <input type="color" name="colors.primary" id="color-primary">
-            <input type="text" name="colors.primary_text" id="color-primary-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-primary-btn" class="color-btn"></button>
+              <input type="color" name="colors.primary" id="color-primary" class="color-input">
+              <input type="text" name="colors.primary_text" id="color-primary-text" style="width:100px;">
+            </div>
           </div>
           <div class="input-field">
             <label>Primary Dark</label>
-            <input type="color" name="colors.primary_dark" id="color-primary-dark">
-            <input type="text" name="colors.primary_dark_text" id="color-primary-dark-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-primary-dark-btn" class="color-btn"></button>
+              <input type="color" name="colors.primary_dark" id="color-primary-dark" class="color-input">
+              <input type="text" name="colors.primary_dark_text" id="color-primary-dark-text" style="width:100px;">
+            </div>
           </div>
           <div class="input-field">
             <label>Secondary</label>
-            <input type="color" name="colors.secondary" id="color-secondary">
-            <input type="text" name="colors.secondary_text" id="color-secondary-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-secondary-btn" class="color-btn"></button>
+              <input type="color" name="colors.secondary" id="color-secondary" class="color-input">
+              <input type="text" name="colors.secondary_text" id="color-secondary-text" style="width:100px;">
+            </div>
           </div>
           <div class="input-field">
             <label>Accent</label>
-            <input type="color" name="colors.accent" id="color-accent">
-            <input type="text" name="colors.accent_text" id="color-accent-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-accent-btn" class="color-btn"></button>
+              <input type="color" name="colors.accent" id="color-accent" class="color-input">
+              <input type="text" name="colors.accent_text" id="color-accent-text" style="width:100px;">
+            </div>
           </div>
           <div class="input-field">
             <label>Text Dark</label>
-            <input type="color" name="colors.text_dark" id="color-text-dark">
-            <input type="text" name="colors.text_dark_text" id="color-text-dark-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-text-dark-btn" class="color-btn"></button>
+              <input type="color" name="colors.text_dark" id="color-text-dark" class="color-input">
+              <input type="text" name="colors.text_dark_text" id="color-text-dark-text" style="width:100px;">
+            </div>
           </div>
           <div class="input-field">
             <label>Background</label>
-            <input type="color" name="colors.background" id="color-background">
-            <input type="text" name="colors.background_text" id="color-background-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-background-btn" class="color-btn"></button>
+              <input type="color" name="colors.background" id="color-background" class="color-input">
+              <input type="text" name="colors.background_text" id="color-background-text" style="width:100px;">
+            </div>
           </div>
           <div class="input-field">
             <label>Browser Color</label>
-            <input type="color" name="colors.browser_color" id="color-browser-color">
-            <input type="text" name="colors.browser_color_text" id="color-browser-color-text" style="width:100px;">
+            <div class="fields color-fields">
+              <button type="button" id="color-browser-color-btn" class="color-btn"></button>
+              <input type="color" name="colors.browser_color" id="color-browser-color" class="color-input">
+              <input type="text" name="colors.browser_color_text" id="color-browser-color-text" style="width:100px;">
+            </div>
           </div>
         </div>
       </fieldset>