luci-base: widget.js: use firewall.getZoneColorStyle() in zone widgets

Use the new `firewall.getZoneColorStyle()` helper to apply background
color styles.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
index 00ec1a889c06a882daee832c0e4d32f67f895e7f..10b65be8ecc1cc18c6ade09a2ec3ab3f28e8e18d 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
+++ b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
@@ -62,7 +62,7 @@ var CBIZoneSelect = form.ListValue.extend({
                if (this.allowlocal) {
                        choices[''] = E('span', {
                                'class': 'zonebadge',
-                               'style': 'background-color:' + firewall.getColorForName(null)
+                               'style': firewall.getZoneColorStyle(null)
                        }, [
                                E('strong', _('Device')),
                                (this.allowany || this.allowlocal)
@@ -72,14 +72,14 @@ var CBIZoneSelect = form.ListValue.extend({
                else if (!this.multiple && (this.rmempty || this.optional)) {
                        choices[''] = E('span', {
                                'class': 'zonebadge',
-                               'style': 'background-color:' + firewall.getColorForName(null)
+                               'style': firewall.getZoneColorStyle(null)
                        }, E('em', _('unspecified')));
                }
 
                if (this.allowany) {
                        choices['*'] = E('span', {
                                'class': 'zonebadge',
-                               'style': 'background-color:' + firewall.getColorForName(null)
+                               'style': firewall.getZoneColorStyle(null)
                        }, [
                                E('strong', _('Any zone')),
                                (this.allowany && this.allowlocal && !isOutputOnly) ? E('span', ' (%s)'.format(_('forward'))) : ''
@@ -125,7 +125,7 @@ var CBIZoneSelect = form.ListValue.extend({
 
                        choices[name] = E('span', {
                                'class': 'zonebadge',
-                               'style': 'background-color:' + zone.getColor()
+                               'style': firewall.getZoneColorStyle(zone)
                        }, [ E('strong', name) ].concat(ifaces));
                }
 
@@ -283,7 +283,7 @@ var CBIZoneForwards = form.DummyValue.extend({
 
                return E('label', {
                        'class': 'zonebadge cbi-tooltip-container',
-                       'style': 'background-color:' + zone.getColor()
+                       'style': firewall.getZoneColorStyle(zone)
                }, [
                        E('strong', name),
                        E('div', { 'class': 'cbi-tooltip' }, ifaces)