Djeex/lumeex
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

Theme editor UI ajdustment

Browse Source
This commit is contained in:
Djeex
2025-08-19 11:52:38 +02:00
parent 2ec4be624b
commit 1ea94b469b
5 changed files with 101 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/webui/index.html
View File

@ -31,8 +31,8 @@
</div> </div>
<div class="nav-links"> <div class="nav-links">
<ul class="nav-list"> <ul class="nav-list">
<li class="nav-item appear2"><a href="/site-info">Site info</a> <li class="nav-item appear2"><a href="/site-info">Site info</a></li>
<li class="nav-item appear2"><a href="#">Theme info</a> <li class="nav-item appear2"><a href="/theme-editor">Theme info</a></li>
<li class="nav-item appear2"><a href="#">Gallery</a> <li class="nav-item appear2"><a href="#">Gallery</a>
</ul> </ul>
</div> </div>

50
src/webui/js/theme-editor.js
View File

@ -31,19 +31,27 @@ function showToast(message, type = "success", duration = 3000) {
}, duration); }, duration);
} }
function setColorInput(colorId, textId, value) { function setupColorPicker(colorId, btnId, textId, initial) {
const colorInput = document.getElementById(colorId); const colorInput = document.getElementById(colorId);
const colorBtn = document.getElementById(btnId);
const textInput = document.getElementById(textId); const textInput = document.getElementById(textId);
if (colorInput) colorInput.value = value;
if (textInput) textInput.value = value; colorInput.value = initial;
if (colorInput && textInput) { colorBtn.style.background = initial;
colorInput.addEventListener("input", () => { textInput.value = initial.toUpperCase();
textInput.value = colorInput.value;
}); // Color input is positioned over the button and is clickable
textInput.addEventListener("input", () => { 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; colorInput.value = textInput.value;
}); colorBtn.style.background = textInput.value;
} }
});
} }
function setFontDropdown(selectId, value, options) { function setFontDropdown(selectId, value, options) {
@ -75,7 +83,7 @@ function renderGoogleFonts(googleFonts) {
<input type="text" name="google_fonts[${idx}][family]" value="${font.family || ""}"> <input type="text" name="google_fonts[${idx}][family]" value="${font.family || ""}">
<label>Weights (comma separated)</label> <label>Weights (comma separated)</label>
<input type="text" name="google_fonts[${idx}][weights]" value="${(font.weights || []).join(',')}"> <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> </div>
`; `;
}); });
@ -106,13 +114,13 @@ document.addEventListener("DOMContentLoaded", async () => {
// Colors // Colors
if (themeYaml.colors) { if (themeYaml.colors) {
setColorInput("color-primary", "color-primary-text", themeYaml.colors.primary || "#0065a1"); setupColorPicker("color-primary", "color-primary-btn", "color-primary-text", themeYaml.colors.primary || "#0065a1");
setColorInput("color-primary-dark", "color-primary-dark-text", themeYaml.colors.primary_dark || "#005384"); setupColorPicker("color-primary-dark", "color-primary-dark-btn", "color-primary-dark-text", themeYaml.colors.primary_dark || "#005384");
setColorInput("color-secondary", "color-secondary-text", themeYaml.colors.secondary || "#00b0f0"); setupColorPicker("color-secondary", "color-secondary-btn", "color-secondary-text", themeYaml.colors.secondary || "#00b0f0");
setColorInput("color-accent", "color-accent-text", themeYaml.colors.accent || "#ffc700"); setupColorPicker("color-accent", "color-accent-btn", "color-accent-text", themeYaml.colors.accent || "#ffc700");
setColorInput("color-text-dark", "color-text-dark-text", themeYaml.colors.text_dark || "#616161"); setupColorPicker("color-text-dark", "color-text-dark-btn", "color-text-dark-text", themeYaml.colors.text_dark || "#616161");
setColorInput("color-background", "color-background-text", themeYaml.colors.background || "#fff"); setupColorPicker("color-background", "color-background-btn", "color-background-text", themeYaml.colors.background || "#fff");
setColorInput("color-browser-color", "color-browser-color-text", themeYaml.colors.browser_color || "#fff"); setupColorPicker("color-browser-color", "color-browser-color-btn", "color-browser-color-text", themeYaml.colors.browser_color || "#fff");
} }
// Fonts // Fonts
@ -243,13 +251,13 @@ document.addEventListener("DOMContentLoaded", async () => {
function updateFaviconPreview(src) { function updateFaviconPreview(src) {
if (faviconPreview) { if (faviconPreview) {
faviconPreview.src = src || ""; faviconPreview.src = src || "";
faviconPreview.style.display = src ? "inline-block" : "none"; faviconPreview.style.display = src ? "block" : "none";
} }
if (removeFaviconBtn) { if (removeFaviconBtn) {
removeFaviconBtn.style.display = src ? "inline-block" : "none"; removeFaviconBtn.style.display = src ? "block" : "none";
} }
if (chooseFaviconBtn) { if (chooseFaviconBtn) {
chooseFaviconBtn.style.display = src ? "none" : "inline-block"; chooseFaviconBtn.style.display = src ? "none" : "block";
} }
} }

2
src/webui/site-info/index.html
View File

@ -32,7 +32,7 @@
<div class="nav-links"> <div class="nav-links">
<ul class="nav-list"> <ul class="nav-list">
<li class="nav-item appear2"><a href="/site-info">Site info</a></li> <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> <li class="nav-item appear2"><a href="#">Gallery</a></li>
</ul> </ul>
</div> </div>

35
src/webui/style/style.css
View File

@ -484,7 +484,7 @@ h2 {
/* --- Site Info Form --- */ /* --- Site Info Form --- */
#site-info.content-inner { #site-info.content-inner, #theme-editor.content-inner {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
max-width: 1140px; max-width: 1140px;
@ -661,4 +661,35 @@ img#thumbnail-preview {
#site-info-form .thumbnail-form-label, #theme-editor-form .thumbnail-form-label { #site-info-form .thumbnail-form-label, #theme-editor-form .thumbnail-form-label {
margin-top: 10px; margin-top: 10px;
} }
#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;
}

50
src/webui/theme-editor/index.html
View File

@ -51,40 +51,62 @@
<fieldset> <fieldset>
<h2>Colors</h2> <h2>Colors</h2>
<div class="fields"> <div class="fields">
<!-- Example for one color field, repeat for all -->
<div class="input-field"> <div class="input-field">
<label>Primary</label> <label>Primary</label>
<input type="color" name="colors.primary" id="color-primary"> <div class="fields color-fields">
<input type="text" name="colors.primary_text" id="color-primary-text" style="width:100px;"> <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>
<div class="input-field"> <div class="input-field">
<label>Primary Dark</label> <label>Primary Dark</label>
<input type="color" name="colors.primary_dark" id="color-primary-dark"> <div class="fields color-fields">
<input type="text" name="colors.primary_dark_text" id="color-primary-dark-text" style="width:100px;"> <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>
<div class="input-field"> <div class="input-field">
<label>Secondary</label> <label>Secondary</label>
<input type="color" name="colors.secondary" id="color-secondary"> <div class="fields color-fields">
<input type="text" name="colors.secondary_text" id="color-secondary-text" style="width:100px;"> <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>
<div class="input-field"> <div class="input-field">
<label>Accent</label> <label>Accent</label>
<input type="color" name="colors.accent" id="color-accent"> <div class="fields color-fields">
<input type="text" name="colors.accent_text" id="color-accent-text" style="width:100px;"> <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>
<div class="input-field"> <div class="input-field">
<label>Text Dark</label> <label>Text Dark</label>
<input type="color" name="colors.text_dark" id="color-text-dark"> <div class="fields color-fields">
<input type="text" name="colors.text_dark_text" id="color-text-dark-text" style="width:100px;"> <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>
<div class="input-field"> <div class="input-field">
<label>Background</label> <label>Background</label>
<input type="color" name="colors.background" id="color-background"> <div class="fields color-fields">
<input type="text" name="colors.background_text" id="color-background-text" style="width:100px;"> <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>
<div class="input-field"> <div class="input-field">
<label>Browser Color</label> <label>Browser Color</label>
<input type="color" name="colors.browser_color" id="color-browser-color"> <div class="fields color-fields">
<input type="text" name="colors.browser_color_text" id="color-browser-color-text" style="width:100px;"> <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>
</div> </div>
</fieldset> </fieldset>