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

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)";
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.classList.add(error ? "error":"show");
clearTimeout(timeout);
@ -674,7 +674,7 @@ function populateSegments(s)
<div class="sliderdisplay"></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..."/>
<table class="infot segt">
<tr>
@ -700,16 +700,12 @@ function populateSegments(s)
</table>
<div class="h bp" id="seg${i}len"></div>
<label class="check revchkl">
<span class="lstIname">
Reverse direction
</span>
<input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}>
<span class="checkmark schk"></span>
</label>
<label class="check revchkl">
<span class="lstIname">
Mirror effect
</span>
<input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}>
<span class="checkmark schk"></span>
</label>
@ -733,6 +729,7 @@ function populateSegments(s)
updateLen(i);
updateTrail(gId(`seg${i}bri`));
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 (!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);
// 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] != "")) {
//label.style.display = "block";
if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) {
// embeded default values
var dPos = slOnOff[i].indexOf("=");
@ -1282,6 +1278,7 @@ function setSliderAndColorControl(idx, applyDef=false)
else if (i==1) label.innerHTML = "Effect intensity";
else label.innerHTML = "Custom" + (i-1);
//label.style.top = "auto";
label.style.display = "block";
slider.style.display = "block";
slider.style.top = topPosition + "px";
topPosition += 28; // increase top position for the next control
@ -1289,7 +1286,7 @@ function setSliderAndColorControl(idx, applyDef=false)
} else {
// disable label and slider
slider.style.display = "none";
//label.style.display = "none";
label.style.display = "none";
}
}
if (topPosition>0) topPosition += 2;
@ -1361,7 +1358,8 @@ function setSliderAndColorControl(idx, applyDef=false)
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 {
// 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";
// 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]);
@ -1531,8 +1529,8 @@ function makeSeg()
function resetUtil()
{
// 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;">'
+ '<label class="check schkl"><input type="checkbox" onchange="selSegAll(this)"><span class="checkmark schk"></span></label>'
gId('segutil').innerHTML = '<div class="seg btn btn-s" style="border-radius:24px;padding:0;">'
+ '<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>';
}
@ -1787,6 +1785,7 @@ function selSegAll(o)
function selSegEx(s)
{
gId(`selall`).checked = false;
var obj = {"seg":[]};
for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":(i==s)});
obj.mainseg = s;
@ -1795,6 +1794,7 @@ function selSegEx(s)
function selSeg(s)
{
gId(`selall`).checked = false;
var sel = gId(`seg${s}sel`).checked;
var obj = {"seg": {"id": s, "sel": sel}};
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)
#define VERSION 2203111
#define VERSION 2203121
//uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG