playing with colors

src/app/pages/dashboard/lineChart/lineChart.service.ts

@@ -10,7 +10,7 @@ export class LineChartService {
   getData() {
 
     var layoutColors = this._baConfig.get().colors;
-    var graphColor = this._baConfig.get().theme.blur ? '#000000' : layoutColors.primary;
+    var graphColor = this._baConfig.get().colors.custom.dashboardLineChart;
 
     return {
       type: 'serial',
@@ -84,7 +84,7 @@ export class LineChartService {
           id: 'g1',
           bullet: 'none',
           useLineColorForBulletBorder: true,
-          lineColor: colorHelper.hexToRgbA(graphColor, 0.5),
+          lineColor: colorHelper.hexToRgbA(graphColor, 0.15),
           lineThickness: 1,
           negativeLineColor: layoutColors.danger,
           type: 'smoothedLine',

src/app/pages/dashboard/todo/todo.component.ts

@@ -12,7 +12,6 @@ import {TodoService} from './todo.service';
 })
 export class Todo {
   
-  public transparent = this._baConfig.get().theme.blur;
   public dashboardColors = this._baConfig.get().colors.dashboard;
 
   public todoList:Array<any>;

src/app/pages/dashboard/todo/todo.html

@@ -1,4 +1,4 @@
-<div class="task-todo-container" [ngClass]="{'transparent': transparent}">
+<div class="task-todo-container">
   <input type="text" value="" class="form-control task-todo" placeholder="Task to do.." (keyup)="addToDoItem($event)" [(ngModel)]="newTodoText"/>
   <i (click)="addToDoItem($event)" class="add-item-icon ion-plus-round"></i>
   <div class="box-shadow-border"></div>

src/app/pages/dashboard/todo/todo.scss

@@ -99,7 +99,9 @@ label.todo-checkbox {
   display: none;
 }
 
-.task-todo-container.transparent {
+.ng2, .blur {
+
+  .task-todo-container {
     .todo-panel.panel {
       color: white;
       opacity: 0.9;
@@ -132,7 +134,7 @@ label.todo-checkbox {
         border: none;
         font-weight: $font-light;
 
-      .blur-container{
+        .blur-container {
           height: 40px;
           position: absolute;
           width: calc(100% + 40px);;
@@ -140,13 +142,13 @@ label.todo-checkbox {
           left: -25px;
           overflow-y: hidden;
         }
-      &:hover{
+        &:hover {
-        .blur-container{
+          .blur-container {
             box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
           }
           .blur-box {
             height: 100%;
-          background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
+            background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
             -webkit-filter: blur(3px);
           }
         }
@@ -182,11 +184,11 @@ label.todo-checkbox {
       }
     }
 
-  .box-shadow-border{
+    .box-shadow-border {
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
       width: calc(100% + 44px);
       margin-left: -22px;
     }
-
+  }
 }

src/app/pages/dashboard/trafficChart/trafficChart.component.ts

@@ -15,11 +15,9 @@ import {TrafficChartService} from './trafficChart.service';
 export class TrafficChart {
 
   public doughnutData: Array<Object>;
-  public transparent:boolean = false;
 
   constructor(private trafficChartService:TrafficChartService) {
     this.doughnutData = trafficChartService.getData();
-    this.transparent = trafficChartService.getTransparent();
   }
 
   ngAfterViewInit() {

src/app/pages/dashboard/trafficChart/trafficChart.html

@@ -1,4 +1,4 @@
-<div class="channels-block" [ngClass]="{'transparent': transparent}">
+<div class="channels-block">
 
   <div class="chart-bg"></div>
   <div class="traffic-chart" id="trafficChart">

src/app/pages/dashboard/trafficChart/trafficChart.scss

@@ -5,10 +5,11 @@
   position: relative;
 }
 
-.channels-block.transparent {
+.ng2, .blur {
+  .channels-block {
     .traffic-chart canvas{
-    border: 10px solid rgba(0,0,0,0.35);
+      border: 15px solid rgba(0,0,0,0.2);
-    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
+      //box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
       border-radius: 150px;
     }
 
@@ -18,9 +19,10 @@
       height: 180px;
       left: 60px;
       top: 60px;
-    background-color: rgba(0,0,0,0.35);
+      background-color: rgba(0,0,0,0.4);
       border-radius: 100px;
     }
+  }
 }
 
 .channels-info {

src/app/pages/dashboard/trafficChart/trafficChart.service.ts

@@ -49,8 +49,4 @@ export class TrafficChartService {
       },
     ];
   }
-
-  getTransparent() {
-    return this._baConfig.get().theme.blur;
-  }
 }

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

@@ -53,6 +53,6 @@ export class BaCardBlur {
   }
 
   private _isEnabled() {
-    return this._baConfig.get().theme.blur;
+    return this._baConfig.get().theme.name == 'blur';
   }
 }

src/app/theme/directives/baThemeRun/baThemeRun.directive.ts

@@ -7,23 +7,29 @@ import {BaThemeConfigProvider, isMobile} from '../../../theme';
 })
 export class BaThemeRun {
 
-  @HostBinding('class.blur-theme') isBlur:boolean = false;
+  private _classes:Array<string> = [];
-  @HostBinding('class.mobile') isMobile:boolean = false;
+  @HostBinding('class') classesString:string;
 
   constructor(private _baConfig:BaThemeConfigProvider) {
   }
 
   public ngOnInit():void {
-    this._assignBlur();
+    this._assignTheme();
     this._assignMobile();
   }
 
-  // TODO: assign any theme class, not only hardcoded blur
+  private _assignTheme():void {
-  private _assignBlur():void {
+    this._addClass(this._baConfig.get().theme.name);
-    this.isBlur = this._baConfig.get().theme.blur;
   }
 
   private _assignMobile():void {
-    this.isMobile = isMobile();
+    if (isMobile()) {
+      this._addClass('mobile');
+    }
+  }
+
+  private _addClass(cls:string) {
+    this._classes.push(cls);
+    this.classesString = this._classes.join(' ');
   }
 }

src/app/theme/sass/conf/colorSchemes/_ng2.scss

@@ -26,8 +26,8 @@ $bootstrap-panel-header-border: none;
 $bootstrap-panel-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
 $mail-box: whitesmoke;
 $auth-panel-background: #ffffff;
-$progress-background: rgba(#000000, 0.07);
+$progress-background: rgba(0,0,0, 0.15);
-$progress-default: rgba(#000000, 0.15);
+$progress-default: rgba($default-text, 0.95);
 
 $primary: #00abff !default;
 $info: #40daf1 !default;

src/app/theme/theme.configProvider.ts

@@ -31,7 +31,7 @@ export class BaThemeConfigProvider {
 
   conf = {
     theme: {
-      blur: false,
+      name: 'ng2',
     },
     colors: {
       default: this.basic.default,
@@ -64,6 +64,10 @@ export class BaThemeConfigProvider {
         gossip: this.dashboardColors.gossip,
         white: this.dashboardColors.white,
       },
+
+      custom: {
+        dashboardLineChart: '#fff',
+      }
     }
   };