jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-19 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix FX filter bug

Browse Source
This commit is contained in:
Blaz Kristan 2024-09-29 13:00:07 +02:00
parent 6f221852a2
commit 10d8cfde85
2 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
wled00/data/index.css
View File

@ -35,6 +35,7 @@
--sgp: "block"; --sgp: "block";
--bmt: 0; --bmt: 0;
--sti: 42px; --sti: 42px;
--stp: 42px;
} }
html { html {
@ -468,7 +469,7 @@ button {
padding: 4px 2px; padding: 4px 2px;
position: relative; position: relative;
opacity: 1; opacity: 1;
transition: opacity .5s linear, height .25s, transform .25s; transition: opacity .25s linear, height .2s, transform .2s;
} }
.filter { .filter {
@ -1335,10 +1336,12 @@ TD .checkmark, TD .radiomark {
top: 42px; top: 42px;
} }
#fxlist .lstI.selected, #fxlist .lstI.selected {
#pallist .lstI.selected {
top: calc(var(--sti) + 42px); top: calc(var(--sti) + 42px);
} }
#pallist .lstI.selected {
top: calc(var(--stp) + 42px);
}
dialog::backdrop { dialog::backdrop {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@ -1353,10 +1356,12 @@ dialog {
color: var(--c-f); color: var(--c-f);
} }
#fxlist .lstI.sticky, #fxlist .lstI.sticky {
#pallist .lstI.sticky {
top: var(--sti); top: var(--sti);
} }
#pallist .lstI.sticky {
top: var(--stp);
}
/* list item content */ /* list item content */
.lstIcontent { .lstIcontent {

28
wled00/data/index.js
View File

@ -2828,7 +2828,12 @@ function search(field, listId = null) {
// restore default preset sorting if no search term is entered // restore default preset sorting if no search term is entered
if (!search) { if (!search) {
if (listId === 'pcont') { populatePresets(); return; } if (listId === 'pcont') { populatePresets(); return; }
if (listId === 'pallist') { populatePalettes(); return; } if (listId === 'pallist') {
let id = parseInt(d.querySelector('#pallist input[name="palette"]:checked').value); // preserve selected palette
populatePalettes();
updateSelectedPalette(id);
return;
}
} }
// clear filter if searching in fxlist // clear filter if searching in fxlist
@ -2887,18 +2892,25 @@ function initFilters() {
function filterFocus(e) { function filterFocus(e) {
const f = gId("filters"); const f = gId("filters");
if (e.type === "focus") f.classList.remove('fade'); // immediately show (still has transition) const c = !!f.querySelectorAll("input[type=checkbox]:checked").length;
const h = f.offsetHeight;
const sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti'));
if (e.type === "focus") {
// compute sticky top (with delay for transition) // compute sticky top (with delay for transition)
setTimeout(() => { if (!h) setTimeout(() => {
const sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight; sCol('--sti', (sti+f.offsetHeight) + "px"); // has an unpleasant consequence on palette offset
sCol('--sti', sti + "px"); }, 255);
}, 252); f.classList.remove('fade'); // immediately show (still has transition)
}
if (e.type === "blur") { if (e.type === "blur") {
setTimeout(() => { setTimeout(() => {
if (e.target === document.activeElement && document.hasFocus()) return; if (e.target === document.activeElement && document.hasFocus()) return;
// do not hide if filter is active // do not hide if filter is active
if (gId("filters").querySelectorAll("input[type=checkbox]:checked").length) return; if (!c) {
// compute sticky top
sCol('--sti', (sti-h) + "px"); // has an unpleasant consequence on palette offset
f.classList.add('fade'); f.classList.add('fade');
}
}, 255); // wait with hiding }, 255); // wait with hiding
} }
} }
@ -2911,7 +2923,7 @@ function filterFx() {
gId("fxlist").querySelectorAll('.lstI').forEach((listItem,i) => { gId("fxlist").querySelectorAll('.lstI').forEach((listItem,i) => {
const listItemName = listItem.querySelector('.lstIname').innerText; const listItemName = listItem.querySelector('.lstIname').innerText;
let hide = false; let hide = false;
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { if (e.checked && !listItemName.includes(e.dataset.flt)) hide = true; }); gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { if (e.checked && !listItemName.includes(e.dataset.flt)) hide = i>0 /*true*/; });
listItem.style.display = hide ? 'none' : ''; listItem.style.display = hide ? 'none' : '';
}); });
} }