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); 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 {

View File

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