From 8a6ff5a42bc054843a64e418bbe7e0587de1e645 Mon Sep 17 00:00:00 2001
From: Blaz Kristan <blaz@kristan-sp.si>
Date: Sat, 3 Feb 2024 14:40:28 +0100
Subject: [PATCH] UI fixes and refinements

---
 wled00/data/index.css | 70 ++++++++++++++++++++-----------------------
 wled00/data/index.htm |  9 +++---
 wled00/data/index.js  | 28 ++++++++---------
 3 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/wled00/data/index.css b/wled00/data/index.css
index dc44ef1af..37eb6a596 100644
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@@ -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 {
diff --git a/wled00/data/index.htm b/wled00/data/index.htm
index c735f00d0..a58c76da6 100644
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@@ -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>
diff --git a/wled00/data/index.js b/wled00/data/index.js
index bbcda6de2..abbf8b98a 100644
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -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