Show palette selection in a dialog

This commit is contained in:
Christophe Gagnier 2023-11-23 00:45:09 -05:00 committed by Woody
parent db276d5f1f
commit 25eef2a40e
No known key found for this signature in database
GPG Key ID: 9872D7F5072789B2
2 changed files with 44 additions and 11 deletions

View File

@ -1334,12 +1334,42 @@ TD .checkmark, TD .radiomark {
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 {
height: 300px;
overflow: scroll;
height: 500px;
/* Fix shadow */
margin: 0px -16px;
padding: 0px 0px 0px 16px;
padding: 0px 16px 0px 16px;
}
#pallist.simplified .lstI.selected {

View File

@ -2274,6 +2274,10 @@ function setPalette(paletteId = null)
d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true;
}
if (simplifiedUI) {
gId("palw").lastChild.classList.toggle("hideD");
}
var obj = {"seg": {"pal": paletteId}};
requestJson(obj);
}
@ -3025,6 +3029,7 @@ function tooltip()
function simplifyUI() {
// Disable PC Mode as it does not exist in simple UI
if (pcMode) togglePcMode(true);
_C.style.setProperty('--n', 1);
// Put effects below palett list
gId("Colors").append(gId("fx"));
@ -3044,18 +3049,16 @@ function simplifyUI() {
while (gId("palw").firstChild) {
div.appendChild(gId("palw").firstChild);
}
div.classList.add("hide");
div.classList.add("hideD", "dialog");
let btn = document.createElement("button");
btn.classList.add("btn");
btn.innerText = "Change palette";
btn.addEventListener("click", () => {
div.classList.toggle("hide");
if (div.classList.contains("hide")) {
btn.innerText = "Change palette";
} else {
btn.innerText = "Hide palettes";
}
});
let togglePal = (e) => {
if (e.target != btn && e.target != div) return
gId("palw").lastChild.classList.toggle("hideD");
};
btn.addEventListener("click", togglePal);
div.addEventListener("click", togglePal);
gId("palw").prepend(div);
gId("palw").prepend(btn);