Merge pull request #3511 from WoodyLetsCode/simple-mode

New implementation of the simplified UI

Author: blazoncek

tools/cdata.js

@@ -219,36 +219,10 @@ function writeChunks(srcDir, specs, resultFile) {
 }
 
 writeHtmlGzipped("wled00/data/index.htm", "wled00/html_ui.h", 'index');
-writeHtmlGzipped("wled00/data/simple.htm", "wled00/html_simple.h", 'simple');
 writeHtmlGzipped("wled00/data/pixart/pixart.htm", "wled00/html_pixart.h", 'pixart');
 writeHtmlGzipped("wled00/data/cpal/cpal.htm", "wled00/html_cpal.h", 'cpal');
 writeHtmlGzipped("wled00/data/pxmagic/pxmagic.htm", "wled00/html_pxmagic.h", 'pxmagic');
-/*
-writeChunks(
-  "wled00/data",
-  [
-    {
-      file: "simple.css",
-      name: "PAGE_simpleCss",
-      method: "gzip",
-      filter: "css-minify",
-    },
-    {
-      file: "simple.js",
-      name: "PAGE_simpleJs",
-      method: "gzip",
-      filter: "js-minify",
-    },
-    {
-      file: "simple.htm",
-      name: "PAGE_simple",
-      method: "gzip",
-      filter: "html-minify-ui",
-    }
-  ],
-  "wled00/html_simplex.h"
-);
-*/
+
 writeChunks(
   "wled00/data",
   [

wled00/cfg.cpp

@@ -31,9 +31,7 @@ bool deserializeConfig(JsonObject doc, bool fromFS) {
   getStringFromJson(cmDNS, id[F("mdns")], 33);
   getStringFromJson(serverDescription, id[F("name")], 33);
   getStringFromJson(alexaInvocationName, id[F("inv")], 33);
-#ifdef WLED_ENABLE_SIMPLE_UI
   CJSON(simplifiedUI, id[F("sui")]);
-#endif
 
   JsonObject nw = doc["nw"];
 #ifndef WLED_DISABLE_ESPNOW
@@ -655,9 +653,7 @@ void serializeConfig() {
   id[F("mdns")] = cmDNS;
   id[F("name")] = serverDescription;
   id[F("inv")] = alexaInvocationName;
-#ifdef WLED_ENABLE_SIMPLE_UI
   id[F("sui")] = simplifiedUI;
-#endif
 
   JsonObject nw = doc.createNestedObject("nw");
 #ifndef WLED_DISABLE_ESPNOW

wled00/data/index.css

@@ -370,6 +370,16 @@ button {
 	padding: 5px 0 0;
 }
 
+/* Quick load magin for simplified UI */
+.simplified #pql {
+	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 {
@@ -413,6 +423,7 @@ button {
 	position: sticky;
 	bottom: 0;
 	max-width: 300px;
+	z-index: 2;
 }
 
 #sliders .labels {
@@ -754,13 +765,17 @@ input[type=range]::-moz-range-thumb {
 }
 
 #Colors .sliderwrap {
-	margin: 4px 0 0;
+	margin: 2px 0 0;
 }
 
-/* Dynamically hide brightness slider label */
+/* Dynamically hide labels */
 .hd {
 	display: var(--bhd);
 }
+/* Do not hide quick load label in simplified mode on small screen widths */
+.simplified #pql .hd {
+	display: var(--bhd) !important;
+}
 
 #briwrap {
 	min-width: 300px;
@@ -1284,6 +1299,12 @@ TD .checkmark, TD .radiomark {
 	margin-top: 0;
 }
 
+/* Simplify segments */
+.simplified #segcont .lstI {
+	margin-top: 4px;
+	min-height: unset;
+}
+
 /* selected item/element */
 .selected { /* has to be after .lstI since !important is not ok */
 	background: var(--c-4);
@@ -1324,6 +1345,19 @@ TD .checkmark, TD .radiomark {
 	top: calc(var(--sti) + 42px);
 }
 
+dialog::backdrop {
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+}
+dialog {
+	max-height: 70%;
+	border: 0;
+	border-radius: 10px;
+	background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)), var(--c-3);
+	box-shadow: 4px 4px 10px 4px var(--c-1);
+	color: var(--c-f);
+}
+
 #fxlist .lstI.sticky,
 #pallist .lstI.sticky {
 	top: var(--sti);

wled00/data/index.htm

@@ -168,7 +168,7 @@
 			<input id="hexc" tooltip="Hex RGB" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
 			<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
 		</div>
-		<div style="padding: 8px 0;">
+		<div style="padding: 8px 0;" id="btns">
 			<button class="btn btn-xs" tooltip="Pixel Magic Tool" type="button" id="pxmb" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button>
 			<button class="btn btn-xs" tooltip="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" tooltip="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>