Filter dropdown.
This commit is contained in:
parent
db881ee011
commit
d116424241
@ -463,6 +463,11 @@ button {
|
|||||||
.filter {
|
.filter {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
/*overflow: visible;*/
|
/*overflow: visible;*/
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
max-width: 220px;
|
||||||
|
height: 54px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* New tooltip */
|
/* New tooltip */
|
||||||
@ -1231,6 +1236,10 @@ TD .checkmark, TD .radiomark {
|
|||||||
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
|
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
}
|
}
|
||||||
|
.filter .fchkl {
|
||||||
|
margin: 0 4px;
|
||||||
|
min-width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.lbl-l {
|
.lbl-l {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -198,9 +198,35 @@
|
|||||||
<div id="fx">
|
<div id="fx">
|
||||||
<p class="labels hd" id="modeLabel">Effect mode</p>
|
<p class="labels hd" id="modeLabel">Effect mode</p>
|
||||||
<div class="staytop fnd" id="fxFind">
|
<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 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>
|
||||||
<div id="fxlist" class="list">
|
<div id="fxlist" class="list">
|
||||||
<div class="lstI">
|
<div class="lstI">
|
||||||
@ -215,32 +241,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="sliders">
|
<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">
|
<div id="slider0" class="slider">
|
||||||
<i class="icons slider-icon" onclick="tglFreeze()"></i>
|
<i class="icons slider-icon" onclick="tglFreeze()"></i>
|
||||||
<div tooltip="Effect speed" class="sliderwrap il">
|
<div tooltip="Effect speed" class="sliderwrap il">
|
||||||
|
@ -637,12 +637,12 @@ function parseInfo(i) {
|
|||||||
mh = i.leds.matrix ? i.leds.matrix.h : 0;
|
mh = i.leds.matrix ? i.leds.matrix.h : 0;
|
||||||
isM = mw>0 && mh>0;
|
isM = mw>0 && mh>0;
|
||||||
if (!isM) {
|
if (!isM) {
|
||||||
gId("filter0D").classList.remove('hide');
|
//gId("filter0D").classList.remove('hide');
|
||||||
gId("filter1D").classList.add('hide');
|
//gId("filter1D").classList.add('hide');
|
||||||
gId("filter2D").classList.add('hide');
|
gId("filter2D").classList.add('hide');
|
||||||
} else {
|
} else {
|
||||||
gId("filter0D").classList.add('hide');
|
//gId("filter0D").classList.add('hide');
|
||||||
gId("filter1D").classList.remove('hide');
|
//gId("filter1D").classList.remove('hide');
|
||||||
gId("filter2D").classList.remove('hide');
|
gId("filter2D").classList.remove('hide');
|
||||||
}
|
}
|
||||||
// if (i.noaudio) {
|
// 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)
|
function filterFx(o)
|
||||||
{
|
{
|
||||||
if (!o) return;
|
if (!o) return;
|
||||||
@ -2933,11 +2943,9 @@ function mergeDeep(target, ...sources)
|
|||||||
function tooltip()
|
function tooltip()
|
||||||
{
|
{
|
||||||
const elements = d.querySelectorAll("[tooltip]");
|
const elements = d.querySelectorAll("[tooltip]");
|
||||||
|
|
||||||
elements.forEach((element)=>{
|
elements.forEach((element)=>{
|
||||||
element.addEventListener("mouseover", ()=>{
|
element.addEventListener("mouseover", ()=>{
|
||||||
const tooltip = d.createElement("span");
|
const tooltip = d.createElement("span");
|
||||||
|
|
||||||
tooltip.className = "tooltip";
|
tooltip.className = "tooltip";
|
||||||
tooltip.textContent = element.getAttribute("tooltip");
|
tooltip.textContent = element.getAttribute("tooltip");
|
||||||
|
|
||||||
@ -2947,13 +2955,12 @@ function tooltip()
|
|||||||
|
|
||||||
const { offsetHeight, offsetWidth } = tooltip;
|
const { offsetHeight, offsetWidth } = tooltip;
|
||||||
|
|
||||||
const offset = element.classList.contains("sliderwrap") ? 6 : 12;
|
const offset = element.classList.contains("sliderwrap") ? 6 : 10;
|
||||||
top -= offsetHeight + offset;
|
top -= offsetHeight + offset;
|
||||||
left += (width - offsetWidth) / 2;
|
left += (width - offsetWidth) / 2;
|
||||||
|
|
||||||
tooltip.style.top = top + "px";
|
tooltip.style.top = top + "px";
|
||||||
tooltip.style.left = left + "px";
|
tooltip.style.left = left + "px";
|
||||||
|
|
||||||
tooltip.classList.add("visible");
|
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)
|
// 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
|
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||||
//#define WLED_USE_MY_CONFIG
|
//#define WLED_USE_MY_CONFIG
|
||||||
|
Loading…
Reference in New Issue
Block a user