mirror of
https://github.com/wled/WLED.git
synced 2025-07-20 01:06:32 +00:00
Show palette selection in a dialog
This commit is contained in:
parent
db276d5f1f
commit
25eef2a40e
@ -1334,12 +1334,42 @@ TD .checkmark, TD .radiomark {
|
|||||||
top: calc(var(--sti) + 42px);
|
top: calc(var(--sti) + 42px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dialog:not(.hideD)::before {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--c-tb);
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
.dialog {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 5;
|
||||||
|
top: 50px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 280px;
|
||||||
|
max-height: 70%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: var(--c-5);
|
||||||
|
overflow: none;
|
||||||
|
box-shadow: 4px 4px 10px 4px var(--c-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideD {
|
||||||
|
top: -9999999999px;
|
||||||
|
}
|
||||||
|
|
||||||
#pallist.simplified {
|
#pallist.simplified {
|
||||||
height: 300px;
|
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
height: 500px;
|
||||||
/* Fix shadow */
|
/* Fix shadow */
|
||||||
margin: 0px -16px;
|
margin: 0px -16px;
|
||||||
padding: 0px 0px 0px 16px;
|
padding: 0px 16px 0px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pallist.simplified .lstI.selected {
|
#pallist.simplified .lstI.selected {
|
||||||
|
@ -2274,6 +2274,10 @@ function setPalette(paletteId = null)
|
|||||||
d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true;
|
d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (simplifiedUI) {
|
||||||
|
gId("palw").lastChild.classList.toggle("hideD");
|
||||||
|
}
|
||||||
|
|
||||||
var obj = {"seg": {"pal": paletteId}};
|
var obj = {"seg": {"pal": paletteId}};
|
||||||
requestJson(obj);
|
requestJson(obj);
|
||||||
}
|
}
|
||||||
@ -3025,6 +3029,7 @@ function tooltip()
|
|||||||
function simplifyUI() {
|
function simplifyUI() {
|
||||||
// Disable PC Mode as it does not exist in simple UI
|
// Disable PC Mode as it does not exist in simple UI
|
||||||
if (pcMode) togglePcMode(true);
|
if (pcMode) togglePcMode(true);
|
||||||
|
_C.style.setProperty('--n', 1);
|
||||||
|
|
||||||
// Put effects below palett list
|
// Put effects below palett list
|
||||||
gId("Colors").append(gId("fx"));
|
gId("Colors").append(gId("fx"));
|
||||||
@ -3044,18 +3049,16 @@ function simplifyUI() {
|
|||||||
while (gId("palw").firstChild) {
|
while (gId("palw").firstChild) {
|
||||||
div.appendChild(gId("palw").firstChild);
|
div.appendChild(gId("palw").firstChild);
|
||||||
}
|
}
|
||||||
div.classList.add("hide");
|
div.classList.add("hideD", "dialog");
|
||||||
let btn = document.createElement("button");
|
let btn = document.createElement("button");
|
||||||
btn.classList.add("btn");
|
btn.classList.add("btn");
|
||||||
btn.innerText = "Change palette";
|
btn.innerText = "Change palette";
|
||||||
btn.addEventListener("click", () => {
|
let togglePal = (e) => {
|
||||||
div.classList.toggle("hide");
|
if (e.target != btn && e.target != div) return
|
||||||
if (div.classList.contains("hide")) {
|
gId("palw").lastChild.classList.toggle("hideD");
|
||||||
btn.innerText = "Change palette";
|
};
|
||||||
} else {
|
btn.addEventListener("click", togglePal);
|
||||||
btn.innerText = "Hide palettes";
|
div.addEventListener("click", togglePal);
|
||||||
}
|
|
||||||
});
|
|
||||||
gId("palw").prepend(div);
|
gId("palw").prepend(div);
|
||||||
gId("palw").prepend(btn);
|
gId("palw").prepend(btn);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user