fix angular theme for gauges - and some other escapes

to close #649
node-red · Dec 29, 2020 · 238efe6 · 238efe6
1 parent d33d56b
commit 238efe6
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,9 @@
 **Fixes**
 
  - Update German translations. PR #654
+ - Fix level update for weathericons lite.
  - Ensure dropdown new options are set even when not visible. Issue #479
+ - Fix angular theme for gauges - and some other theme escapes. Issue #649
 
 ### 2.26.0: Milestone Release
 

diff --git a/dist/dashboard.appcache b/dist/dashboard.appcache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Time: Mon Dec 28 2020 12:51:19 GMT+0000 (Greenwich Mean Time)
+# Time: Tue Dec 29 2020 00:15:10 GMT+0000 (Greenwich Mean Time)
 
 CACHE:
 i18n.js
@@ -26,4 +26,4 @@ loading.html
 NETWORK:
 *
 
-# hash: 40e3a8897d661aac95bac6eef9aa66d3569ab5917b18effddec749f6851205f5
+# hash: 39b95ea38ec43b9c47773e99fbe36210c79e0db39f0224ff2daf82150841df2d
diff --git a/dist/js/app.min.js b/dist/js/app.min.js
diff --git a/nodes/ui_gauge.js b/nodes/ui_gauge.js
@@ -21,6 +21,7 @@ module.exports = function (RED) {
 
         var sizes = ui.getSizes();
         var theme = ui.getTheme();
+
         if (theme === undefined) {
             theme = {"group-textColor":{value:"#000"}};
             theme["widget-textColor"] = {value:"#000"};
@@ -31,13 +32,14 @@ module.exports = function (RED) {
         gageoptions.lineWidth = {'theme-dark':0.75};
         gageoptions.pointerOptions = {'theme-dark':{color:'#8e8e93'}, 'theme-custom':theme["group-textColor"].value};
         gageoptions.backgroundColor = {'theme-dark':'#515151', 'theme-custom':theme["widget-textColor"].value };
-        gageoptions.compassColor = {'theme-dark':'#0b8489', 'theme-light':'#1784be', 'theme-custom':theme["widget-backgroundColor"].value};
+        gageoptions.compassColor = {'theme-dark':theme["widget-backgroundColor"].value, 'theme-light':theme["widget-backgroundColor"].value, 'theme-custom':theme["widget-backgroundColor"].value};
+        gageoptions.valueFontColor = {'theme-dark':'#eee', 'theme-light':'#111', 'theme-custom':theme["widget-textColor"].value};
 
         var waveoptions = {};
-        waveoptions.circleColor = {'theme-dark':'#097479', 'theme-light':'#0094ce', 'theme-custom':theme["widget-backgroundColor"].value};
-        waveoptions.waveColor = {'theme-dark':'#097479', 'theme-light':'#0094ce', 'theme-custom':theme["widget-backgroundColor"].value};
-        waveoptions.textColor = {'theme-dark':'#0b8489', 'theme-light':'#1784be', 'theme-custom':theme["widget-textColor"].value};
-        waveoptions.waveTextColor = {'theme-dark':'#0fbbc3', 'theme-light':'#a4dbf8', 'theme-custom':theme["widget-textColor"].value};
+        waveoptions.circleColor = {'theme-dark':theme["widget-backgroundColor"].value, 'theme-light':theme["widget-backgroundColor"].value, 'theme-custom':theme["widget-backgroundColor"].value};
+        waveoptions.waveColor = {'theme-dark':theme["widget-backgroundColor"].value, 'theme-light':theme["widget-backgroundColor"].value, 'theme-custom':theme["widget-backgroundColor"].value};
+        waveoptions.textColor = {'theme-dark':theme["widget-textColor"].value, 'theme-light':theme["widget-textColor"].value, 'theme-custom':theme["widget-textColor"].value};
+        waveoptions.waveTextColor = {'theme-dark':theme["widget-textColor"].value, 'theme-light':theme["widget-textColor"].value, 'theme-custom':theme["widget-textColor"].value};
 
         var done = ui.add({
             node: node,

diff --git a/src/components/ui-gauge/ui-gauge.js b/src/components/ui-gauge/ui-gauge.js
@@ -15,7 +15,6 @@ angular.module('ui').directive('uiGauge', [ '$timeout', '$interpolate',
                         fgnd = themeState['widget-backgroundColor'].value;
                         tgnd = themeState['widget-textColor'].value;
                     }
-
                     //Backwards compatability for background and foreground
                     if (!bgnd || !fgnd) {
                         if (theme === 'theme-dark') {
@@ -58,7 +57,6 @@ angular.module('ui').directive('uiGauge', [ '$timeout', '$interpolate',
                                 if (gaugeConfig.waveColor === undefined) { gaugeConfig.waveColor = bgnd; }
                                 if (gaugeConfig.textColor === undefined) { gaugeConfig.textColor = fgnd; }
                                 if (gaugeConfig.waveTextColor === undefined) { gaugeConfig.waveTextColor = fgnd; }
-
                                 if (item.options !== null) {
                                     //Object.assign(gaugeConfig, item.options'));
                                     Object.keys(item.options).forEach(function(key) {
@@ -134,6 +132,8 @@ angular.module('ui').directive('uiGauge', [ '$timeout', '$interpolate',
                                         gaugeOptions.noGradient = true;
                                     }
                                 }
+                                gaugeOptions.valueFontColor = item.gageoptions.valueFontColor[theme];
+                                gaugeOptions.labelFontColor = item.gageoptions.valueFontColor[theme];
                                 if (item.options !== null) {
                                     //Object.assign(gaugeOptions, item.options'));
                                     Object.keys(item.options).forEach(function(key) {

diff --git a/ui.js b/ui.js
@@ -568,9 +568,20 @@ function addBaseConfig(config) {
     updateUi();
 }
 
+function angularColorToHex(color) {
+    var angColorValues = { red: "#F44336", pink: "#E91E63", purple: "#9C27B0", deeppurple: "#673AB7",
+        indigo: "#3F51B5", blue: "#2196F3", lightblue: "#03A9F4", cyan: "#00BCD4", teal: "#009688",
+        green: "#4CAF50", lightgreen: "#8BC34A", lime: "#CDDC39", yellow: "#FFEB3B", amber: "#FFC107",
+        orange: "#FF9800", deeporange: "#FF5722", brown: "#795548", grey: "#9E9E9E", bluegrey: "#607D8B"};
+    return angColorValues[color.replace("-","").toLowerCase()];
+}
+
 function getTheme() {
     if (baseConfiguration && baseConfiguration.site && baseConfiguration.site.allowTempTheme && baseConfiguration.site.allowTempTheme === "none") {
-        return baseConfiguration.theme.angularTheme;
+        baseConfiguration.theme.name = "theme-custom";
+        baseConfiguration.theme.themeState["widget-backgroundColor"].value = angularColorToHex(baseConfiguration.theme.angularTheme.primary);
+        baseConfiguration.theme.themeState["widget-textColor"].value = (baseConfiguration.theme.angularTheme.palette === "dark") ? "#fff" : "#000";
+        return baseConfiguration.theme.themeState;
     }
     else if (baseConfiguration && baseConfiguration.hasOwnProperty("theme") && (typeof baseConfiguration.theme !== "undefined") ) {
         return baseConfiguration.theme.themeState;