themes: generalize indicator markup and styling

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(backported from commit ccb7e4a4a7aac34734dbda7e9ca7f5b53cbc51ff)

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 51931f550e7fdf2303cd325665b79de003748aea..c85bd866d3f7f806eb48129fb805e9c4d4b9da7d 100644 (file)
--- 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 b9e1fbcdb6a270af6d93f7c638c1ad61f65591ec..39415154aa8b378d2989d78a0f562c8bdd08b51d 100644 (file)
--- 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 8645c60e42145f335dfe562f61c99c555c752a6c..f3922c00f95d9acf0857af4a58e6c62b004c8ee3 100644 (file)
--- 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 7e222b57567b228e8a850edf872079984b0e8c98..0d9d70073df5f9c226766b875a3092c3d7e1f51b 100644 (file)
--- 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/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index a1b85f658e66db34ff08e9a725837863a93bdf06..22f32ef7dd69b5322590967cc1bc5fed75e1e66d 100644 (file)
--- 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 0a29f3ad377601573e4fdc92b5db1e6eb91eb6ad..e5b20992cb46db68c295ec9728cda7db119bd0a3 100644 (file)
--- 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>