Select/deselect all segments.
CSS optimisations & fixes.
This commit is contained in:
parent
8e5f2d91e8
commit
b3d691fff6
3
.gitignore
vendored
3
.gitignore
vendored
@ -16,4 +16,5 @@ node_modules
|
||||
.direnv
|
||||
wled-update.sh
|
||||
esp01-update.sh
|
||||
/wled00/LittleFS
|
||||
/wled00/LittleFS
|
||||
replace_fs.py
|
@ -148,12 +148,7 @@ button {
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/*
|
||||
.segt TD.h, .plentry TD.h {
|
||||
font-size: 13px;
|
||||
padding: 2px 0 0;
|
||||
}
|
||||
*/
|
||||
|
||||
.keytd {
|
||||
text-align: left;
|
||||
}
|
||||
@ -312,27 +307,30 @@ button {
|
||||
|
||||
#segutil, #segutil2, #segcont, #putil, #pcont, #pql {
|
||||
width: 280px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
#segutil, #segcont, #pcont, #pql {
|
||||
margin: 10px auto 0;
|
||||
}
|
||||
|
||||
#segutil2 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#segutil .seg {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#pcont {
|
||||
#segcont, #pcont {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#putil {
|
||||
padding: 0 0 10px;
|
||||
/*padding: 0 0 10px;*/
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#putil .btn-n, #putil .btn-s {
|
||||
/*box-shadow: 0 0 0 5px var(--c-1);*/
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }
|
||||
|
||||
.tab-label {
|
||||
@ -362,7 +360,7 @@ button {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
margin: 0 auto auto;
|
||||
}
|
||||
|
||||
@ -438,11 +436,11 @@ button {
|
||||
}
|
||||
|
||||
#info, #nodes {
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#rover {
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#ndlt {
|
||||
@ -473,7 +471,6 @@ button {
|
||||
}
|
||||
|
||||
#kv, #kn {
|
||||
/*max-width: 490px;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -529,10 +526,6 @@ img {
|
||||
position: absolute;
|
||||
top: 13px; left: 8px; right: 8px;
|
||||
height: 4px;
|
||||
/*
|
||||
top: 12.5px; bottom: 12.5px;
|
||||
left: 13px; right: 13px;
|
||||
*/
|
||||
background: var(--c-4);
|
||||
border-radius: 16px;
|
||||
pointer-events: none;
|
||||
@ -656,6 +649,7 @@ input[type=range]::-moz-range-thumb {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
.btn {
|
||||
padding: 8px;
|
||||
margin: 10px 4px;
|
||||
@ -675,8 +669,8 @@ input[type=range]::-moz-range-thumb {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
.btn:hover {
|
||||
border: 1px solid var(--c-5);
|
||||
background-color: var(--c-5);
|
||||
border: 1px solid var(--c-5) !important;
|
||||
background-color: var(--c-5) !important;
|
||||
}
|
||||
.btn-s {
|
||||
width: 100%;
|
||||
@ -706,6 +700,15 @@ input[type=range]::-moz-range-thumb {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#putil .btn-s {
|
||||
width: 135px;
|
||||
}
|
||||
|
||||
#segutil .btn-s, #segutil2 .btn-s, #putil .btn-s {
|
||||
background-color: var(--c-3);
|
||||
border: 1px solid var(--c-3);
|
||||
}
|
||||
|
||||
.btn-pl-del, .btn-pl-add {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
@ -858,11 +861,11 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
top:0;
|
||||
}
|
||||
|
||||
/* preset id number */
|
||||
.pid {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
/*padding: 10px 0 0 12px;*/
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: var(--c-b);
|
||||
@ -917,6 +920,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
/* radiobuttons and checkmarks */
|
||||
.check, .radio {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -1009,10 +1013,11 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* segment & preset wrapper */
|
||||
.seg, .pres {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
padding: 8px 0;
|
||||
margin: 0 0 10px;
|
||||
background-color: var(--c-2);
|
||||
color: var(--c-f);
|
||||
@ -1037,10 +1042,11 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.seg .schkl {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
top: 7px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
/* list wrapper */
|
||||
.list {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
@ -1050,8 +1056,8 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* list item */
|
||||
.lstI {
|
||||
/*display: flex;*/
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
@ -1063,6 +1069,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/* selected item/element */
|
||||
.selected { /* has to be after .lstI */
|
||||
background: var(--c-4);
|
||||
}
|
||||
@ -1079,6 +1086,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
/* selected list item */
|
||||
.lstI.selected {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -1089,42 +1097,38 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
#pcont .selected {
|
||||
bottom: 114px;
|
||||
bottom: 42px;
|
||||
top: 40px;
|
||||
}
|
||||
/* calculated in index.js
|
||||
#fxlist .lstI.selected {
|
||||
top: 142px;
|
||||
top: 142px !important;
|
||||
}
|
||||
*/
|
||||
#pallist .lstI.selected {
|
||||
top: 82px;
|
||||
}
|
||||
/* must be after .selected */
|
||||
/* calculated in index.js
|
||||
#fxlist .lstI.sticky {
|
||||
top: 99px;
|
||||
top: 99px !important;
|
||||
}
|
||||
*/
|
||||
#pallist .lstI.sticky {
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
/* list item content */
|
||||
.lstIcontent {
|
||||
/*width: 100%;
|
||||
vertical-align: middle;*/
|
||||
padding: 0; /*20px 0 5px;
|
||||
text-align: left;
|
||||
display: inline-block;*/
|
||||
padding: 0;
|
||||
position: relative;
|
||||
/*left: 40px;*/
|
||||
}
|
||||
|
||||
/* list item name (for sorting) */
|
||||
.lstIname {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* palette preview */
|
||||
/* list item palette preview */
|
||||
.lstIprev {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
@ -1134,11 +1138,10 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* find/search element */
|
||||
.fnd {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
/*border-radius: 25px;
|
||||
box-shadow: 0 0 0 5px var(--c-1);*/
|
||||
}
|
||||
|
||||
input[type="text"].fnd {
|
||||
@ -1161,9 +1164,12 @@ input[type="text"].fnd:hover {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
/* segment inner (expanded) content */
|
||||
.segin {
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
|
||||
/* preset inner/expanded content */
|
||||
.presin {
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
@ -1177,7 +1183,7 @@ input[type="text"].fnd:hover {
|
||||
background-color: var(--c-5);
|
||||
}
|
||||
|
||||
/* must be after .expanded */
|
||||
/* hidden list items, must be after .expanded */
|
||||
.pres .lstIcontent, .segin {
|
||||
display: none;
|
||||
}
|
||||
|
@ -182,8 +182,8 @@
|
||||
</div>
|
||||
|
||||
<div id="Effects" class="tabcontent">
|
||||
<div id="sliders">
|
||||
<p class="labels" id="sliderLabel0">Effect speed</p>
|
||||
<span id="sliders">
|
||||
<p class="labels hd" id="sliderLabel0">Effect speed</p>
|
||||
<div class="staytop" id="slider0">
|
||||
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()"></i>
|
||||
<div class="sliderwrap il">
|
||||
@ -192,7 +192,7 @@
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
<p class="labels" id="sliderLabel1">Effect intensity</p>
|
||||
<p class="labels hd" id="sliderLabel1">Effect intensity</p>
|
||||
<div class="staytop" id="slider1">
|
||||
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()"></i>
|
||||
<div class="sliderwrap il">
|
||||
@ -201,7 +201,7 @@
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
<p class="labels" id="sliderLabel2">Custom 1</p>
|
||||
<p class="labels hd" id="sliderLabel2">Custom 1</p>
|
||||
<div class="staytop" id="slider2">
|
||||
<i class="icons slider-icon"></i>
|
||||
<div class="sliderwrap il">
|
||||
@ -210,7 +210,7 @@
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
<p class="labels" id="sliderLabel3">Custom 2</p>
|
||||
<p class="labels hd" id="sliderLabel3">Custom 2</p>
|
||||
<div class="staytop" id="slider3">
|
||||
<i class="icons slider-icon"></i>
|
||||
<div class="sliderwrap il">
|
||||
@ -219,7 +219,7 @@
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
<p class="labels" id="sliderLabel4">Custom 3</p>
|
||||
<p class="labels hd" id="sliderLabel4">Custom 3</p>
|
||||
<div class="staytop" id="slider4">
|
||||
<i class="icons slider-icon"></i>
|
||||
<div class="sliderwrap il">
|
||||
@ -228,7 +228,7 @@
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div class="il">
|
||||
<p class="labels hd" id="modeLabel">Effect mode</p>
|
||||
<div class="staytop fnd" id="fxFind">
|
||||
@ -295,17 +295,12 @@
|
||||
</div><br>
|
||||
<div id="kv">Loading...</div><br>
|
||||
<div>
|
||||
<!--table>
|
||||
<tr>
|
||||
<td class="keytd"--><button class="btn" onclick="requestJson()">Refresh</button><!--/td>
|
||||
<td class="valtd"--><button class="btn" onclick="toggleInfo()">Close Info</button><!--/td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="keytd"--><button class="btn" onclick="toggleNodes()">Instance List</button><!--/td>
|
||||
<td class="valtd"--><button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><!--/td>
|
||||
</tr>
|
||||
</table-->
|
||||
</div><br>
|
||||
<button class="btn" onclick="requestJson()">Refresh</button>
|
||||
<button class="btn" onclick="toggleInfo()">Close Info</button>
|
||||
<button class="btn" onclick="toggleNodes()">Instance List</button>
|
||||
<button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button>
|
||||
</div>
|
||||
<br>
|
||||
<span class="h">Made with <span id="heart">❤︎</span> by Aircoookie and the <a href="https://wled.discourse.group/" target="_blank">WLED community</a></span>
|
||||
</div>
|
||||
|
||||
@ -313,13 +308,10 @@
|
||||
<div id="ndlt">WLED instances</div>
|
||||
<div id="kn">Loading...</div><br>
|
||||
<div>
|
||||
<!--table>
|
||||
<tr>
|
||||
<td class="keytd"--><button class="btn infobtn" onclick="loadNodes()">Refresh</button><!--/td>
|
||||
<td class="valtd"--><button class="btn infobtn" onclick="toggleNodes()">Close list</button><!--/td>
|
||||
</tr>
|
||||
</table-->
|
||||
</div><br>
|
||||
<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
|
||||
<button class="btn infobtn" onclick="toggleNodes()">Close list</button>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="rover" class="modal">
|
||||
|
@ -89,8 +89,8 @@ function applyCfg()
|
||||
var l = cfg.comp.labels;
|
||||
var e = d.querySelectorAll('.tab-label');
|
||||
for (let i of e) i.style.display = l ? "block":"none";
|
||||
e = d.querySelector('.hd');
|
||||
e.style.display = l ? "block":"none";
|
||||
//e = d.querySelector('.hd');
|
||||
//e.style.display = l ? "block":"none";
|
||||
sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
|
||||
sCol('--bbp',l ? "9px 0 7px 0":"10px 0 4px 0");
|
||||
sCol('--bhd',l ? "block":"none");
|
||||
@ -1267,7 +1267,7 @@ 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";
|
||||
//label.style.display = "block";
|
||||
if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) {
|
||||
// embeded default values
|
||||
var dPos = slOnOff[i].indexOf("=");
|
||||
@ -1281,7 +1281,7 @@ function setSliderAndColorControl(idx, applyDef=false)
|
||||
else if (i==0) label.innerHTML = "Effect speed";
|
||||
else if (i==1) label.innerHTML = "Effect intensity";
|
||||
else label.innerHTML = "Custom" + (i-1);
|
||||
label.style.top = "auto";
|
||||
//label.style.top = "auto";
|
||||
slider.style.display = "block";
|
||||
slider.style.top = topPosition + "px";
|
||||
topPosition += 28; // increase top position for the next control
|
||||
@ -1289,7 +1289,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;
|
||||
@ -1530,7 +1530,10 @@ function makeSeg()
|
||||
|
||||
function resetUtil()
|
||||
{
|
||||
gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon"></i>Add segment</button>';
|
||||
// gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon"></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>'
|
||||
+ '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon"></i>segment</div></div>';
|
||||
}
|
||||
|
||||
var plJson = {"0":{
|
||||
@ -1701,7 +1704,14 @@ ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
|
||||
|
||||
function makePUtil()
|
||||
{
|
||||
gId('putil').innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
|
||||
let p = gId('putil');
|
||||
p.classList.remove('staybot');
|
||||
p.innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
|
||||
p.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
gId('psFind').classList.remove('staytop');
|
||||
}
|
||||
|
||||
function makePlEntry(p,i) {
|
||||
@ -1736,14 +1746,23 @@ function makePlUtil()
|
||||
showToast("You need at least 2 presets to make a playlist!"); //return;
|
||||
}
|
||||
if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr;
|
||||
gId('putil').innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`;
|
||||
let p = gId('putil');
|
||||
p.classList.remove('staybot');
|
||||
p.innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`;
|
||||
refreshPlE(0);
|
||||
p.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
gId('psFind').classList.remove('staytop');
|
||||
}
|
||||
|
||||
function resetPUtil()
|
||||
{
|
||||
gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()"><i class="icons btn-icon"></i>New preset</button><br>`+
|
||||
`<button class="btn btn-s" onclick="makePlUtil()"><i class="icons btn-icon"></i>New playlist</button>`;
|
||||
gId('psFind').classList.add('staytop');
|
||||
gId('putil').classList.add('staybot');
|
||||
gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon"></i>preset</button>`
|
||||
+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon"><!----></i>playlist</button>`;
|
||||
}
|
||||
|
||||
function tglCs(i)
|
||||
@ -1758,6 +1777,14 @@ function tglSegn(s)
|
||||
d.gId(`seg${s}t`).style.display = (window.getComputedStyle(d.gId(`seg${s}t`)).display === "none") ? "inline":"none";
|
||||
}
|
||||
|
||||
function selSegAll(o)
|
||||
{
|
||||
//o.checked = true;
|
||||
var obj = {"seg":[]};
|
||||
for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":o.checked});
|
||||
requestJson(obj);
|
||||
}
|
||||
|
||||
function selSegEx(s)
|
||||
{
|
||||
var obj = {"seg":[]};
|
||||
|
3329
wled00/html_ui.h
3329
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 2203101
|
||||
#define VERSION 2203111
|
||||
|
||||
//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