todo and piechart components style fixes

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

@@ -1,33 +1,36 @@
 import {Injectable} from '@angular/core';
+import {BaThemeConfigProvider, colorHelper} from '../../../theme';
 
 @Injectable()
 export class PieChartService {
 
-   private _data = [
+  constructor(private _baConfig:BaThemeConfigProvider) {
-    {
+  }
-      color: 'rgba(255,255,255,0.4)',
-      description: 'New Visits',
-      stats: '57,820',
-      icon: 'person',
-    }, {
-      color: 'rgba(255,255,255,0.4)',
-      description: 'Purchases',
-      stats: '$ 89,745',
-      icon: 'money',
-    }, {
-      color: 'rgba(255,255,255,0.4)',
-      description: 'Active Users',
-      stats: '178,391',
-      icon: 'face',
-    }, {
-      color: 'rgba(255,255,255,0.4)',
-      description: 'Returned',
-      stats: '32,592',
-      icon: 'refresh',
-    }
-  ];
 
   getData() {
-    return this._data;
+    let pieColor = colorHelper.hexToRgbA(this._baConfig.get().colors.defaultText, 0.2);
+    return [
+      {
+        color: pieColor,
+        description: 'New Visits',
+        stats: '57,820',
+        icon: 'person',
+      }, {
+        color: pieColor,
+        description: 'Purchases',
+        stats: '$ 89,745',
+        icon: 'money',
+      }, {
+        color: pieColor,
+        description: 'Active Users',
+        stats: '178,391',
+        icon: 'face',
+      }, {
+        color: pieColor,
+        description: 'Returned',
+        stats: '32,592',
+        icon: 'refresh',
+      }
+    ];
   }
 }

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

@@ -1,4 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
+import {BaThemeConfigProvider} from '../../../theme';
 
 import {TodoService} from './todo.service';
 
@@ -11,37 +12,24 @@ import {TodoService} from './todo.service';
 })
 export class Todo {
 
-  public marks:Array<any>;
+  public transparent = this._baConfig.get().theme.blur;
+  public dashboardColors = this._baConfig.get().colors.dashboard;
+
   public todoList:Array<any>;
   public newTodoText:string = '';
 
-  constructor(private _todoService:TodoService) {
+  constructor(private _baConfig:BaThemeConfigProvider, private _todoService:TodoService) {
-    this.marks = this._todoService.getMarks();
     this.todoList = this._todoService.getTodoList();
+
+    this.todoList.forEach((item) => {
+      item.color = this._getRandomColor();
+    });
   }
 
   getNotDeleted() {
-    return this.todoList.filter((item:any) => {return !item.deleted})
+    return this.todoList.filter((item:any) => {
-  }
+      return !item.deleted
-
+    })
-  getMarkColor(id) {
-    return this.marks.filter((item) => { return item.id === id;} )[0].color || '';
-  }
-
-  changeColor(todo) {
-    for (var i = 0; i < this.marks.length; ++i) {
-      if (this.marks[i].id === todo.markId) {
-        var next = (i + 1 !== this.marks.length) ? i + 1 : 0;
-        todo.markId = this.marks[next].id;
-        return false;
-      }
-    }
-  }
-
-  blurOnEnter(event, item) {
-    if (event.which === 13) {
-      item.edit = false;
-    }
   }
 
   addToDoItem($event) {
@@ -50,10 +38,16 @@ export class Todo {
 
       this.todoList.unshift({
         text: this.newTodoText,
-        edit: false,
+        color: this._getRandomColor(),
-        markId: 0
       });
       this.newTodoText = '';
     }
   }
+
+  private _getRandomColor() {
+    let colors = Object.keys(this.dashboardColors).map(key => this.dashboardColors[key]);
+
+    var i = Math.floor(Math.random() * (colors.length - 1));
+    return colors[i];
+  }
 }

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

@@ -1,17 +1,19 @@
-<input type="text" value="" class="form-control task-todo" placeholder="Task to do.." (keyup)="addToDoItem($event)" [(ngModel)]="newTodoText"/>
+<div class="task-todo-container" [ngClass]="{'transparent': transparent}">
-<i (click)="addToDoItem($event)" class="add-item-icon ion-plus-round"></i>
+  <input type="text" value="" class="form-control task-todo" placeholder="Task to do.." (keyup)="addToDoItem($event)" [(ngModel)]="newTodoText"/>
-<div class="box-shadow-border"></div>
+  <i (click)="addToDoItem($event)" class="add-item-icon ion-plus-round"></i>
+  <div class="box-shadow-border"></div>
 
-<ul class="todo-list">
+  <ul class="todo-list">
-  <li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}" class="{{ getMarkColor(item.markId) }}"
+    <li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
-      (mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
+        (mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
 
-    <div class="blur-container"><div class="blur-box"></div></div>
+      <div class="blur-container"><div class="blur-box"></div></div>
-    <i class="mark"></i>
+      <i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
-    <label class="todo-checkbox custom-checkbox custom-input-success">
+      <label class="todo-checkbox custom-checkbox custom-input-success">
-      <input type="checkbox" [(ngModel)]="item.isChecked">
+        <input type="checkbox" [(ngModel)]="item.isChecked">
-      <span class="cut-with-dots">{{ item.text }}</span>
+        <span class="cut-with-dots">{{ item.text }}</span>
-    </label>
+      </label>
-    <i class="remove-todo ion-ios-close-empty" (click)="item.deleted = true"></i>
+      <i class="remove-todo ion-ios-close-empty" (click)="item.deleted = true"></i>
-  </li>
+    </li>
-</ul>
+  </ul>
+</div>

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

@@ -3,81 +3,19 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class TodoService {
 
-  private _marks = [
-    {
-      id: 0,
-      color: 'default'
-    },
-    {
-      id: 1,
-      color: 'primary'
-    },
-    {
-      id: 2,
-      color: 'success'
-    },
-    {
-      id: 3,
-      color: 'warning'
-    },
-    {
-      id: 4,
-      color: 'danger'
-    }
-  ];
-
   private _todoList = [
-    {
+    { text: 'Check me out' },
-      text: 'Check me out',
+    { text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro' },
-      edit: false,
+    { text: 'Ex has semper alterum, expetenda dignissim' },
-      markId: 4
+    { text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.' },
-    },
+    { text: 'Simul erroribus ad usu' },
-    {
+    { text: 'Ei cum solet appareat, ex est graeci mediocritatem' },
-      text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro',
+    { text: 'Get in touch with akveo team' },
-      edit: false,
+    { text: 'Write email to business cat' },
-      markId: 3
+    { text: 'Have fun with blur admin' },
-    },
+    { text: 'What do you think?' },
-    {
-      text: 'Ex has semper alterum, expetenda dignissim',
-      edit: false,
-      markId: 2
-    },
-    {
-      text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.',
-      edit: false,
-      markId: 1
-    },
-    {
-      text: 'Simul erroribus ad usu',
-      edit: false,
-      markId: 0
-    },
-    {
-      text: 'Ei cum solet appareat, ex est graeci mediocritatem',
-      edit: false,
-      markId: 4
-    },
-    {
-      text: 'Get in touch with akveo team',
-      edit: false,
-      markId: 1
-    },
-    {
-      text: 'Write email to business cat',
-      edit: false,
-      markId: 3
-    },
-    {
-      text: 'Have fun with blur admin',
-      edit: false,
-      markId: 2
-    },
   ];
 
-  getMarks() {
-    return this._marks;
-  }
-
   getTodoList() {
     return this._todoList;
   }