From ee7036f13ddce56ed8d12b3bdd224cc407ba7519 Mon Sep 17 00:00:00 2001 From: Aircoookie <21045690+Aircoookie@users.noreply.github.com> Date: Mon, 29 May 2023 21:06:10 +0200 Subject: [PATCH] CSS tweaks Fix repeat segment button remaining hidden Fix third segment row (offset) alignment in 1D mode Keep disabled sound simulation modes as comment for reference New local var for 2D seg UI, improves code legibility --- wled00/data/index.css | 12 +- wled00/data/index.js | 34 +- wled00/html_ui.h | 3348 ++++++++++++++++++++--------------------- wled00/util.cpp | 13 + 4 files changed, 1710 insertions(+), 1697 deletions(-) diff --git a/wled00/data/index.css b/wled00/data/index.css index c85288177..640839d55 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -191,12 +191,8 @@ button { .g-icon { font-style: normal; position: absolute; - top: 6px; - right: 8px; -} - -#segutil .g-icon { top: 8px; + right: 8px; } /* pop-up container */ @@ -207,7 +203,7 @@ button { right: 0; } -/* pop-up content */ +/* pop-up content (segment sets) */ .pop-c { position: absolute; background-color: var(--c-2); @@ -216,8 +212,9 @@ button { z-index: 1; top: 3px; right: 35px; - padding: 4px 8px 1px; + padding: 3px 8px 1px; font-size: 24px; + line-height: 24px; } .pop-c span { padding: 2px 6px; @@ -823,6 +820,7 @@ input[type=range]::-moz-range-thumb { .btn-xs, .btn-pl-del, .btn-pl-add { width: 42px !important; height: 42px !important; + text-overflow: clip; } .btn-xs { margin: 2px 0 0 0; diff --git a/wled00/data/index.js b/wled00/data/index.js index 31f472228..e6c89342c 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -702,11 +702,12 @@ function populateSegments(s) let sg = gId(`seg${i}`); let exp = sg ? (sg.classList.contains('expanded') || (i===0 && cfg.comp.segexp)) : false; - let cG = "var(--c-f)"; + // segment set icon color + let cG = "var(--c-b)"; switch (inst.set) { case 1: cG = "var(--c-r)"; break; - case 2: cG = "var(--c-g)"; break; - case 3: cG = "var(--c-b)"; break; + case 2: cG = "var(--c-g)"; break; + case 3: cG = "var(--c-l)"; break; } let segp = `
`+ @@ -720,10 +721,11 @@ function populateSegments(s) let stoX = inst.stop; let staY = inst.startY; let stoY = inst.stopY; + let isMSeg = isM && staXReverse ${isM?'':'direction'}`; let miXck = ``; let rvYck = "", miYck =""; - if (isM && staXReverse`; miYck = ``; } @@ -761,16 +763,16 @@ function populateSegments(s) ``+ ``+ ``+ - ``+ + ``+ + ``+ ``+ ``+ - ``+ - ``+ - ``+ + ``+ + ``+ + ``+ ``+ - (isM && staX'+ + (isMSeg ? ''+ ''+ ''+ ''+ @@ -784,15 +786,15 @@ function populateSegments(s) ``+ ``+ ``+ - ``+ + ``+ ``+ `
${isM&&staX`+ - `${isM&&staX`+ - `${isM&&staX`+ + `${isMSeg?'Start X':'Start LED'}${isMSeg?(cfg.comp.seglen?"Width":"Stop X"):(cfg.comp.seglen?"LED count":"Stop LED")}${isMSeg?'':'Offset'}
${isM&&staX'+rvXck:''}${isMSeg?miXck+'
'+rvXck:''}
Start Y'+(cfg.comp.seglen?'Height':'Stop Y')+'
Start Y'+(cfg.comp.seglen?'Height':'Stop Y')+'
`+ `
`+ - (!(isM&&staX1&&stoX-staX>1 ? map2D : '') + + (!isMSeg ? rvXck : '') + + (isMSeg&&stoY-staY>1&&stoX-staX>1 ? map2D : '') + (s.AudioReactive && s.AudioReactive.on ? "" : sndSim) + `