Djeex/lumeex
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases 9 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 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>

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

@@ -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";
}
}

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

@@ -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>

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

@@ -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;
}
}
#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>
<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>