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

@@ -11,8 +11,7 @@ import {TodoService} from './todo.service';
   template: require('./todo.html')
 })
 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,94 +99,96 @@ label.todo-checkbox {
   display: none;
 }
 
-.task-todo-container.transparent {
-  .todo-panel.panel {
-    color: white;
-    opacity: 0.9;
-  }
-  input.task-todo {
-    color: white;
-    width: calc(100% - 25px);
-    border-radius: 0;
-    border: none;
-    background: transparent;
-    &:focus {
-      outline: none;
-      background-color: transparent;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+.ng2, .blur {
+
+  .task-todo-container {
+    .todo-panel.panel {
+      color: white;
+      opacity: 0.9;
     }
-  }
-  .add-item-icon {
-    display: block;
-    float: right;
-    margin-top: -45px;
-    margin-right: 5px;
-    font-size: 25px;
-    cursor: pointer;
-  }
-
-  ul.todo-list {
-    li {
-      margin: 0;
+    input.task-todo {
+      color: white;
+      width: calc(100% - 25px);
+      border-radius: 0;
       border: none;
-      font-weight: $font-light;
+      background: transparent;
+      &:focus {
+        outline: none;
+        background-color: transparent;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+      }
+    }
+    .add-item-icon {
+      display: block;
+      float: right;
+      margin-top: -45px;
+      margin-right: 5px;
+      font-size: 25px;
+      cursor: pointer;
+    }
 
-      .blur-container{
-        height: 40px;
-        position: absolute;
-        width: calc(100% + 40px);;
-        top: 0;
-        left: -25px;
-        overflow-y: hidden;
-      }
-      &:hover{
-        .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%);
-          -webkit-filter: blur(3px);
-        }
-      }
-      i.remove-todo {
-        color: white;
-        opacity: 0.4;
-        &:hover {
-          color: white;
-          opacity: 0.95;
-        }
-      }
-      i.mark {
-        min-width: 40px;
-        display: none;
-      }
-      label.todo-checkbox > span {
-        &:before {
+    ul.todo-list {
+      li {
+        margin: 0;
+        border: none;
+        font-weight: $font-light;
+
+        .blur-container {
+          height: 40px;
           position: absolute;
-          color: $content-text;
-          content: '\f10c';
-          float: none;
-          margin-right: 6px;
-          transition: none;
+          width: calc(100% + 40px);;
+          top: 0;
+          left: -25px;
+          overflow-y: hidden;
+        }
+        &:hover {
+          .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%);
+            -webkit-filter: blur(3px);
+          }
+        }
+        i.remove-todo {
+          color: white;
+          opacity: 0.4;
+          &:hover {
+            color: white;
+            opacity: 0.95;
+          }
+        }
+        i.mark {
+          min-width: 40px;
+          display: none;
         }
-      }
-      &.checked {
         label.todo-checkbox > span {
           &:before {
-            content: '\f00c';
+            position: absolute;
+            color: $content-text;
+            content: '\f10c';
+            float: none;
+            margin-right: 6px;
+            transition: none;
+          }
+        }
+        &.checked {
+          label.todo-checkbox > span {
+            &:before {
+              content: '\f00c';
+            }
           }
         }
       }
     }
-  }
 
-  .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;
+    .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,21 +5,23 @@
   position: relative;
 }
 
-.channels-block.transparent {
-  .traffic-chart canvas{
-    border: 10px solid rgba(0,0,0,0.35);
-    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
-    border-radius: 150px;
-  }
+.ng2, .blur {
+  .channels-block {
+    .traffic-chart canvas{
+      border: 15px solid rgba(0,0,0,0.2);
+      //box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
+      border-radius: 150px;
+    }
 
-  .chart-bg{
-    position: absolute;
-    width: 180px;
-    height: 180px;
-    left: 60px;
-    top: 60px;
-    background-color: rgba(0,0,0,0.35);
-    border-radius: 100px;
+    .chart-bg{
+      position: absolute;
+      width: 180px;
+      height: 180px;
+      left: 60px;
+      top: 60px;
+      background-color: rgba(0,0,0,0.4);
+      border-radius: 100px;
+    }
   }
 }
 

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;
-  @HostBinding('class.mobile') isMobile:boolean = false;
+  private _classes:Array<string> = [];
+  @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 _assignBlur():void {
-    this.isBlur = this._baConfig.get().theme.blur;
+  private _assignTheme():void {
+    this._addClass(this._baConfig.get().theme.name);
   }
 
   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-default: rgba(#000000, 0.15);
+$progress-background: rgba(0,0,0, 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',
+      }
     }
   };