jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-20 01:06:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI fixes and refinements

Browse Source
This commit is contained in:
Blaz Kristan 2024-02-03 14:40:28 +01:00
parent b8bf2a707c
commit 8a6ff5a42b
3 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
wled00/data/index.css
View File

@ -346,10 +346,14 @@ button {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#Segments, #Presets, #Effects, #Colors {
font-size: 19px;
padding: 4px 0 0;
}
#segutil, #segutil2, #segcont, #putil, #pcont, #pql, #fx, #palw, #segutil, #segutil2, #segcont, #putil, #pcont, #pql, #fx, #palw,
.fnd { .fnd {
max-width: 280px; max-width: 280px;
font-size: 19px;
} }
#putil, #segutil, #segutil2 { #putil, #segutil, #segutil2 {
@ -361,7 +365,7 @@ button {
padding-top: 12px; padding-top: 12px;
} }
#fx, #pql, #segcont, #pcont, #sliders, #picker, #qcs-w, #hexw, #pall, #ledmap, #fx, #pql, #segcont, #pcont, #sliders, #qcs-w, #hexw, #pall, #ledmap,
.slider, .filter, .option, .segname, .pname, .fnd { .slider, .filter, .option, .segname, .pname, .fnd {
margin: 0 auto; margin: 0 auto;
} }
@ -371,15 +375,10 @@ button {
} }
/* Quick load magin for simplified UI */ /* Quick load magin for simplified UI */
.simplified #pql { .simplified #pql, .simplified #palw, .simplified #fx {
margin-bottom: 8px; margin-bottom: 8px;
} }
/* Button margin for simplified UI */
.simplified #fx .btn, .simplified #palw .btn {
margin-top: 0;
}
.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out } .smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }
.tab-label { .tab-label {
@ -624,12 +623,10 @@ button {
padding-bottom: 8px; padding-bottom: 8px;
} }
#info .btn { .infobtn {
margin: 5px; margin: 5px;
} }
#info table .btn, #nodes table .btn {
margin: 0;
}
#info div, #nodes div { #info div, #nodes div {
max-width: 490px; max-width: 490px;
margin: 0 auto; margin: 0 auto;
@ -784,14 +781,14 @@ input[type=range]::-moz-range-thumb {
} }
#picker { #picker {
margin-top: 8px !important; margin: 4px auto 0 !important;
max-width: max-content; max-width: max-content;
} }
/* buttons */ /* buttons */
.btn { .btn {
padding: 8px; padding: 8px;
margin: 10px 4px; /*margin: 10px 4px;*/
width: 230px; width: 230px;
font-size: 19px; font-size: 19px;
color: var(--c-d); color: var(--c-d);
@ -837,14 +834,14 @@ input[type=range]::-moz-range-thumb {
text-overflow: clip; text-overflow: clip;
} }
.btn-xs { .btn-xs {
margin: 2px 0 0 0;
}
#putil .btn-xs {
margin: 0; margin: 0;
} }
#info .btn-xs { #info .btn-xs {
border: 1px solid var(--c-4); border: 1px solid var(--c-4);
} }
#btns .btn-xs {
margin: 0 4px;
}
#putil .btn-s { #putil .btn-s {
width: 135px; width: 135px;
@ -867,7 +864,7 @@ a.btn {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
padding: 8px 32px; padding: 9px 32px 7px 24px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
line-height: 24px; line-height: 24px;
@ -922,9 +919,6 @@ select {
#tt { #tt {
text-align: center; text-align: center;
} }
.cl {
background-color: #000;
}
select.sel-p, select.sel-pl, select.sel-ple { select.sel-p, select.sel-pl, select.sel-ple {
margin: 5px 0; margin: 5px 0;
width: 100%; width: 100%;
@ -1071,27 +1065,24 @@ textarea {
.newseg { .newseg {
cursor: default; cursor: default;
} }
/*
.ic { .ic {
padding: 6px 0 0 0; padding: 6px 0 0 0;
} }
*/
.xxs { /* color selector */
#csl button {
width: 44px; width: 44px;
height: 44px; height: 44px;
margin: 5px; margin: 5px;
border: 2px solid var(--c-d) !important;
background-color: #000;
} }
/* selected color selector */
.xxs-w { #csl .sl {
margin: 2px; margin: 2px;
width: 50px; width: 50px;
height: 50px; height: 50px;
}
#csl .xxs {
border: 2px solid var(--c-d) !important;
}
#csl .xxs-w {
border-width: 5px !important; border-width: 5px !important;
} }
@ -1296,15 +1287,11 @@ TD .checkmark, TD .radiomark {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
border-radius: 21px; border-radius: 21px;
margin: 13px auto 0; margin: 0 auto 12px;
min-height: 40px; min-height: 40px;
border: 1px solid var(--c-2); border: 1px solid var(--c-2);
} }
#segutil .lstI {
margin-top: 0;
}
/* Simplify segments */ /* Simplify segments */
.simplified #segcont .lstI { .simplified #segcont .lstI {
margin-top: 4px; margin-top: 4px;
@ -1403,7 +1390,7 @@ dialog {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 40px 8px 44px; padding: 8px 40px 8px 44px;
margin: 5px auto 0; margin: 4px auto 12px;
text-align: left; text-align: left;
border-radius: 21px; border-radius: 21px;
background: var(--c-2); background: var(--c-2);
@ -1421,6 +1408,13 @@ dialog {
background-color: var(--c-3); background-color: var(--c-3);
} }
#fxFind.fnd input[type="text"] {
margin-bottom: 0;
}
#fxFind {
margin-bottom: 12px;
}
/* segment & preset inner/expanded content */ /* segment & preset inner/expanded content */
.segin, .segin,
.presin { .presin {

9
wled00/data/index.htm
View File

@ -115,9 +115,9 @@
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div> <div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div> </div>
<div id="csl"> <div id="csl">
<button id="csl0" title="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button> <button id="csl0" title="Select slot" class="btn" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" title="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button> <button id="csl1" title="Select slot" class="btn" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" title="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button> <button id="csl2" title="Select slot" class="btn" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div> </div>
<p class="labels h" id="cslLabel"></p> <p class="labels h" id="cslLabel"></p>
<div id="hexw"> <div id="hexw">
@ -130,7 +130,7 @@
<button class="btn btn-xs" title="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button> <button class="btn btn-xs" title="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
<button class="btn btn-xs" title="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button> <button class="btn btn-xs" title="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
</div> </div>
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p> <p class="labels hd" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il"> <div id="palw" class="il">
<div class="staytop fnd"> <div class="staytop fnd">
<input type="text" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" /> <input type="text" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" />
@ -256,6 +256,7 @@
</div> </div>
<div id="Segments" class="tabcontent"> <div id="Segments" class="tabcontent">
<p class="labels hd" id="segLabel">Segments</p>
<div id="segcont"> <div id="segcont">
Loading... Loading...
</div> </div>

28
wled00/data/index.js
View File

@ -88,7 +88,6 @@ function setCSL(cs)
function applyCfg() function applyCfg()
{ {
cTheme(cfg.theme.base === "light"); cTheme(cfg.theme.base === "light");
gId("Colors").style.paddingTop = cfg.comp.colors.picker ? "0" : "28px";
var bg = cfg.theme.color.bg; var bg = cfg.theme.color.bg;
if (bg) sCol('--c-1', bg); if (bg) sCol('--c-1', bg);
var l = cfg.comp.labels; var l = cfg.comp.labels;
@ -809,13 +808,13 @@ function populateSegments(s)
`<span class="checkmark"></span>`+ `<span class="checkmark"></span>`+
`</label>`+ `</label>`+
`<div class="segname ${smpl}" onclick="selSegEx(${i})">`+ `<div class="segname ${smpl}" onclick="selSegEx(${i})">`+
`<i class="icons e-icon frz" id="seg${i}frz" onclick="event.preventDefault();tglFreeze(${i});">&#x${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};</i>`+ `<i class="icons e-icon frz" id="seg${i}frz" title="(un)Freeze" onclick="event.preventDefault();tglFreeze(${i});">&#x${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};</i>`+
(inst.n ? inst.n : "Segment "+i) + (inst.n ? inst.n : "Segment "+i) +
`<div class="pop hide" onclick="event.preventDefault();event.stopPropagation();">`+ `<div class="pop hide" onclick="event.preventDefault();event.stopPropagation();">`+
`<i class="icons g-icon" style="color:${cG};" onclick="this.nextElementSibling.classList.toggle('hide');">&#x278${String.fromCharCode(inst.set+"A".charCodeAt(0))};</i>`+ `<i class="icons g-icon" title="Set group" style="color:${cG};" onclick="this.nextElementSibling.classList.toggle('hide');">&#x278${String.fromCharCode(inst.set+"A".charCodeAt(0))};</i>`+
`<div class="pop-c hide"><span style="color:var(--c-f);" onclick="setGrp(${i},0);">&#x278A;</span><span style="color:var(--c-r);" onclick="setGrp(${i},1);">&#x278B;</span><span style="color:var(--c-g);" onclick="setGrp(${i},2);">&#x278C;</span><span style="color:var(--c-l);" onclick="setGrp(${i},3);">&#x278D;</span></div>`+ `<div class="pop-c hide"><span style="color:var(--c-f);" onclick="setGrp(${i},0);">&#x278A;</span><span style="color:var(--c-r);" onclick="setGrp(${i},1);">&#x278B;</span><span style="color:var(--c-g);" onclick="setGrp(${i},2);">&#x278C;</span><span style="color:var(--c-l);" onclick="setGrp(${i},3);">&#x278D;</span></div>`+
`</div> `+ `</div> `+
`<i class="icons edit-icon flr ${smpl}" id="seg${i}nedit" onclick="tglSegn(${i})">&#xe2c6;</i>`+ `<i class="icons edit-icon flr ${smpl}" id="seg${i}nedit" title="Edit" onclick="tglSegn(${i})">&#xe2c6;</i>`+
`</div>`+ `</div>`+
`<i class="icons e-icon flr ${smpl}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>`+ `<i class="icons e-icon flr ${smpl}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>`+
(cfg.comp.segpwr ? segp : '') + (cfg.comp.segpwr ? segp : '') +
@ -846,7 +845,7 @@ function populateSegments(s)
`<tr>`+ `<tr>`+
`<td><input class="segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>`+ `<td><input class="segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>`+
`<td><input class="segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>`+ `<td><input class="segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>`+
`<td><button class="btn btn-xs" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}">&#xe390;</i></button></td>`+ `<td><button class="btn btn-xs" title="Update" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}">&#xe390;</i></button></td>`+
`</tr>`+ `</tr>`+
`</table>`+ `</table>`+
`<div class="h bp" id="seg${i}len"></div>`+ `<div class="h bp" id="seg${i}len"></div>`+
@ -898,6 +897,7 @@ function populateSegments(s)
} else { } else {
gId("ledmap").classList.add('hide'); gId("ledmap").classList.add('hide');
} }
tooltip("#Segments");
} }
function populateEffects() function populateEffects()
@ -1560,12 +1560,12 @@ function setEffectParameters(idx)
// set html slider items on/off // set html slider items on/off
let sliders = d.querySelectorAll("#sliders .sliderwrap"); let sliders = d.querySelectorAll("#sliders .sliderwrap");
sliders.forEach((slider, i)=>{ sliders.forEach((slider, i)=>{
let text = slider.getAttribute("tooltip"); let text = slider.getAttribute("title");
if ((!controlDefined && i<((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i]!="")) { if ((!controlDefined && i<((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i]!="")) {
if (slOnOff.length>i && slOnOff[i]!="!") text = slOnOff[i]; if (slOnOff.length>i && slOnOff[i]!="!") text = slOnOff[i];
// restore overwritten default tooltips // restore overwritten default tooltips
if (i<2 && slOnOff[i]==="!") text = i==0 ? "Effect speed" : "Effect intensity"; if (i<2 && slOnOff[i]==="!") text = i==0 ? "Effect speed" : "Effect intensity";
slider.setAttribute("tooltip", text); slider.setAttribute("title", text);
slider.parentElement.classList.remove('hide'); slider.parentElement.classList.remove('hide');
} else } else
slider.parentElement.classList.add('hide'); slider.parentElement.classList.add('hide');
@ -1575,10 +1575,10 @@ function setEffectParameters(idx)
gId('fxopt').classList.remove('fade'); gId('fxopt').classList.remove('fade');
let checks = d.querySelectorAll("#sliders .ochkl"); let checks = d.querySelectorAll("#sliders .ochkl");
checks.forEach((check, i)=>{ checks.forEach((check, i)=>{
let text = check.getAttribute("tooltip"); let text = check.getAttribute("title");
if (5+i<slOnOff.length && slOnOff[5+i]!=='') { if (5+i<slOnOff.length && slOnOff[5+i]!=='') {
if (slOnOff.length>5+i && slOnOff[5+i]!="!") text = slOnOff[5+i]; if (slOnOff.length>5+i && slOnOff[5+i]!="!") text = slOnOff[5+i];
check.setAttribute("tooltip", text); check.setAttribute("title", text);
check.classList.remove('hide'); check.classList.remove('hide');
} else } else
check.classList.add('hide'); check.classList.add('hide');
@ -1876,7 +1876,7 @@ function resetUtil(off=false)
+ '<label class="check schkl"><input type="checkbox" id="selall" onchange="selSegAll(this)"><span class="checkmark"></span></label>' + '<label class="check schkl"><input type="checkbox" id="selall" onchange="selSegAll(this)"><span class="checkmark"></span></label>'
+ `<div class="segname" ${off?'':'onclick="makeSeg()"'}><i class="icons btn-icon">&#xe18a;</i>Add segment</div>` + `<div class="segname" ${off?'':'onclick="makeSeg()"'}><i class="icons btn-icon">&#xe18a;</i>Add segment</div>`
+ '<div class="pop hide" onclick="event.stopPropagation();">' + '<div class="pop hide" onclick="event.stopPropagation();">'
+ `<i class="icons g-icon" onclick="this.nextElementSibling.classList.toggle('hide');">&#xE34B;</i>` + `<i class="icons g-icon" title="Select group" onclick="this.nextElementSibling.classList.toggle('hide');">&#xE34B;</i>`
+ '<div class="pop-c hide"><span style="color:var(--c-f);" onclick="selGrp(0);">&#x278A;</span><span style="color:var(--c-r);" onclick="selGrp(1);">&#x278B;</span><span style="color:var(--c-g);" onclick="selGrp(2);">&#x278C;</span><span style="color:var(--c-l);" onclick="selGrp(3);">&#x278D;</span></div>' + '<div class="pop-c hide"><span style="color:var(--c-f);" onclick="selGrp(0);">&#x278A;</span><span style="color:var(--c-r);" onclick="selGrp(1);">&#x278B;</span><span style="color:var(--c-g);" onclick="selGrp(2);">&#x278C;</span><span style="color:var(--c-l);" onclick="selGrp(3);">&#x278D;</span></div>'
+ '</div></div>'; + '</div></div>';
} }
@ -2514,8 +2514,8 @@ function selectSlot(b)
{ {
csel = b; csel = b;
var cd = gId('csl').children; var cd = gId('csl').children;
for (let i of cd) i.classList.remove('xxs-w'); for (let i of cd) i.classList.remove('sl');
cd[b].classList.add('xxs-w'); cd[b].classList.add('sl');
setPicker(rgbStr(cd[b].dataset)); setPicker(rgbStr(cd[b].dataset));
// force slider update on initial load (picker "color:change" not fired if black) // force slider update on initial load (picker "color:change" not fired if black)
if (cpick.color.value == 0) updatePSliders(); if (cpick.color.value == 0) updatePSliders();
@ -3071,9 +3071,9 @@ function mergeDeep(target, ...sources)
return mergeDeep(target, ...sources); return mergeDeep(target, ...sources);
} }
function tooltip() function tooltip(cont=null)
{ {
const elements = d.querySelectorAll("[title]"); const elements = d.querySelectorAll((cont?cont+" ":"")+"[title]");
elements.forEach((element)=>{ elements.forEach((element)=>{
element.addEventListener("mouseover", ()=>{ element.addEventListener("mouseover", ()=>{
// save title // save title