Sternenlabor/WLED
1
0
Fork 0
Code Issues Pull Requests 1 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
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;
}
#Segments, #Presets, #Effects, #Colors {
font-size: 19px;
padding: 4px 0 0;
}
#segutil, #segutil2, #segcont, #putil, #pcont, #pql, #fx, #palw,
.fnd {
max-width: 280px;
font-size: 19px;
}
#putil, #segutil, #segutil2 {
@@ -361,7 +365,7 @@ button {
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 {
margin: 0 auto;
}
@@ -371,15 +375,10 @@ button {
}
/* Quick load magin for simplified UI */
.simplified #pql {
.simplified #pql, .simplified #palw, .simplified #fx {
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 }
.tab-label {
@@ -624,12 +623,10 @@ button {
padding-bottom: 8px;
}
#info .btn {
.infobtn {
margin: 5px;
}
#info table .btn, #nodes table .btn {
margin: 0;
}
#info div, #nodes div {
max-width: 490px;
margin: 0 auto;
@@ -784,14 +781,14 @@ input[type=range]::-moz-range-thumb {
}
#picker {
margin-top: 8px !important;
margin: 4px auto 0 !important;
max-width: max-content;
}
/* buttons */
.btn {
padding: 8px;
margin: 10px 4px;
/*margin: 10px 4px;*/
width: 230px;
font-size: 19px;
color: var(--c-d);
@@ -837,14 +834,14 @@ input[type=range]::-moz-range-thumb {
text-overflow: clip;
}
.btn-xs {
margin: 2px 0 0 0;
}
#putil .btn-xs {
margin: 0;
}
#info .btn-xs {
border: 1px solid var(--c-4);
}
#btns .btn-xs {
margin: 0 4px;
}
#putil .btn-s {
width: 135px;
@@ -867,7 +864,7 @@ a.btn {
display: block;
white-space: nowrap;
text-align: center;
padding: 8px 32px;
padding: 9px 32px 7px 24px;
position: relative;
box-sizing: border-box;
line-height: 24px;
@@ -922,9 +919,6 @@ select {
#tt {
text-align: center;
}
.cl {
background-color: #000;
}
select.sel-p, select.sel-pl, select.sel-ple {
margin: 5px 0;
width: 100%;
@@ -1071,27 +1065,24 @@ textarea {
.newseg {
cursor: default;
}
/*
.ic {
padding: 6px 0 0 0;
}
.xxs {
*/
/* color selector */
#csl button {
width: 44px;
height: 44px;
margin: 5px;
border: 2px solid var(--c-d) !important;
background-color: #000;
}
.xxs-w {
/* selected color selector */
#csl .sl {
margin: 2px;
width: 50px;
height: 50px;
}
#csl .xxs {
border: 2px solid var(--c-d) !important;
}
#csl .xxs-w {
border-width: 5px !important;
}
@@ -1296,15 +1287,11 @@ TD .checkmark, TD .radiomark {
position: -webkit-sticky;
position: sticky;
border-radius: 21px;
margin: 13px auto 0;
margin: 0 auto 12px;
min-height: 40px;
border: 1px solid var(--c-2);
}
#segutil .lstI {
margin-top: 0;
}
/* Simplify segments */
.simplified #segcont .lstI {
margin-top: 4px;
@@ -1403,7 +1390,7 @@ dialog {
width: 100%;
box-sizing: border-box;
padding: 8px 40px 8px 44px;
margin: 5px auto 0;
margin: 4px auto 12px;
text-align: left;
border-radius: 21px;
background: var(--c-2);
@@ -1421,6 +1408,13 @@ dialog {
background-color: var(--c-3);
}
#fxFind.fnd input[type="text"] {
margin-bottom: 0;
}
#fxFind {
margin-bottom: 12px;
}
/* segment & preset inner/expanded content */
.segin,
.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>
<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="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="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="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" 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" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div>
<p class="labels h" id="cslLabel"></p>
<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="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>
<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 class="staytop fnd">
<input type="text" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" />
@@ -256,6 +256,7 @@
</div>
<div id="Segments" class="tabcontent">
<p class="labels hd" id="segLabel">Segments</p>
<div id="segcont">
Loading...
</div>

28
wled00/data/index.js
View File

@@ -88,7 +88,6 @@ function setCSL(cs)
function applyCfg()
{
cTheme(cfg.theme.base === "light");
gId("Colors").style.paddingTop = cfg.comp.colors.picker ? "0" : "28px";
var bg = cfg.theme.color.bg;
if (bg) sCol('--c-1', bg);
var l = cfg.comp.labels;
@@ -809,13 +808,13 @@ function populateSegments(s)
`<span class="checkmark"></span>`+
`</label>`+
`<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) +
`<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> `+
`<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>`+
`<i class="icons e-icon flr ${smpl}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>`+
(cfg.comp.segpwr ? segp : '') +
@@ -846,7 +845,7 @@ function populateSegments(s)
`<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}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>`+
`</table>`+
`<div class="h bp" id="seg${i}len"></div>`+
@@ -898,6 +897,7 @@ function populateSegments(s)
} else {
gId("ledmap").classList.add('hide');
}
tooltip("#Segments");
}
function populateEffects()
@@ -1560,12 +1560,12 @@ function setEffectParameters(idx)
// set html slider items on/off
let sliders = d.querySelectorAll("#sliders .sliderwrap");
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 (slOnOff.length>i && slOnOff[i]!="!") text = slOnOff[i];
// restore overwritten default tooltips
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');
} else
slider.parentElement.classList.add('hide');
@@ -1575,10 +1575,10 @@ function setEffectParameters(idx)
gId('fxopt').classList.remove('fade');
let checks = d.querySelectorAll("#sliders .ochkl");
checks.forEach((check, i)=>{
let text = check.getAttribute("tooltip");
let text = check.getAttribute("title");
if (5+i<slOnOff.length && 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');
} else
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>'
+ `<div class="segname" ${off?'':'onclick="makeSeg()"'}><i class="icons btn-icon">&#xe18a;</i>Add segment</div>`
+ '<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></div>';
}
@@ -2514,8 +2514,8 @@ function selectSlot(b)
{
csel = b;
var cd = gId('csl').children;
for (let i of cd) i.classList.remove('xxs-w');
cd[b].classList.add('xxs-w');
for (let i of cd) i.classList.remove('sl');
cd[b].classList.add('sl');
setPicker(rgbStr(cd[b].dataset));
// force slider update on initial load (picker "color:change" not fired if black)
if (cpick.color.value == 0) updatePSliders();
@@ -3071,9 +3071,9 @@ function 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)=>{
element.addEventListener("mouseover", ()=>{
// save title