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

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