Fix sticky top.
This commit is contained in:
parent
d116424241
commit
341a4a0d60
@ -34,6 +34,7 @@
|
||||
--bhd: none;
|
||||
--sgp: "block";
|
||||
--bmt: 0;
|
||||
--sti: 42px;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -457,7 +458,7 @@ button {
|
||||
padding: 4px 2px;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transition: opacity .5s linear, height .5s, transform .5s;
|
||||
transition: opacity .5s linear, height .25s, transform .25s;
|
||||
}
|
||||
|
||||
.filter {
|
||||
@ -475,7 +476,7 @@ button {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity .4s ease, visibility .4s ease;
|
||||
transition: opacity .25s ease, visibility .25s ease;
|
||||
background-color: var(--c-5);
|
||||
box-shadow: 4px 4px 10px 4px var(--c-1);
|
||||
color: var(--c-f);
|
||||
@ -1316,20 +1317,14 @@ TD .checkmark, TD .radiomark {
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
#fxlist .lstI.selected {
|
||||
top: 84px;
|
||||
}
|
||||
|
||||
#fxlist .lstI.sticky {
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
#fxlist .lstI.selected,
|
||||
#pallist .lstI.selected {
|
||||
top: 84px;
|
||||
top: calc(var(--sti) + 42px);
|
||||
}
|
||||
|
||||
#fxlist .lstI.sticky,
|
||||
#pallist .lstI.sticky {
|
||||
top: 42px;
|
||||
top: var(--sti);
|
||||
}
|
||||
|
||||
/* list item content */
|
||||
|
@ -198,9 +198,9 @@
|
||||
<div id="fx">
|
||||
<p class="labels hd" id="modeLabel">Effect mode</p>
|
||||
<div class="staytop fnd" id="fxFind">
|
||||
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist');gId('filters').classList.remove('fade');" onblur="filterFocus(event);" />
|
||||
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="filterFocus(event);search(this,'fxlist');" onblur="filterFocus(event);" />
|
||||
<i class="icons clear-icon" onclick="clean(this);"></i>
|
||||
<i class="icons search-icon" x-onclick="gId('filters').classList.toggle('fade');" style="cursor:pointer;"></i>
|
||||
<i class="icons search-icon" style="cursor:pointer;"></i>
|
||||
<div id="filters" class="filter fade">
|
||||
<label id="filterPal" tooltip="Uses palette" class="check fchkl">🎨
|
||||
<input type="checkbox" data-flt="🎨" onchange="filterFx(this);">
|
||||
|
@ -2746,12 +2746,23 @@ function clean(c)
|
||||
|
||||
function filterFocus(e)
|
||||
{
|
||||
//console.log(e);
|
||||
let t = e.explicitOriginalTarget;
|
||||
do {
|
||||
if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus()},150); return; }
|
||||
t = t.parentElement;
|
||||
} while (t.tagName !== "BODY");
|
||||
setTimeout(()=>{gId('filters').classList.toggle('fade')},150);
|
||||
let f = gId("filters");
|
||||
if (e.type === "focus") f.classList.remove('fade'); // immediately show (still has transition)
|
||||
// compute sticky top (with delay for transition)
|
||||
setTimeout(()=>{
|
||||
let sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight;
|
||||
console.log(sti);
|
||||
sCol('--sti', sti+"px");
|
||||
}, 252);
|
||||
if (e.type === "blur") {
|
||||
do {
|
||||
if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus();},150); return; }
|
||||
t = t.parentElement;
|
||||
} while (t.tagName !== "BODY");
|
||||
setTimeout(()=>{f.classList.add('fade');},255); // wait with hiding
|
||||
}
|
||||
}
|
||||
|
||||
function filterFx(o)
|
||||
|
4066
wled00/html_ui.h
4066
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user