luci-base: firewall.js: add getZoneColorStyle() helper

The getZoneColorStyle() function will produce CSS style properties that
describe the color value of the zone. The color declaration is divided
into a CSS variable called `--zone-color-rgb` which holds the RGB value
of the color and a `background-color` property assigning these values
as background property.

This allows themes to override the color with derived values, e.g. by
applying an alpha channel.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit d775279dbd0da284af7f74b31b5d3b0eddcf80bc)

diff --git a/modules/luci-base/htdocs/luci-static/resources/firewall.js b/modules/luci-base/htdocs/luci-static/resources/firewall.js
index 4fa4954ba632c7aadc2d89e0c3b62dade69180e9..a682af46d05bf4239b2d4de32f5fee5c5328012d 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/firewall.js
+++ b/modules/luci-base/htdocs/luci-static/resources/firewall.js
@@ -224,7 +224,17 @@ Firewall = L.Class.extend({
                }, this));
        },
 
-       getColorForName: getColorForName
+       getColorForName: getColorForName,
+
+       getZoneColorStyle: function(zone) {
+               var hex = (zone instanceof Zone) ? zone.getColor() : getColorForName((zone != null && zone != '*') ? zone : null);
+
+               return '--zone-color-rgb:%d, %d, %d; background-color:rgb(var(--zone-color-rgb))'.format(
+                       parseInt(hex.substring(1, 3), 16),
+                       parseInt(hex.substring(3, 5), 16),
+                       parseInt(hex.substring(5, 7), 16)
+               );
+       },
 });