From 0a97717b35fe278d994e13be06e9f9ba300d0dc4 Mon Sep 17 00:00:00 2001
From: Woody <xaver@holzapfel.net>
Date: Thu, 16 Nov 2023 14:43:50 +0100
Subject: [PATCH] Add simplified segments

---
 wled00/data/index.css |  2 +-
 wled00/data/index.js  | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/wled00/data/index.css b/wled00/data/index.css
index c9bf8b665..ab446a21d 100644
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@@ -1421,7 +1421,7 @@ TD .checkmark, TD .radiomark {
 .expanded {
 	display: inline-block !important;
 }
-.hide, .expanded .segin.hide, .expanded .presin.hide, .expanded .sbs.hide, .expanded .frz, .expanded .g-icon {
+.hide, .expanded .segin.hide, .expanded .presin.hide, .expanded .sbs.hide, .expanded .frz, .expanded .g-icon, .nosimple {
 	display: none !important;
 }
 
diff --git a/wled00/data/index.js b/wled00/data/index.js
index 10e884ca4..57359637d 100644
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -770,23 +770,23 @@ function populateSegments(s)
 							`<option value="1" ${inst.si==1?' selected':''}>WeWillRockYou</option>`+
 						`</select></div>`+
 					`</div>`;
-		cn += `<div class="seg lstI ${i==s.mainseg ? 'selected' : ''} ${exp ? "expanded":""}" id="seg${i}" data-set="${inst.set}">`+
-				`<label class="check schkl">`+
+		cn += `<div class="seg lstI ${i==s.mainseg && !simplifiedUI ? 'selected' : ''} ${exp ? "expanded":""}" id="seg${i}" data-set="${inst.set}">`+
+				`<label class="check schkl ${simplifiedUI ? 'nosimple' : ''}">`+
 					`<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>`+
 					`<span class="checkmark"></span>`+
 				`</label>`+
 				`<div class="segname" 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 ${simplifiedUI ? 'nosimple' : ''}" id="seg${i}frz" 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();">`+
+					`<div class="pop hide ${simplifiedUI ? 'nosimple' : ''}" 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>`+
 						`<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" id="seg${i}nedit" onclick="tglSegn(${i})">&#xe2c6;</i>`+
+					`<i class="icons edit-icon flr ${simplifiedUI ? 'nosimple' : ''}" id="seg${i}nedit" onclick="tglSegn(${i})">&#xe2c6;</i>`+
 				`</div>`+
-				`<i class="icons e-icon flr" id="sege${i}" onclick="expand(${i})">&#xe395;</i>`+
+				`<i class="icons e-icon flr ${simplifiedUI ? 'nosimple' : ''}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>`+
 				(cfg.comp.segpwr ? segp : '') +
-				`<div class="segin" id="seg${i}in">`+
+				`<div class="segin ${simplifiedUI ? 'nosimple' : ''}" id="seg${i}in">`+
 					`<input type="text" class="ptxt" id="seg${i}t" autocomplete="off" maxlength=${li.arch=="esp8266"?32:64} value="${inst.n?inst.n:""}" placeholder="Enter name..."/>`+
 					`<table class="infot segt">`+
 					`<tr>`+
@@ -3025,7 +3025,11 @@ function simplifyUI() {
 
 	// Put effects below palett list
 	gId("Colors").innerHTML += gId("Effects").innerHTML;
-	// Put preset quick load before palette list
+	// Put segments before palette list if there are multiple segments
+	if (lastinfo.leds.seglc.length > 1) {
+		gId("Colors").insertBefore(gId("segcont"), gId("pall"));
+	}
+	// Put preset quick load before palette list and segemts
 	gId("Colors").insertBefore(gId("pql"), gId("pall"));
 
 	// Hide buttons in top bar