Filter dropdown.
This commit is contained in:
parent
db881ee011
commit
d116424241
@ -463,6 +463,11 @@ button {
|
||||
.filter {
|
||||
z-index: 1;
|
||||
/*overflow: visible;*/
|
||||
border-radius: 0 0 16px 16px;
|
||||
max-width: 220px;
|
||||
height: 54px;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* New tooltip */
|
||||
@ -1231,6 +1236,10 @@ TD .checkmark, TD .radiomark {
|
||||
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.filter .fchkl {
|
||||
margin: 0 4px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.lbl-l {
|
||||
font-size: 13px;
|
||||
|
@ -198,9 +198,35 @@
|
||||
<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.add('fade');" onblur="gId('filters').classList.remove('fade')"/>
|
||||
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist');gId('filters').classList.remove('fade');" onblur="filterFocus(event);" />
|
||||
<i class="icons clear-icon" onclick="clean(this);"></i>
|
||||
<i class="icons search-icon" onclick="gId('filters').classList.toggle('hide');" style="cursor:pointer;"></i>
|
||||
<i class="icons search-icon" x-onclick="gId('filters').classList.toggle('fade');" 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);">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filter0D" tooltip="Single pixel" class="check fchkl">•
|
||||
<input type="checkbox" data-flt="•" onchange="filterFx(this);">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filter1D" tooltip="1D" class="check fchkl">⋮
|
||||
<input type="checkbox" data-flt="⋮" onchange="filterFx(this);">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filter2D" tooltip="2D" class="check fchkl">▦
|
||||
<input type="checkbox" data-flt="▦" onchange="filterFx(this);">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filterVol" tooltip="Volume" class="check fchkl">♪
|
||||
<input type="checkbox" data-flt="♪" onchange="filterFx(this);">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filterFreq" tooltip="Frequency" class="check fchkl">♫
|
||||
<input type="checkbox" data-flt="♫" onchange="filterFx(this);">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fxlist" class="list">
|
||||
<div class="lstI">
|
||||
@ -215,32 +241,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="sliders">
|
||||
<div id="filters" class="filter">
|
||||
<label id="filterPal" tooltip="Uses palette" class="check fchkl">🎨
|
||||
<input type="checkbox" data-flt="🎨" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filter0D" tooltip="Single pixel" class="check fchkl hide">•
|
||||
<input type="checkbox" data-flt="•" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filter1D" tooltip="1D" class="check fchkl">⋮
|
||||
<input type="checkbox" data-flt="⋮" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filter2D" tooltip="2D" class="check fchkl">▦
|
||||
<input type="checkbox" data-flt="▦" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filterVol" tooltip="Volume" class="check fchkl">♪
|
||||
<input type="checkbox" data-flt="♪" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label id="filterFreq" tooltip="Frequency" class="check fchkl">♫
|
||||
<input type="checkbox" data-flt="♫" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="slider0" class="slider">
|
||||
<i class="icons slider-icon" onclick="tglFreeze()"></i>
|
||||
<div tooltip="Effect speed" class="sliderwrap il">
|
||||
|
@ -637,12 +637,12 @@ function parseInfo(i) {
|
||||
mh = i.leds.matrix ? i.leds.matrix.h : 0;
|
||||
isM = mw>0 && mh>0;
|
||||
if (!isM) {
|
||||
gId("filter0D").classList.remove('hide');
|
||||
gId("filter1D").classList.add('hide');
|
||||
//gId("filter0D").classList.remove('hide');
|
||||
//gId("filter1D").classList.add('hide');
|
||||
gId("filter2D").classList.add('hide');
|
||||
} else {
|
||||
gId("filter0D").classList.add('hide');
|
||||
gId("filter1D").classList.remove('hide');
|
||||
//gId("filter0D").classList.add('hide');
|
||||
//gId("filter1D").classList.remove('hide');
|
||||
gId("filter2D").classList.remove('hide');
|
||||
}
|
||||
// if (i.noaudio) {
|
||||
@ -2744,6 +2744,16 @@ function clean(c)
|
||||
}
|
||||
}
|
||||
|
||||
function filterFocus(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);
|
||||
}
|
||||
|
||||
function filterFx(o)
|
||||
{
|
||||
if (!o) return;
|
||||
@ -2933,11 +2943,9 @@ function mergeDeep(target, ...sources)
|
||||
function tooltip()
|
||||
{
|
||||
const elements = d.querySelectorAll("[tooltip]");
|
||||
|
||||
elements.forEach((element)=>{
|
||||
element.addEventListener("mouseover", ()=>{
|
||||
const tooltip = d.createElement("span");
|
||||
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.textContent = element.getAttribute("tooltip");
|
||||
|
||||
@ -2947,13 +2955,12 @@ function tooltip()
|
||||
|
||||
const { offsetHeight, offsetWidth } = tooltip;
|
||||
|
||||
const offset = element.classList.contains("sliderwrap") ? 6 : 12;
|
||||
const offset = element.classList.contains("sliderwrap") ? 6 : 10;
|
||||
top -= offsetHeight + offset;
|
||||
left += (width - offsetWidth) / 2;
|
||||
|
||||
tooltip.style.top = top + "px";
|
||||
tooltip.style.left = left + "px";
|
||||
|
||||
tooltip.classList.add("visible");
|
||||
});
|
||||
|
||||
|
4053
wled00/html_ui.h
4053
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
// version code in format yymmddb (b = daily build)
|
||||
#define VERSION 2310250
|
||||
#define VERSION 2310260
|
||||
|
||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||
//#define WLED_USE_MY_CONFIG
|
||||
|
Loading…
Reference in New Issue
Block a user