jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-04-23 14:27:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better implementation of dialog

Browse Source
This commit is contained in:
Woody 2023-12-11 16:33:25 +01:00
parent 687e2ecaaa
commit 2dbf72e452
No known key found for this signature in database
GPG Key ID: 9872D7F5072789B2
2 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
wled00/data/index.css
View File

@ -1345,30 +1345,16 @@ TD .checkmark, TD .radiomark {
top: calc(var(--sti) + 42px);
}
.dialog:not(.hide)::after {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--c-o);
content: "";
z-index: -1;
dialog::backdrop {
backdrop-filter: blur(5px);
}
.dialog {
position: fixed;
z-index: 5;
top: 10%;
left: 0;
right: 0;
max-width: 280px;
dialog {
max-height: 70%;
margin: auto;
padding: 12px 24px;
border: 0;
border-radius: 10px;
background-color: var(--c-5);
overflow: scroll;
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)), var(--c-3);
box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f);
}
#fxlist .lstI.sticky,

26
wled00/data/index.js
View File

@ -1616,9 +1616,9 @@ function setEffectParameters(idx)
// disable palette list
text += ' not used';
palw.style.display = "none";
// hide palette dialog if not available
if (gId("palw").lastElementChild.classList.contains("dialog")) {
gId("palw").lastElementChild.classList.add("hide");
// Close palette dialog if not available
if (gId("palw").lastElementChild.tagName == "DIALOG") {
gId("palw").lastElementChild.close();
}
}
pall.innerHTML = icon + text;
@ -2285,9 +2285,9 @@ function setFX(ind = null)
d.querySelector(`#fxlist input[name="fx"][value="${ind}"]`).checked = true;
}
// Hide effect dialog in simplified UI
// Close effect dialog in simplified UI
if (simplifiedUI) {
gId("fx").lastElementChild.classList.add("hide");
gId("fx").lastElementChild.close();
}
var obj = {"seg": {"fx": parseInt(ind), "fxdef": cfg.comp.fxdef}}; // fxdef sets effect parameters to default values
@ -2302,9 +2302,9 @@ function setPalette(paletteId = null)
d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true;
}
// Hide palette dialog in simplified UI
// Close palette dialog in simplified UI
if (simplifiedUI) {
gId("palw").lastElementChild.classList.add("hide");
gId("palw").lastElementChild.close();
}
var obj = {"seg": {"pal": paletteId}};
@ -3059,7 +3059,7 @@ function simplifyUI() {
// Create dropdown dialog
function createDropdown(id, buttonText, dialogElements = null) {
// Create dropdown dialog
const dialog = document.createElement("div");
const dialog = document.createElement("dialog");
// Move every dialogElement to the dropdown dialog or if none are given, move all children of the element with the given id
if (dialogElements) {
dialogElements.forEach((e) => {
@ -3070,7 +3070,6 @@ function simplifyUI() {
dialog.appendChild(gId(id).firstChild);
}
}
dialog.classList.add("hide", "dialog");
// Create button for the dropdown
const btn = document.createElement("button");
@ -3079,7 +3078,14 @@ function simplifyUI() {
btn.innerText = buttonText;
function toggleDialog(e) {
if (e.target != btn && e.target != dialog) return;
dialog.classList.toggle("hide");
if (dialog.open) {
dialog.close();
return;
}
// Prevent autofocus on dialog open
dialog.inert = true;
dialog.showModal();
dialog.inert = false;
clean(dialog.firstElementChild.children[1]);
dialog.scrollTop = 0;
};