lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Filter dropdown.

Browse Source
This commit is contained in:
Blaz Kristan 2023-10-26 22:09:46 +02:00
parent db881ee011
commit d116424241
5 changed files with 2093 additions and 2068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
wled00/data/index.css
View File

@ -219,7 +219,7 @@ button {
.pop-c span { .pop-c span {
padding: 2px 6px; padding: 2px 6px;
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 8px; top: 8px;
@ -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 */
@ -479,7 +484,7 @@ button {
border-radius: 6px; border-radius: 6px;
z-index: 1; z-index: 1;
} }
.tooltip::after { .tooltip::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -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;

62
wled00/data/index.htm
View File

@ -182,7 +182,7 @@
</div> </div>
<div id="pallist" class="list"> <div id="pallist" class="list">
<div class="lstI"> <div class="lstI">
<label class="radio schkl" onclick="loadPalettes()"> <label class="radio schkl" onclick="loadPalettes()">
<div class="lstIcontent"> <div class="lstIcontent">
<span class="lstIname"> <span class="lstIname">
Loading... Loading...
@ -198,13 +198,39 @@
<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);">&#xe38f;</i> <i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<i class="icons search-icon" onclick="gId('filters').classList.toggle('hide');" style="cursor:pointer;">&#xe0a1;</i> <i class="icons search-icon" x-onclick="gId('filters').classList.toggle('fade');" style="cursor:pointer;">&#xe0a1;</i>
<div id="filters" class="filter fade">
<label id="filterPal" tooltip="Uses palette" class="check fchkl">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this);">
<span class="checkmark"></span>
</label>
<label id="filter0D" tooltip="Single pixel" class="check fchkl">&#8226;
<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this);">
<span class="checkmark"></span>
</label>
<label id="filter1D" tooltip="1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this);">
<span class="checkmark"></span>
</label>
<label id="filter2D" tooltip="2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this);">
<span class="checkmark"></span>
</label>
<label id="filterVol" tooltip="Volume" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this);">
<span class="checkmark"></span>
</label>
<label id="filterFreq" tooltip="Frequency" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" 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">
<label class="radio schkl" onclick="loadFX()"> <label class="radio schkl" onclick="loadFX()">
<div class="lstIcontent"> <div class="lstIcontent">
<span class="lstIname"> <span class="lstIname">
Loading... Loading...
@ -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">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
<span class="checkmark"></span>
</label>
<label id="filter0D" tooltip="Single pixel" class="check fchkl hide">&#8226;
<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this)">
<span class="checkmark"></span>
</label>
<label id="filter1D" tooltip="1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
<span class="checkmark"></span>
</label>
<label id="filter2D" tooltip="2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
<span class="checkmark"></span>
</label>
<label id="filterVol" tooltip="Volume" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)">
<span class="checkmark"></span>
</label>
<label id="filterFreq" tooltip="Frequency" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" 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()">&#xe325;</i> <i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i>
<div tooltip="Effect speed" class="sliderwrap il"> <div tooltip="Effect speed" class="sliderwrap il">
@ -360,7 +360,7 @@
<div id="kn">Loading...</div> <div id="kn">Loading...</div>
<div style="position:sticky;bottom:0;"> <div style="position:sticky;bottom:0;">
<button class="btn infobtn" onclick="loadNodes()">Refresh</button> <button class="btn infobtn" onclick="loadNodes()">Refresh</button>
</div> </div>
</div> </div>
<div id="mlv2D" class="modal"> <div id="mlv2D" class="modal">

31
wled00/data/index.js
View File

@ -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,30 +2943,27 @@ 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");
let { top, left, width } = element.getBoundingClientRect(); let { top, left, width } = element.getBoundingClientRect();
d.body.appendChild(tooltip); d.body.appendChild(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");
}); });
element.addEventListener("mouseout", ()=>{ element.addEventListener("mouseout", ()=>{
const tooltip = d.querySelector('.tooltip'); const tooltip = d.querySelector('.tooltip');
tooltip.classList.remove("visible"); tooltip.classList.remove("visible");

4053
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

@ -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