Theming reorg. Extracted ngGauges and added to each existing Themes

mxtommy · Apr 20, 2020 · 3ced965 · 3ced965
1 parent 99e3669
commit 3ced965
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 37 deletions.
diff --git a/.angulardoc.json b/.angulardoc.json
@@ -0,0 +1,4 @@
+{
+  "repoId": "609324d9-e673-438b-bc4d-3b73014f8dbd",
+  "lastSync": 0
+}
diff --git a/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.scss b/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.scss
@@ -2,36 +2,33 @@
 
 @mixin widget-ngGauge-linear-theme($theme) {
 
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
+  $ngGauge: map-get($theme, ngGauge);
+  $themeForeground: map-get($theme, foreground);
 
   app-widget-gauge-ng-linear {
       .primary {
-        color: mat-color($primary, 300);
+        color: mat-color($ngGauge, primary-gaugeFaceLight);
       }
       .accent {
-        color: mat-color($accent, 300);
+        color: mat-color($ngGauge, accent-gaugeFaceLight);
       }
       .warn {
-        color: mat-color($warn, 300);
+        color: mat-color($ngGauge, warn-gaugeFaceLight);
       }
       .primaryDark {
-        color: mat-color($primary, 900);
+        color: mat-color($ngGauge, primary-gaugeFaceDark);
       }
       .accentDark {
-        color: mat-color($accent, 900);
+        color: mat-color($ngGauge, accent-gaugeFaceDark);
       }
       .warnDark {
-        color: mat-color($warn, 900);
+        color: mat-color($ngGauge, warn-gaugeFaceDark);
       }
       .background {
-        color: mat-color($foreground, divider);
+        color: mat-color($themeForeground, divider);
       }
       .text {
-        color: mat-color($foreground, text);
+        color: mat-color($themeForeground, text);
       }
   }
 }

diff --git a/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.scss b/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.scss
@@ -2,36 +2,33 @@
 
 @mixin widget-ngGauge-radial-theme($theme) {
 
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
+  $ngGauge: map-get($theme, ngGauge);
+  $themeForeground: map-get($theme, foreground);
 
   app-widget-gauge-ng-radial {
     .primary {
-      color: mat-color($primary, 300);
+      color: mat-color($ngGauge, primary-gaugeFaceLight);
     }
     .accent {
-      color: mat-color($accent, 300);
+      color: mat-color($ngGauge, accent-gaugeFaceLight);
     }
     .warn {
-      color: mat-color($warn, 300);
+      color: mat-color($ngGauge, warn-gaugeFaceLight);
     }
     .primaryDark {
-      color: mat-color($primary, 900);
+      color: mat-color($ngGauge, primary-gaugeFaceDark);
     }
     .accentDark {
-      color: mat-color($accent, 900);
+      color: mat-color($ngGauge, accent-gaugeFaceDark);
     }
     .warnDark {
-      color: mat-color($warn, 900);
+      color: mat-color($ngGauge, warn-gaugeFaceDark);
     }
     .background {
-      color: mat-color($foreground, divider);
+      color: mat-color($themeForeground, divider);
     }
     .text {
-      color: mat-color($foreground, text);
+      color: mat-color($themeForeground, text);
     }
   }
 }

diff --git a/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts b/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts
@@ -168,7 +168,7 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon
   }
 
   updateGaugeConfig(){
-    //// Hack to get Theme colors using hidden minxin, DIV and @ViewChild
+    //// Hack to get Theme colors using hidden mixin, DIV and @ViewChild
     let themePaletteColor = "";
     let themePaletteDarkColor = "";
 
@@ -198,15 +198,15 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon
         themePaletteDarkColor = getComputedStyle(this.accentDarkElement.nativeElement).color;
         this.gaugeOptions.colorBarProgress = themePaletteColor;
         this.gaugeOptions.colorNeedle = themePaletteDarkColor;
-        this.gaugeOptions.colorNeedleEnd = themePaletteDarkColor
+        this.gaugeOptions.colorNeedleEnd = themePaletteDarkColor;
         break;
 
       case "warn":
         themePaletteColor = getComputedStyle(this.warnElement.nativeElement).color;
         themePaletteDarkColor = getComputedStyle(this.warnDarkElement.nativeElement).color;
         this.gaugeOptions.colorBarProgress = themePaletteColor;
         this.gaugeOptions.colorNeedle = themePaletteDarkColor;
-        this.gaugeOptions.colorNeedleEnd = themePaletteDarkColor
+        this.gaugeOptions.colorNeedleEnd = themePaletteDarkColor;
         break;
 
       default:

diff --git a/src/themes/darkBlue.scss b/src/themes/darkBlue.scss
@@ -64,6 +64,24 @@ $mat-darkBlue-accent: (
   )
 );
 
+$darkBlueTheme-primary: mat-palette($mat-darkBlue-primary);
+$darkBlueTheme-accent:  mat-palette($mat-darkBlue-accent);
+
+// The warn palette is optional (defaults to red).
+$darkBlueTheme-warn:    mat-palette($mat-red);
+
+// Palette for widget-gauge-ng-linear and widget-gauge-ng-radial instruments
+// Pull from mat-palettes or use custom color ie. #e3ff43
+$mat-ngGauge: (
+    primary-gaugeFaceLight: mat-color($darkBlueTheme-primary, 300),
+    primary-gaugeFaceDark: mat-color($darkBlueTheme-primary, 900),
+    accent-gaugeFaceLight: mat-color($darkBlueTheme-accent, 300),
+    accent-gaugeFaceDark: mat-color($darkBlueTheme-accent, 900),
+    warn-gaugeFaceLight: mat-color($darkBlueTheme-warn, 300),
+    warn-gaugeFaceDark: mat-color($darkBlueTheme-warn, 900),
+);
+
+// Palette for widget-wind - wind instrument
 $mat-wind: (
   boat-background: #c7c7c7,
   heading-background: #c5c5c5,
@@ -76,13 +94,6 @@ $mat-wind: (
   starboard: #1fce04,
 );
 
-
-$darkBlueTheme-primary: mat-palette($mat-darkBlue-primary);
-$darkBlueTheme-accent:  mat-palette($mat-darkBlue-accent);
-
-// The warn palette is optional (defaults to red).
-$darkBlueTheme-warn:    mat-palette($mat-red);
-
 //get our custom foreground/background
 $darkBlueTheme-foreground: custom-theme-dark-foreground(#a5e1fd);
 $darkBlueTheme-background: custom-theme-light-background($mat-darkBlue-primary, 500);
@@ -91,5 +102,5 @@ $darkBlueTheme-background: custom-theme-light-background($mat-darkBlue-primary,
 $darkBlueTheme-temp-dark: mat-dark-theme($darkBlueTheme-primary, $darkBlueTheme-accent, $darkBlueTheme-warn);
 
 //merge with custom foreground
-$darkBlueTheme-dark: map-merge($darkBlueTheme-temp-dark, (background: $darkBlueTheme-background, foreground: $darkBlueTheme-foreground, wind: $mat-wind));
+$darkBlueTheme-dark: map-merge($darkBlueTheme-temp-dark, (background: $darkBlueTheme-background, foreground: $darkBlueTheme-foreground, wind: $mat-wind, ngGauge: $mat-ngGauge));