theme config provider

src/app/app.component.ts

@@ -2,7 +2,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
 import {RouteConfig} from '@angular/router-deprecated';
 
 import {Pages} from './pages';
-import {AppState} from "./app.state";
+import {AppState} from './app.state';
+import {BaThemeConfigProvider} from './theme';
 import './app.loader.ts';
 
 /*
@@ -12,7 +13,7 @@ import './app.loader.ts';
 @Component({
   selector: 'app',
   pipes: [],
-  providers: [],
+  providers: [BaThemeConfigProvider],
   encapsulation: ViewEncapsulation.None,
   styles: [require('normalize.css'), require('./app.scss')],
   template: `

src/app/theme/components/baCard/baCard.html

@@ -1,4 +1,4 @@
-<div  class="card {{cardType}} card-blur {{baCardClass || ''}}" zoom-in baCardBlur>
+<div baCardBlur class="card {{cardType}} {{baCardClass || ''}}" zoom-in>
     <div *ngIf="title" class="card-header clearfix">
         <h3 class="card-title">{{title}}</h3>
     </div>

src/app/theme/components/baCard/baCardBlur.directive.ts

@@ -1,6 +1,7 @@
-import {Directive, ElementRef, HostListener} from '@angular/core';
-import {BaCardBlurHelper} from './baCardBlurHelper.service';
+import {Directive, ElementRef, HostListener, HostBinding} from '@angular/core';
+import {BaThemeConfigProvider} from '../../../theme';
 
+import {BaCardBlurHelper} from './baCardBlurHelper.service';
 import {BgMetrics} from './bgMetrics';
 
 @Directive({
@@ -8,17 +9,26 @@ import {BgMetrics} from './bgMetrics';
   providers: [BaCardBlurHelper]
 })
 export class BaCardBlur {
+
+  @HostBinding('class.card-blur') isEnabled:boolean = false;
+
   private _bodyBgSize:BgMetrics;
 
-  constructor(private _baCardBlurHelper:BaCardBlurHelper, private _el:ElementRef) {
-    this._getBodyImageSizesOnBgLoad();
-    this._recalculateCardStylesOnBgLoad();
+  constructor(private _baThemeConfigProvider:BaThemeConfigProvider, private _baCardBlurHelper:BaCardBlurHelper, private _el:ElementRef) {
+    if (this._isEnabled()) {
+      this._getBodyImageSizesOnBgLoad();
+      this._recalculateCardStylesOnBgLoad();
+
+      this.isEnabled = true;
+    }
   }
 
   @HostListener('window:resize')
   _onWindowResize():void {
-    this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes();
-    this._recalculateCardStyle();
+    if (this._isEnabled()) {
+      this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes();
+      this._recalculateCardStyle();
+    }
   }
 
   private _getBodyImageSizesOnBgLoad():void {
@@ -40,4 +50,8 @@ export class BaCardBlur {
     this._el.nativeElement.style.backgroundSize = Math.round(this._bodyBgSize.width) + 'px ' + Math.round(this._bodyBgSize.height) + 'px';
     this._el.nativeElement.style.backgroundPosition = Math.floor(this._bodyBgSize.positionX) + 'px ' + Math.floor(this._bodyBgSize.positionY) + 'px';
   }
+
+  private _isEnabled() {
+    return this._baThemeConfigProvider.get().theme.blur;
+  }
 }

src/app/theme/index.ts

@@ -1 +1,2 @@
 export * from './theme.constants'
+export * from './theme.configProvider'

src/app/theme/sass/bootstrap-overrides/_card.scss

@@ -73,6 +73,7 @@ $card-header-font-size: 16px;
 
 .card-title {
   font-weight: $font-normal;
+  font-size: $card-header-font-size;
   text-transform: uppercase;
   opacity: 0.9;
 }

src/app/theme/theme.configProvider.ts

@@ -0,0 +1,73 @@
+import {Injectable} from '@angular/core';
+import {colorHelper} from './theme.constants';
+
+@Injectable()
+export class BaThemeConfigProvider {
+
+  basic = {
+    default: '#ffffff',
+    defaultText: '#666666',
+    border: '#dddddd',
+    borderDark: '#aaaaaa',
+  };
+
+  // main functional color scheme
+  colorScheme = {
+    primary: '#209e91',
+    info: '#2dacd1',
+    success: '#90b900',
+    warning: '#dfb81c',
+    danger: '#e85656',
+  };
+
+  // dashboard colors for charts
+  dashboardColors = {
+    blueStone: '#005562',
+    surfieGreen: '#0e8174',
+    silverTree: '#6eba8c',
+    gossip: '#b9f2a1',
+    white: '#10c4b5',
+  };
+
+  conf = {
+    theme: {
+      blur: false,
+    },
+    colors: {
+      default: this.basic.default,
+      defaultText: this.basic.defaultText,
+      border: this.basic.border,
+      borderDark: this.basic.borderDark,
+
+      primary: this.colorScheme.primary,
+      info: this.colorScheme.info,
+      success: this.colorScheme.success,
+      warning: this.colorScheme.warning,
+      danger: this.colorScheme.danger,
+
+      primaryLight: colorHelper.tint(this.colorScheme.primary, 30),
+      infoLight: colorHelper.tint(this.colorScheme.info, 30),
+      successLight: colorHelper.tint(this.colorScheme.success, 30),
+      warningLight: colorHelper.tint(this.colorScheme.warning, 30),
+      dangerLight: colorHelper.tint(this.colorScheme.danger, 30),
+
+      primaryDark: colorHelper.shade(this.colorScheme.primary, 15),
+      infoDark: colorHelper.shade(this.colorScheme.info, 15),
+      successDark: colorHelper.shade(this.colorScheme.success, 15),
+      warningDark: colorHelper.shade(this.colorScheme.warning, 15),
+      dangerDark: colorHelper.shade(this.colorScheme.danger, 15),
+
+      dashboard: {
+        blueStone: this.dashboardColors.blueStone,
+        surfieGreen: this.dashboardColors.surfieGreen,
+        silverTree: this.dashboardColors.silverTree,
+        gossip: this.dashboardColors.gossip,
+        white: this.dashboardColors.white,
+      },
+    }
+  };
+
+  get() {
+    return this.conf;
+  }
+}

src/app/theme/theme.constants.ts

@@ -1,12 +1,15 @@
 export const IMAGES_ROOT = 'assets/img/';
 
-export let shade = (color, weight) => {
-  return mix('#000000', color, weight);
-};
 
-export let tint = (color, weight) => {
-  return mix('#ffffff', color, weight);
-};
+export class colorHelper {
+  static shade = (color, weight) => {
+    return mix('#000000', color, weight);
+  };
+
+  static tint = (color, weight) => {
+    return mix('#ffffff', color, weight);
+  };
+}
 
 //SASS mix function
 export let mix = (color1, color2, weight) => {
@@ -14,13 +17,14 @@ export let mix = (color1, color2, weight) => {
   function d2h(d) {
     return d.toString(16);
   }
+
   // convert a hex value to decimal
   function h2d(h) {
     return parseInt(h, 16);
   }
 
   let result = "#";
-  for(let i = 1; i < 7; i += 2) {
+  for (let i = 1; i < 7; i += 2) {
     let color1Part = h2d(color1.substr(i, 2));
     let color2Part = h2d(color2.substr(i, 2));
     let resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
@@ -31,13 +35,13 @@ export let mix = (color1, color2, weight) => {
 
 export let hexToRgbA = (hex, alpha) => {
   var c;
-  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
-    c= hex.substring(1).split('');
-    if(c.length== 3){
-      c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    c = hex.substring(1).split('');
+    if (c.length == 3) {
+      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
     }
-    c= '0x'+c.join('');
-    return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + alpha + ')';
+    c = '0x' + c.join('');
+    return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')';
   }
   throw new Error('Bad Hex');
 };
@@ -70,23 +74,23 @@ export const layoutColors = {
   warning: colorScheme.warning,
   danger: colorScheme.danger,
 
-  primaryLight: tint(colorScheme.primary, 30),
-  infoLight: tint(colorScheme.info, 30),
-  successLight: tint(colorScheme.success, 30),
-  warningLight: tint(colorScheme.warning, 30),
-  dangerLight: tint(colorScheme.danger, 30),
+  primaryLight: colorHelper.tint(colorScheme.primary, 30),
+  infoLight: colorHelper.tint(colorScheme.info, 30),
+  successLight: colorHelper.tint(colorScheme.success, 30),
+  warningLight: colorHelper.tint(colorScheme.warning, 30),
+  dangerLight: colorHelper.tint(colorScheme.danger, 30),
 
-  primaryDark: shade(colorScheme.primary, 15),
-  infoDark: shade(colorScheme.info, 15),
-  successDark: shade(colorScheme.success, 15),
-  warningDark: shade(colorScheme.warning, 15),
-  dangerDark: shade(colorScheme.danger, 15),
+  primaryDark: colorHelper.shade(colorScheme.primary, 15),
+  infoDark: colorHelper.shade(colorScheme.info, 15),
+  successDark: colorHelper.shade(colorScheme.success, 15),
+  warningDark: colorHelper.shade(colorScheme.warning, 15),
+  dangerDark: colorHelper.shade(colorScheme.danger, 15),
 
-  primaryBg: tint(colorScheme.primary, 20),
-  infoBg: tint(colorScheme.info, 20),
-  successBg: tint(colorScheme.success, 20),
-  warningBg: tint(colorScheme.warning, 20),
-  dangerBg: tint(colorScheme.danger, 20),
+  primaryBg: colorHelper.tint(colorScheme.primary, 20),
+  infoBg: colorHelper.tint(colorScheme.info, 20),
+  successBg: colorHelper.tint(colorScheme.success, 20),
+  warningBg: colorHelper.tint(colorScheme.warning, 20),
+  dangerBg: colorHelper.tint(colorScheme.danger, 20),
 
   default: '#ffffff',
   defaultText: '#666666',
@@ -99,16 +103,16 @@ export const layoutColors = {
     gossip: bgColorPalette.gossip,
     white: bgColorPalette.white,
 
-    blueStoneDark: shade(bgColorPalette.blueStone, 15),
-    surfieGreenDark: shade(bgColorPalette.surfieGreen, 15),
-    silverTreeDark: shade(bgColorPalette.silverTree, 15),
-    gossipDark: shade(bgColorPalette.gossip, 15),
-    whiteDark: shade(bgColorPalette.white, 5),
+    blueStoneDark: colorHelper.shade(bgColorPalette.blueStone, 15),
+    surfieGreenDark: colorHelper.shade(bgColorPalette.surfieGreen, 15),
+    silverTreeDark: colorHelper.shade(bgColorPalette.silverTree, 15),
+    gossipDark: colorHelper.shade(bgColorPalette.gossip, 15),
+    whiteDark: colorHelper.shade(bgColorPalette.white, 5),
   }
 };
 
 let _chartColors = [];
-let _colorsForChart = [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg];
+let _colorsForChart = [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg];
 
 _colorsForChart.forEach((color) => {
   _chartColors.push({