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

UI tweaks & optimizations.

Browse Source
This commit is contained in:
Blaz Kristan 2022-03-26 23:22:18 +01:00
parent 81d880fb4e
commit ba6a01408d
4 changed files with 1473 additions and 1469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
wled00/data/index.css
View File

@ -180,29 +180,29 @@ button {
} }
.edit-icon { .edit-icon {
position: absolute; /*position: absolute;*/
right: -26px; /*right: -26px;*/
top: 10px; /*top: 10px;*/
display: none; display: none;
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 10px; top: 8px;
left: 13px; left: 12px;
pointer-events: none; pointer-events: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-top: -1px; /*margin-top: -1px;*/
} }
.clear-icon { .clear-icon {
position: absolute; position: absolute;
display: none; display: none;
top: 10px; top: 8px;
right: 13px; right: 9px;
cursor: pointer; cursor: pointer;
margin-top: -1px; /*margin-top: -1px;*/
} }
.flr { .flr {
@ -215,6 +215,7 @@ button {
padding: 8px; padding: 8px;
} }
.expanded .flr,
.exp { .exp {
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -311,24 +312,19 @@ button {
min-height: 42px; min-height: 42px;
} }
#segutil, #segcont, #pcont, #pql { #putil, #segutil, #segutil2 {
margin: 10px auto 0; margin: 13px auto 0;
} }
#segutil2 { #segutil .segin {
padding-top: 12px;
}
#pql, #segcont, #pcont {
margin: 0 auto; margin: 0 auto;
} }
#segutil .seg {
margin: 10px 0;
}
#segcont, #pcont {
margin-bottom: 10px;
}
#putil { #putil {
margin: 0 auto;
padding: 5px 0; padding: 5px 0;
} }
@ -737,7 +733,7 @@ input[type=range]::-moz-range-thumb {
width: 26px; width: 26px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
border: 1px solid var(--c-f); border: 1px solid #fff;
} }
/* Hex color input wrapper div */ /* Hex color input wrapper div */
@ -849,6 +845,7 @@ textarea {
.ptxt { .ptxt {
/*width: 236px !important;*/ /*width: 236px !important;*/
margin: 0 4px 4px !important; margin: 0 4px 4px !important;
display: none;
} }
.stxt { .stxt {
@ -912,7 +909,7 @@ textarea {
/*box-shadow: 0 0 0 5px #fff;*/ /*box-shadow: 0 0 0 5px #fff;*/
} }
.qcs, .xxs, #namelabel { .qcs, #namelabel {
text-shadow: -1px -1px 0 var(--c-4), 1px -1px 0 var(--c-4), -1px 1px 0 var(--c-4), 1px 1px 0 var(--c-4); text-shadow: -1px -1px 0 var(--c-4), 1px -1px 0 var(--c-4), -1px 1px 0 var(--c-4), 1px 1px 0 var(--c-4);
} }
@ -1027,27 +1024,28 @@ textarea {
/* segment & preset wrapper */ /* segment & preset wrapper */
.seg, .pres { .seg, .pres {
position: relative; /*position: relative;*/
display: block; /*display: block;*/
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);
border: 0px solid var(--c-f); border: 0px solid var(--c-f);
text-align: left; text-align: left;
transition: background-color 0.5s; transition: background-color 0.5s;
filter: brightness(1); /*filter: brightness(1);*/
font-size: 19px; font-size: 19px;
border-radius: 21px; /*border-radius: 21px;*/
min-height: 42px; /*min-height: 40px;*/
min-width: 280px;
} }
/*
.seg:last-child { .seg:last-child {
margin: 0; margin: 0;
} }
*/
.seg .schkl { .seg .schkl {
position: absolute; position: absolute;
top: 8px; top: 7px;
left: 9px; left: 9px;
} }
@ -1068,11 +1066,15 @@ textarea {
background-color: var(--c-2); background-color: var(--c-2);
overflow: hidden; overflow: hidden;
position: sticky; position: sticky;
border-radius: 24px; border-radius: 21px;
margin: 10px auto 0; margin: 13px auto 0;
min-height: 40px; min-height: 40px;
} }
#segutil .lstI {
margin-top: 0;
}
/* selected item/element */ /* selected item/element */
.selected { /* has to be after .lstI since !important is not ok */ .selected { /* has to be after .lstI since !important is not ok */
background: var(--c-4); background: var(--c-4);
@ -1101,8 +1103,8 @@ textarea {
z-index: 1; z-index: 1;
} }
#pcont .selected { #pcont .selected:not([class*="expanded"]) {
bottom: 52px; bottom: 60px;
top: 40px; top: 40px;
} }
/* calculated in index.js /* calculated in index.js
@ -1124,7 +1126,7 @@ textarea {
/* list item content */ /* list item content */
.lstIcontent { .lstIcontent {
padding: 8px 0; padding: 9px 0 7px;
position: relative; position: relative;
} }
@ -1153,10 +1155,10 @@ input[type="text"].fnd {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 40px 8px 52px; padding: 8px 40px 8px 44px;
margin: 5px auto 0; margin: 5px auto 0;
text-align: left; text-align: left;
border-radius: 25px; border-radius: 21px;
background: var(--c-2); background: var(--c-2);
} }
@ -1194,8 +1196,11 @@ input[type="text"].fnd:hover {
.check input:checked ~ .checkmark:after, .check input:checked ~ .checkmark:after,
.radio input:checked ~ .radiomark:after, .radio input:checked ~ .radiomark:after,
.show,
.expanded .edit-icon,
.expanded .segin, .expanded .presin, .expanded .sbs,
.expanded { .expanded {
display: block !important; display: inline-block !important;
} }
.c { .c {

4
wled00/data/index.htm
View File

@ -230,7 +230,7 @@
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
</span> </span>
<div class="il"> <div>
<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" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist')" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist')" />
@ -260,7 +260,7 @@
<div id="segutil2"> <div id="segutil2">
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button> <button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
</div> </div>
<p>Transition: <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s</p> <p>Transition: <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">&nbsp;s</p>
</div> </div>
<div id="Presets" class="tabcontent"> <div id="Presets" class="tabcontent">

86
wled00/data/index.js
View File

@ -3,8 +3,6 @@ var loc = false, locip;
var noNewSegs = false; var noNewSegs = false;
var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true; var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true;
var hasWhite = false, hasRGB = false, hasCCT = false; var hasWhite = false, hasRGB = false, hasCCT = false;
var expanded = [false];
var powered = [true];
var nlDur = 60, nlTar = 0; var nlDur = 60, nlTar = 0;
var nlMode = false; var nlMode = false;
var selectedFx = 0, prevFx = -1; var selectedFx = 0, prevFx = -1;
@ -564,8 +562,9 @@ function populatePresets(fromls)
cn += `<div class="pres lstI" id="p${i}o">`; cn += `<div class="pres lstI" id="p${i}o">`;
if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`; if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`;
cn += `<div class="pname lstIname" onclick="setPreset(${i})">${isPlaylist(i)?"<i class='icons btn-icon'>&#xe139;</i>":""}${pName(i)}</div> cn += `<div class="pname lstIname" onclick="setPreset(${i})">${isPlaylist(i)?"<i class='icons btn-icon'>&#xe139;</i>":""}${pName(i)}
<i class="icons e-icon flr ${expanded[i+100] ? "exp":""}" id="sege${i+100}" onclick="expand(${i+100})">&#xe395;</i> <i class="icons edit-icon" id="p${i}nedit" onclick="tglSegn(${i+100})">&#xe2c6;</i></div>
<i class="icons e-icon flr" id="sege${i+100}" onclick="expand(${i+100})">&#xe395;</i>
<div class="presin lstIcontent" id="seg${i+100}"></div> <div class="presin lstIcontent" id="seg${i+100}"></div>
</div>`; </div>`;
pNum++; pNum++;
@ -648,28 +647,31 @@ function populateSegments(s)
var inst = s.seg[y]; var inst = s.seg[y];
let i = parseInt(inst.id); let i = parseInt(inst.id);
powered[i] = inst.on;
if (i == lowestUnused) lowestUnused = i+1; if (i == lowestUnused) lowestUnused = i+1;
if (i > lSeg) lSeg = i; if (i > lSeg) lSeg = i;
let segp = `<div id="segp${i}" class="sbs ${expanded[i] ? "expanded":""}"> let sg = gId(`seg${i}`);
<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i> let exp = sg ? sg.classList.contains("expanded") : false;
let segp = `<div id="segp${i}" class="sbs">
<i class="icons e-icon pwr ${inst.on ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" /> <input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div>`; </div>`;
cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''} ${expanded[i] ? "expanded":""}" id="seg${i}"> cn += `<div class="seg lstI ${i==s.mainseg ? 'selected' : ''} ${exp ? "expanded":""}" id="seg${i}">
<label class="check schkl"> <label class="check schkl">
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}> <input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<div class="segname" onclick="selSegEx(${i})"> <div class="segname" onclick="selSegEx(${i})">
${inst.n ? inst.n : "Segment "+i} ${inst.n ? inst.n : "Segment "+i}
<i class="icons edit-icon" id="seg${i}nedit" onclick="tglSegn(${i})">&#xe2c6;</i>
</div> </div>
<i class="icons e-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})">&#xe395;</i> <i class="icons e-icon flr" id="sege${i}" onclick="expand(${i})">&#xe395;</i>
${cfg.comp.segpwr?segp:''} ${cfg.comp.segpwr?segp:''}
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}in"> <div class="segin" 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>
@ -990,12 +992,12 @@ function updatePA()
ps = gEBCN("psts"); for (let p of ps) p.classList.remove('selected'); ps = gEBCN("psts"); for (let p of ps) p.classList.remove('selected');
if (currentPreset > 0) { if (currentPreset > 0) {
var acv = gId(`p${currentPreset}o`); var acv = gId(`p${currentPreset}o`);
if (acv && !expanded[currentPreset+100]) { if (acv /*&& !acv.classList.contains("expanded")*/) {
acv.classList.add('selected'); acv.classList.add('selected');
// scroll selected preset into view (on WS refresh) // scroll selected preset into view (on WS refresh)
acv.scrollIntoView({ acv.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: 'center', block: 'center'
}); });
} }
acv = gId(`p${currentPreset}qlb`); acv = gId(`p${currentPreset}qlb`);
@ -1137,7 +1139,7 @@ function readState(s,command=false)
if (!s) return false; if (!s) return false;
isOn = s.on; isOn = s.on;
gId('sliderBri').value= s.bri; gId('sliderBri').value = s.bri;
nlA = s.nl.on; nlA = s.nl.on;
nlDur = s.nl.dur; nlDur = s.nl.dur;
nlTar = s.nl.tbri; nlTar = s.nl.tbri;
@ -1510,9 +1512,9 @@ function makeSeg()
block: 'start', block: 'start',
}); });
var ct = ledCount-(cfg.comp.seglen?ns:0); var ct = ledCount-(cfg.comp.seglen?ns:0);
var cn = `<div class="seg"> var cn = `<div class="seg lstI expanded">
<div class="segin expanded"> <div class="segin">
<input type="text" class="ptxt noslide" id="seg${lu}t" autocomplete="off" maxlength=32 value="" placeholder="New segment ${lu}"/> <input type="text" class="noslide" id="seg${lu}t" autocomplete="off" maxlength=32 value="" placeholder="New segment ${lu}"/>
<table class="segt"> <table class="segt">
<tr> <tr>
<td width="38%">Start LED</td> <td width="38%">Start LED</td>
@ -1777,7 +1779,11 @@ function tglCs(i)
function tglSegn(s) function tglSegn(s)
{ {
d.gId(`seg${s}t`).style.display = (window.getComputedStyle(d.gId(`seg${s}t`)).display === "none") ? "inline":"none"; let t = gId(s<100?`seg${s}t`:`p${s-100}txt`);
if (t) t.classList.toggle("show");
//if (t) t.style.display = (getComputedStyle(t).display === "none") ? "inline":"none";
event.preventDefault();
event.stopPropagation();
} }
function selSegAll(o) function selSegAll(o)
@ -1814,7 +1820,8 @@ function rptSeg(s)
var rev = gId(`seg${s}rev`).checked; var rev = gId(`seg${s}rev`).checked;
var mi = gId(`seg${s}mi`).checked; var mi = gId(`seg${s}mi`).checked;
var sel = gId(`seg${s}sel`).checked; var sel = gId(`seg${s}sel`).checked;
var obj = {"seg": {"id": s, "n": name, "start": start, "stop": (cfg.comp.seglen?start:0)+stop, "rev": rev, "mi": mi, "on": !powered[s], "bri": parseInt(gId(`seg${s}bri`).value), "sel": sel}}; var pwr = gId(`seg${s}pwr`).classList.contains("act");
var obj = {"seg": {"id": s, "n": name, "start": start, "stop": (cfg.comp.seglen?start:0)+stop, "rev": rev, "mi": mi, "on": !pwr, "bri": parseInt(gId(`seg${s}bri`).value), "sel": sel}};
if (gId(`seg${s}grp`)) { if (gId(`seg${s}grp`)) {
var grp = parseInt(gId(`seg${s}grp`).value); var grp = parseInt(gId(`seg${s}grp`).value);
var spc = parseInt(gId(`seg${s}spc`).value); var spc = parseInt(gId(`seg${s}spc`).value);
@ -1852,7 +1859,6 @@ function delSeg(s)
showToast("You need to have multiple segments to delete one!"); showToast("You need to have multiple segments to delete one!");
return; return;
} }
expanded[s] = false;
segCount--; segCount--;
var obj = {"seg": {"id": s, "stop": 0}}; var obj = {"seg": {"id": s, "stop": 0}};
requestJson(obj); requestJson(obj);
@ -1874,7 +1880,8 @@ function setMi(s)
function setSegPwr(s) function setSegPwr(s)
{ {
var obj = {"seg": {"id": s, "on": !powered[s]}}; var pwr = gId(`seg${s}pwr`).classList.contains("act");
var obj = {"seg": {"id": s, "on": !pwr}};
requestJson(obj); requestJson(obj);
} }
@ -2014,7 +2021,6 @@ function saveP(i,pl)
} }
populatePresets(); populatePresets();
resetPUtil(); resetPUtil();
if (i>0) expand(pI+100); // collapse edited preset or expand created preset.
} }
function testPl(i,bt) { function testPl(i,bt) {
@ -2336,25 +2342,18 @@ function formatArr(pl) {
} }
} }
function expand(i, c=false) function expand(i)
{ {
var seg = gId('seg' +i); var seg = i<100 ? gId('seg' +i) : gId(`p${i-100}o`);
let util = i<100?'segutil':'putil'; let ps = gId("pcont").children; // preset wrapper
//let stay = i<100?"staybot":"staytop"; if (i>100) for (let p of ps) { p.classList.remove("selected"); if (p!==seg) p.classList.remove("expanded"); } // collapse all other presets & remove selected
if (!c && i>100) for (let j=100; j<expanded.length; j++) if (i!=j && expanded[j]) expand(j,true); // collapse all expanded presets
expanded[i] = !expanded[i];
seg.classList.toggle("expanded"); seg.classList.toggle("expanded");
if (i<100) gId('segp' +i).classList.toggle("expanded");
gId('sege' +i).classList.toggle("exp");
gId(util).classList.toggle("staybot");
// presets // presets
if (i >= 100) { if (i >= 100) {
var p = i-100; var p = i-100;
gId(`p${p}o`).classList.toggle('expanded'); if (seg.classList.contains('expanded')) {
if (expanded[i]) {
if (isPlaylist(p)) { if (isPlaylist(p)) {
plJson[p] = pJson[p].playlist; plJson[p] = pJson[p].playlist;
// make sure all keys are present in plJson[p] // make sure all keys are present in plJson[p]
@ -2362,25 +2361,28 @@ function expand(i, c=false)
if (isNaN(plJson[p].repeat)) plJson[p].repeat = 0; if (isNaN(plJson[p].repeat)) plJson[p].repeat = 0;
if (!plJson[p].r) plJson[p].r = false; if (!plJson[p].r) plJson[p].r = false;
if (isNaN(plJson[p].end)) plJson[p].end = 0; if (isNaN(plJson[p].end)) plJson[p].end = 0;
gId('seg' +i).innerHTML = makeP(p,true);
seg.innerHTML = makeP(p,true);
refreshPlE(p); refreshPlE(p);
} else { } else {
seg.innerHTML = makeP(p); gId('seg' +i).innerHTML = makeP(p);
} }
var papi = papiVal(p); var papi = papiVal(p);
gId(`p${p}api`).value = papi; gId(`p${p}api`).value = papi;
if (papi.indexOf("Please") == 0) gId(`p${p}cstgl`).checked = false; if (papi.indexOf("Please") == 0) gId(`p${p}cstgl`).checked = false;
tglCs(p); tglCs(p);
} else gId('putil').classList.remove("staybot");
seg.innerHTML = ""; } else {
} else { updatePA();
gId('seg' +i +'in').classList.toggle("expanded"); gId('seg' +i).innerHTML = "";
gId('putil').classList.add("staybot");
}
// } else {
// gId('segutil').classList.toggle("staybot");
} }
seg.parentElement.scrollIntoView({ seg.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: /*(expanded[i]?'start':*/'center'/*)*/, block: 'center'
}); });
} }

2765
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff