From ccb7e4a4a7aac34734dbda7e9ca7f5b53cbc51ff Mon Sep 17 00:00:00 2001
From: Jo-Philipp Wich <jo@mein.io>
Date: Mon, 30 Mar 2020 17:05:05 +0200
Subject: [PATCH] themes: generalize indicator markup and styling

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
---
 .../htdocs/luci-static/bootstrap/cascade.css  | 10 ++-
 .../luasrc/view/themes/bootstrap/header.htm   |  2 +-
 .../htdocs/luci-static/material/cascade.css   |  9 ++-
 .../luasrc/view/themes/material/header.htm    |  2 +-
 .../luci-static/openwrt2020/cascade.css       | 16 +++--
 .../luasrc/view/themes/openwrt2020/header.htm |  2 +-
 .../luci-static/openwrt.org/cascade.css       | 72 ++++++++++++++-----
 .../luasrc/view/themes/openwrt.org/header.htm |  8 ++-
 8 files changed, 87 insertions(+), 34 deletions(-)

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 51931f550..c85bd866d 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1774,7 +1774,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 	margin: .25em 0;
 }
 
-.label {
+.label,
+header [data-indicator] {
 	padding: 1px 3px 2px;
 	font-size: 9.75px;
 	font-weight: bold;
@@ -1786,6 +1787,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 	text-shadow: none;
 }
 
+header [data-indicator][data-clickable] {
+	cursor: pointer;
+}
+
 a.label:link,
 a.label:visited {
 	color: #fff;
@@ -1807,7 +1812,8 @@ a.label:hover {
 	background-color: #46a546;
 }
 
-.label.notice {
+.label.notice,
+header [data-indicator][data-style="active"] {
 	background-color: #62cffc;
 }
 
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
index b9e1fbcdb..39415154a 100644
--- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
+++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
@@ -46,7 +46,7 @@
 				<div class="container">
 					<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
 					<ul class="nav" id="topmenu" style="display:none"></ul>
-					<div class="pull-right">
+					<div id="indicators" class="pull-right">
 						<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
 							<span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span>
 							<span class="label" id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%> <%:off%></span>
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 8645c60e4..f3922c00f 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -443,7 +443,8 @@ header > .fill > .container > .status > * {
 	background-color: #5cb85c !important;
 }
 
-.notice {
+.notice,
+[data-indicator]:not([data-style="inactive"]) {
 	background-color: #5bc0de !important;
 }
 
@@ -2091,7 +2092,8 @@ span[data-tooltip] .label {
 	flex-direction: column;
 }
 
-.label {
+.label,
+[data-indicator] {
 	font-size: .8rem;
 	font-weight: bold;
 	padding: .3rem .8rem;
@@ -2480,7 +2482,8 @@ input[name="nslookup"] {
 		padding: .3rem .6rem;
 	}
 
-	.label {
+	.label,
+	[data-indicator] {
 		padding: .2rem .6rem;
 	}
 
diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
index 124314039..32678a322 100644
--- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm
+++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
@@ -191,7 +191,7 @@
 			<span class="showSide"></span>
 			<a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"><img src="<%=media%>/brand.png" alt="OpenWrt"></a>
 			<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
-			<div class="status">
+			<div class="status" id="indicators">
 				<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
 					<span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span>
 					<span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%></span> <%:off%></span>
diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index f3fc7529f..d394192f5 100644
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -89,12 +89,12 @@ body {
 	flex: 3;
 }
 
-#menubar .indicators {
+#indicators {
 	flex: 1 1 25%;
 	text-align: right;
 }
 
-#menubar .indicators > * {
+#indicators > * {
 	background: var(--secondary-bright-color);
 	color: var(--main-bright-color);
 	display: inline-block;
@@ -107,15 +107,19 @@ body {
 	white-space: nowrap;
 }
 
-#menubar .indicators > * > #xhr_poll_status_off {
+#indicators > [data-style="inactive"],
+#indicators > * > #xhr_poll_status_off {
 	background: var(--main-bright-color);
 	color: var(--secondary-bright-color);
+	border: 2px solid var(--secondary-bright-color);
+	line-height: calc(1.5em - 4px);
+	padding: 0 calc(.5em - 2px);
+}
+
+#indicators > * > #xhr_poll_status_off {
 	border-radius: 1em;
 	margin: 0 -.5em;
 	display: block;
-	padding: 0 .5em;
-	border: 2px solid var(--secondary-bright-color);
-	line-height: calc(1.5em - 4px);
 }
 
 #menubar h2,
diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
index dc7f3bc8e..00834b307 100644
--- a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
+++ b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
@@ -206,7 +206,7 @@
 
 	<span class="hostname"><%=(boardinfo.hostname or "?")%></span>
 	<span class="distversion"><%=ver.distversion%></span>
-	<span class="indicators">
+	<span id="indicators">
 		<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
 			<span id="xhr_poll_status_on" style="display:none"><%:Refreshing%></span>
 			<span id="xhr_poll_status_off" style="display:none"><%:Paused%></span>
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index a1b85f658..22f32ef7d 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -328,25 +328,43 @@ div.hostinfo {
 	float: right;
 }
 
-#xhr_poll_status {
-	cursor: pointer;
+#menubar {
+	position: relative;
+	width: 100%;
+	background: #000000;
+	color: #ffffff;
+	display: flex;
+	flex-wrap: wrap;
 }
 
-#xhr_poll_status #xhr_poll_status_off {
-	font-weight: bold;
-	color: #FF0000;
+#menubar .hostinfo,
+#indicators,
+#modemenu {
+	flex: 1 1 450px;
+	display: flex;
+	align-items: center;
 }
 
-#xhr_poll_status #xhr_poll_status_on {
-	font-weight: bold;
-	color: #00FF00;
+#indicators {
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	margin-right: 1em;
 }
 
-#menubar {
-	position: relative;
-	width: 100%;
-	background: #000000;
-	color: #ffffff;
+#indicators > *,
+#indicators > #xhr_poll_status > * {
+	flex: 0 0 auto;
+	display: inline-flex;
+}
+
+#modemenu {
+	flex: 1 1 auto;
+	padding: 0;
+	margin: 0;
+}
+
+#modemenu > * {
+	padding: .5em;
 }
 
 #menubar .warning {
@@ -354,17 +372,37 @@ div.hostinfo {
 	background-color: #557788;
 }
 
+#indicators > #xhr_poll_status,
+#indicators > [data-clickable="true"] {
+	cursor: pointer;
+}
+
+#indicators > :not([id="xhr_poll_status"]),
+#indicators > #xhr_poll_status > * {
+	text-transform: uppercase;
+	background: #90c0e0 !important;
+	color: #000 !important;
+	font-size: 11px;
+	padding: .125em .5em;
+	margin: .125em;
+	border-radius: .6em;
+}
+
+#indicators > [data-style="inactive"],
+#indicators > * > #xhr_poll_status_off {
+	border: 1px solid #90c0e0;
+	background: #000 !important;
+	color: #90c0e0 !important;
+	padding: calc(.125em - 1px) calc(.5em - 1px);
+}
+
 html #menubar a:link,
 html #menubar a:visited {
-	position: relative;
-	display: block;
-	padding: 0.5em;
 	background: #000000;
 	color: #ffffff;
 	text-decoration: none;
 }
 
-
 html #menubar a:link:hover,
 html #menubar a:visited:hover,
 html #menubar a:link:active,
diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
index f691e7066..fb7c7f22d 100644
--- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
+++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
@@ -201,10 +201,12 @@
 <div class="hostinfo">
 	<%=(boardinfo.hostname or "?")%> | <%=ver.distversion%> |
 	<%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%>
+</div>
+
+<div id="indicators">
 	<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
-		| <%:Auto Refresh%>:
-		<span id="xhr_poll_status_on"><%:on%></span>
-		<span id="xhr_poll_status_off" style="display:none"><%:off%></span>
+		<span id="xhr_poll_status_on"><%:Auto Refresh%>: <%:on%></span>
+		<span id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%>: <%:off%></span>
 	</span>
 </div>
 
-- 
2.25.1