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

Select/unselect all segments chekmark.

Browse Source 
CSS fixes.
This commit is contained in:
Blaz Kristan 2022-03-12 18:03:00 +01:00
parent b3d691fff6
commit 28b78c2b27
5 changed files with 1395 additions and 1381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
wled00/data/index.css
View File

@ -365,7 +365,7 @@ button {
} }
.staybot { .staybot {
bottom: 0; bottom: 5px;
} }
#slider0, #slider1, #slider2, #slider3, #slider4 { #slider0, #slider1, #slider2, #slider3, #slider4 {
@ -779,7 +779,8 @@ option {
background-color: var(--c-3); background-color: var(--c-3);
color: var(--c-f); color: var(--c-f);
} }
input[type=number], input[type=text] { input[type=number],
input[type=text] {
background: var(--c-3); background: var(--c-3);
color: var(--c-f); color: var(--c-f);
border: 0px solid var(--c-2); border: 0px solid var(--c-2);
@ -799,6 +800,28 @@ input[type=number] {
width: 50px; width: 50px;
} }
input[type=text] {
text-align: center;
}
input[type=number]:focus,
input[type=text]:focus {
background: var(--c-6);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
#hexw input[type=text] {
width: 6em;
}
input[type=text].ptxt {
width: calc(100% - 24px);
}
textarea { textarea {
background: var(--c-2); background: var(--c-2);
color: var(--c-f); color: var(--c-f);
@ -820,11 +843,6 @@ textarea {
background: var(--c-b); background: var(--c-b);
} }
input[type=text] {
width: calc(100% - 24px);
text-align: center;
}
.ptxt { .ptxt {
/*width: 236px !important;*/ /*width: 236px !important;*/
margin: 0 4px 4px !important; margin: 0 4px 4px !important;
@ -834,14 +852,6 @@ input[type=text] {
width: 50px !important; width: 50px !important;
} }
input[type=number]:focus, input[type=text]:focus {
background: var(--c-6);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.segname, .pname { .segname, .pname {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -849,10 +859,11 @@ input[type=number]::-webkit-outer-spin-button {
overflow: hidden; overflow: hidden;
text-overflow: clip; text-overflow: clip;
line-height: 24px; line-height: 24px;
padding: 8px 0;
} }
.segpwr { .segpwr {
padding: 4px 0 0 8px; padding: 4px 0 4px 8px;
} }
.pname { .pname {
top: 1px; top: 1px;
@ -906,7 +917,7 @@ input[type=number]::-webkit-outer-spin-button {
.pwr { .pwr {
color: var(--c-6); color: var(--c-6);
transform: translate(2px, 3px); transform: translate(2px, 2px);
cursor: pointer; cursor: pointer;
} }
@ -924,16 +935,16 @@ input[type=number]::-webkit-outer-spin-button {
.check, .radio { .check, .radio {
display: block; display: block;
position: relative; position: relative;
padding-bottom: 32px; /*padding-bottom: 32px;*/
margin-bottom: 14px; /*margin-bottom: 14px;*/
cursor: pointer; cursor: pointer;
} }
/*
.schkl { .schkl {
padding: 2px 0 0; padding: 2px 0 0;
margin: 0; margin: 0;
} }
*/
.revchkl { .revchkl {
padding: 4px 0px 0px 35px; padding: 4px 0px 0px 35px;
margin-bottom: 0px; margin-bottom: 0px;
@ -960,7 +971,8 @@ input[type=number]::-webkit-outer-spin-button {
} }
.radiomark { .radiomark {
top: 1px; top: 8px;
left: 8px;
height: 22px; height: 22px;
width: 22px; width: 22px;
border-radius: 50%; border-radius: 50%;
@ -1017,7 +1029,7 @@ input[type=number]::-webkit-outer-spin-button {
.seg, .pres { .seg, .pres {
position: relative; position: relative;
display: block; display: block;
padding: 8px 0; /*padding: 8px 0;*/
margin: 0 0 10px; margin: 0 0 10px;
background-color: var(--c-2); background-color: var(--c-2);
color: var(--c-f); color: var(--c-f);
@ -1030,6 +1042,7 @@ input[type=number]::-webkit-outer-spin-button {
.seg { .seg {
border-radius: 16px; border-radius: 16px;
padding-bottom: 4px;
} }
.pres { .pres {
border-radius: 24px; border-radius: 24px;
@ -1059,14 +1072,14 @@ input[type=number]::-webkit-outer-spin-button {
/* list item */ /* list item */
.lstI { .lstI {
align-items: center; align-items: center;
padding: 8px 10px; /*padding: 8px 10px;*/
cursor: pointer; cursor: pointer;
background-color: var(--c-2); background-color: var(--c-2);
overflow: hidden; overflow: hidden;
position: sticky; position: sticky;
border-radius: 24px; border-radius: 24px;
margin: 10px auto 0; margin: 10px auto 0;
min-height: 24px; min-height: 40px;
} }
/* selected item/element */ /* selected item/element */
@ -1089,15 +1102,16 @@ input[type=number]::-webkit-outer-spin-button {
/* selected list item */ /* selected list item */
.lstI.selected { .lstI.selected {
top: 0; top: 0;
bottom: 0; bottom: 5px;
} }
.lstI.sticky, .lstI.selected { .lstI.sticky,
.lstI.selected {
z-index: 1; z-index: 1;
} }
#pcont .selected { #pcont .selected {
bottom: 42px; bottom: 52px;
top: 40px; top: 40px;
} }
/* calculated in index.js /* calculated in index.js
@ -1119,7 +1133,7 @@ input[type=number]::-webkit-outer-spin-button {
/* list item content */ /* list item content */
.lstIcontent { .lstIcontent {
padding: 0; padding: 8px 0;
position: relative; position: relative;
} }
@ -1164,21 +1178,19 @@ input[type="text"].fnd:hover {
background-color: var(--c-3); background-color: var(--c-3);
} }
/* segment inner (expanded) content */ /* segment & preset inner/expanded content */
.segin { .segin,
padding: 8px 8px 0;
}
/* preset inner/expanded content */
.presin { .presin {
padding: 8px 0 0; padding: 8px;
} }
.btn-s, .btn-n { .btn-s,
.btn-n {
border: 1px solid var(--c-2); border: 1px solid var(--c-2);
background-color: var(--c-2); background-color: var(--c-2);
} }
.modal .btn:hover, .segin .btn:hover { .modal .btn:hover,
.segin .btn:hover {
border: 1px solid var(--c-5); border: 1px solid var(--c-5);
background-color: var(--c-5); background-color: var(--c-5);
} }
@ -1188,7 +1200,8 @@ input[type="text"].fnd:hover {
display: none; display: none;
} }
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after, .check input:checked ~ .checkmark:after,
.radio input:checked ~ .radiomark:after,
.expanded { .expanded {
display: block !important; display: block !important;
} }

4
wled00/data/index.htm
View File

@ -155,13 +155,13 @@
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);">2</button> <button id="csl1" class="btn xxs cl" onclick="selectSlot(1);">2</button>
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);">3</button> <button id="csl2" class="btn xxs cl" onclick="selectSlot(2);">3</button>
</div> </div>
<p class="labels hd h" id="cslLabel"></p> <p class="labels h" id="cslLabel"></p>
<div id="hexw"> <div id="hexw">
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" /> <input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button> <button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
</div> </div>
<div id="palw" class="il">
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p> <p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il">
<div class="staytop fnd"> <div class="staytop fnd">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" />
<i class="icons clear-icon" onclick="clean(this)">&#xe38f;</i> <i class="icons clear-icon" onclick="clean(this)">&#xe38f;</i>

22
wled00/data/index.js
View File

@ -294,7 +294,7 @@ function showToast(text, error = false)
{ {
if (error) gId('connind').style.backgroundColor = "var(--c-r)"; if (error) gId('connind').style.backgroundColor = "var(--c-r)";
var x = gId("toast"); var x = gId("toast");
if (error) text += '<i class="icons btn-icon" style="transform:rotate(45deg);position:absolute;top:10px;right:0px;" onclick="clearErrorToast(100);">&#xe18a;</i>'; //if (error) text += '<i class="icons btn-icon" style="transform:rotate(45deg);position:absolute;top:10px;right:0px;" onclick="clearErrorToast(100);">&#xe18a;</i>';
x.innerHTML = text; x.innerHTML = text;
x.classList.add(error ? "error":"show"); x.classList.add(error ? "error":"show");
clearTimeout(timeout); clearTimeout(timeout);
@ -674,7 +674,7 @@ function populateSegments(s)
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div class="segin" id="seg${i}in"> <div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}in">
<input type="text" class="ptxt noslide" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/> <input type="text" class="ptxt noslide" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/>
<table class="infot segt"> <table class="infot segt">
<tr> <tr>
@ -700,16 +700,12 @@ function populateSegments(s)
</table> </table>
<div class="h bp" id="seg${i}len"></div> <div class="h bp" id="seg${i}len"></div>
<label class="check revchkl"> <label class="check revchkl">
<span class="lstIname">
Reverse direction Reverse direction
</span>
<input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}> <input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<label class="check revchkl"> <label class="check revchkl">
<span class="lstIname">
Mirror effect Mirror effect
</span>
<input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}> <input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
@ -733,6 +729,7 @@ function populateSegments(s)
updateLen(i); updateLen(i);
updateTrail(gId(`seg${i}bri`)); updateTrail(gId(`seg${i}bri`));
gId(`segr${i}`).style.display = "none"; gId(`segr${i}`).style.display = "none";
if (!gId(`seg${i}sel`).checked) gId(`selall`).checked = false;
} }
if (segCount < 2) gId(`segd${lSeg}`).style.display = "none"; if (segCount < 2) gId(`segd${lSeg}`).style.display = "none";
if (!noNewSegs && (cfg.comp.seglen?parseInt(gId(`seg${lSeg}s`).value):0)+parseInt(gId(`seg${lSeg}e`).value)<ledCount) gId(`segr${lSeg}`).style.display = "inline"; if (!noNewSegs && (cfg.comp.seglen?parseInt(gId(`seg${lSeg}s`).value):0)+parseInt(gId(`seg${lSeg}e`).value)<ledCount) gId(`segr${lSeg}`).style.display = "inline";
@ -1267,7 +1264,6 @@ function setSliderAndColorControl(idx, applyDef=false)
var label = gId("sliderLabel" + i); var label = gId("sliderLabel" + i);
// if (not controlDefined and for AC speed or intensity and for SR alle sliders) or slider has a value // if (not controlDefined and for AC speed or intensity and for SR alle sliders) or slider has a value
if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) { if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) {
//label.style.display = "block";
if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) { if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) {
// embeded default values // embeded default values
var dPos = slOnOff[i].indexOf("="); var dPos = slOnOff[i].indexOf("=");
@ -1282,6 +1278,7 @@ function setSliderAndColorControl(idx, applyDef=false)
else if (i==1) label.innerHTML = "Effect intensity"; else if (i==1) label.innerHTML = "Effect intensity";
else label.innerHTML = "Custom" + (i-1); else label.innerHTML = "Custom" + (i-1);
//label.style.top = "auto"; //label.style.top = "auto";
label.style.display = "block";
slider.style.display = "block"; slider.style.display = "block";
slider.style.top = topPosition + "px"; slider.style.top = topPosition + "px";
topPosition += 28; // increase top position for the next control topPosition += 28; // increase top position for the next control
@ -1289,7 +1286,7 @@ function setSliderAndColorControl(idx, applyDef=false)
} else { } else {
// disable label and slider // disable label and slider
slider.style.display = "none"; slider.style.display = "none";
//label.style.display = "none"; label.style.display = "none";
} }
} }
if (topPosition>0) topPosition += 2; if (topPosition>0) topPosition += 2;
@ -1361,7 +1358,8 @@ function setSliderAndColorControl(idx, applyDef=false)
if (paOnOff.length>0 && paOnOff[0] != "!") pall.innerHTML = paOnOff[0]; if (paOnOff.length>0 && paOnOff[0] != "!") pall.innerHTML = paOnOff[0];
else pall.innerHTML = '<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette'; else pall.innerHTML = '<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette';
} else { } else {
// disable label and slider // disable palett list
pall.innerHTML = '<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette not used';
palw.style.display = "none"; palw.style.display = "none";
// if numeric set as selected palette // if numeric set as selected palette
if (paOnOff.length>0 && paOnOff[0]!="" && !isNaN(paOnOff[0]) && parseInt(paOnOff[0])!=selectedPal) obj.seg.pal = parseInt(paOnOff[0]); if (paOnOff.length>0 && paOnOff[0]!="" && !isNaN(paOnOff[0]) && parseInt(paOnOff[0])!=selectedPal) obj.seg.pal = parseInt(paOnOff[0]);
@ -1531,8 +1529,8 @@ function makeSeg()
function resetUtil() function resetUtil()
{ {
// gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</button>'; // gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</button>';
gId('segutil').innerHTML = '<div class="seg btn btn-s" style="border-radius:24px;">' gId('segutil').innerHTML = '<div class="seg btn btn-s" style="border-radius:24px;padding:0;">'
+ '<label class="check schkl"><input type="checkbox" onchange="selSegAll(this)"><span class="checkmark schk"></span></label>' + '<label class="check schkl"><input type="checkbox" id="selall" onchange="selSegAll(this)"><span class="checkmark schk"></span></label>'
+ '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</div></div>'; + '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</div></div>';
} }
@ -1787,6 +1785,7 @@ function selSegAll(o)
function selSegEx(s) function selSegEx(s)
{ {
gId(`selall`).checked = false;
var obj = {"seg":[]}; var obj = {"seg":[]};
for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":(i==s)}); for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":(i==s)});
obj.mainseg = s; obj.mainseg = s;
@ -1795,6 +1794,7 @@ function selSegEx(s)
function selSeg(s) function selSeg(s)
{ {
gId(`selall`).checked = false;
var sel = gId(`seg${s}sel`).checked; var sel = gId(`seg${s}sel`).checked;
var obj = {"seg": {"id": s, "sel": sel}}; var obj = {"seg": {"id": s, "sel": sel}};
requestJson(obj); requestJson(obj);

2657
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 2203111 #define VERSION 2203121
//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