settings page - add dots

Author: Di Wang

src/app/dashboard/root/root.component.css

@@ -11,8 +11,13 @@
  width: 260px;
  position: fixed;
  height: 100%;
- background-color: #D80B0B;
+ /*background-color: #D80B0B;*/
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+ -webkit-transition: all 500ms;
+ -moz-transition: all 500ms;
+ -ms-transition: all 500ms;
+ -o-transition: all 500ms;
+ transition: all 500ms;
 }
 
 .main-panel{

src/app/dashboard/root/root.component.html

@@ -1,5 +1,5 @@
 <div class="wrapper">
- <div class="sidebar-panel" id="sidebar">
+ <div class="sidebar-panel" id="sidebar" [style.background-color]="backgroundColor">
  <app-sidebar></app-sidebar>
  <div class="sidebar-background" [style.background-image]="'url(../assets/img/sidebar-' + id + '.jpg)'"></div>
  </div>

src/app/dashboard/root/root.component.ts

@@ -8,18 +8,23 @@ import { SettingsService } from '../../services/settings.service';
 })
 export class RootComponent implements OnInit, OnDestroy {
  public id: number;
- constructor(public sidebarService: SettingsService) {
- this.id = sidebarService.getSidebarIndex();
+ public backgroundColor: string;
+ constructor(public settingService: SettingsService) {
+ this.id = settingService.getSidebarImageIndex();
+ this.backgroundColor = settingService.getSidebarColor();
  }
 
  ngOnInit() {
- this.sidebarService.sidebarIndexUpdate.subscribe((id: number) => {
+ this.settingService.sidebarImageIndexUpdate.subscribe((id: number) => {
  this.id = id;
- console.log(id);
+ });
+ this.settingService.sidebarColorUpdate.subscribe((color: string) => {
+ this.backgroundColor = color;
  });
  }
 
  ngOnDestroy() {
- this.sidebarService.sidebarIndexUpdate.unsubscribe();
+ this.settingService.sidebarImageIndexUpdate.unsubscribe();
+ this.settingService.sidebarColorUpdate.unsubscribe();
  }
 }

src/app/dashboard/settings/settings.component.css

@@ -40,6 +40,7 @@
  width: 30px;
  height: 30px;
  margin: 0 10px;
+ cursor: pointer;
 }
 
 .purple{
@@ -50,6 +51,10 @@
  background-color: #00bcd4;
 }
 
+.dodgerblue{
+ background-color: dodgerblue;
+}
+
 .green{
  background-color: #4caf50;
 }

src/app/dashboard/settings/settings.component.html

@@ -4,22 +4,22 @@
  <div class="col-md-10 col-md-offset-1">
  <h4 class="text-center text-uppercase">Sidebar Filters</h4>
  <div class="col-md-12 dot-row">
- <div class="dot purple"></div>
- <div class="dot blue"></div>
- <div class="dot green"></div>
- <div class="dot orange"></div>
- <div class="dot red"></div>
- <div class="dot white"></div>
- <div class="dot rose"></div>
+ <div class="dot purple" (click)="filterChooseClick(0)"></div>
+ <div class="dot blue" (click)="filterChooseClick(1)"></div>
+ <div class="dot green" (click)="filterChooseClick(2)"></div>
+ <div class="dot orange" (click)="filterChooseClick(3)"></div>
+ <div class="dot red" (click)="filterChooseClick(4)"></div>
+ <div class="dot white" (click)="filterChooseClick(5)"></div>
+ <div class="dot rose" (click)="filterChooseClick(6)"></div>
  </div>
  </div>
 
  <div class="col-md-10 col-md-offset-1">
  <h4 class="text-center text-uppercase">Sidebar Background</h4>
  <div class="col-md-12 dot-row">
- <div class="dot red"></div>
- <div class="dot white"></div>
- <div class="dot black"></div>
+ <div class="dot red" (click)="bgColorChooseClick('#D80B0B')"></div>
+ <div class="dot dodgerblue" (click)="bgColorChooseClick('dodgerblue')"></div>
+ <div class="dot black" (click)="bgColorChooseClick('#000')"></div>
  </div>
  </div>
 

src/app/dashboard/settings/settings.component.ts

@@ -8,21 +8,28 @@ import { SettingsService } from '../../services/settings.service';
 })
 export class SettingsComponent implements OnInit {
 
- constructor(public sidebarService: SettingsService) { }
+ constructor(public settingService: SettingsService) { }
 
  ngOnInit() {
- const defaultId = this.sidebarService.getSidebarIndex();
+ const defaultId = this.settingService.getSidebarImageIndex();
  const sideBtns: HTMLCollection = document.getElementsByClassName('sidebar-btn');
  sideBtns[defaultId - 1].children[0].className = sideBtns[defaultId - 1].children[0].className + ' active';
  }
 
  bgChooseClick(id) {
- this.sidebarService.setSideBarIndex(id);
+ this.settingService.setSidebarImageIndex(id);
  const sideBtns: HTMLCollection = document.getElementsByClassName('sidebar-btn');
  for (let i = 0; i < sideBtns.length; i++){
  sideBtns[i].children[0].className = sideBtns[i].children[0].className.replace(' active', '');
  }
  sideBtns[id - 1].children[0].className = sideBtns[id - 1].children[0].className + ' active';
  }
 
+ filterChooseClick(id) {
+ console.log(id);
+ }
+
+ bgColorChooseClick(color) {
+ this.settingService.setSidebarColor(color);
+ }
 }

src/app/services/settings.service.ts

@@ -2,16 +2,34 @@ import { Injectable, EventEmitter } from '@angular/core';
 
 @Injectable()
 export class SettingsService {
- public sidebarIndex = 1;
- public sidebarIndexUpdate: EventEmitter<number> = new EventEmitter();
+ public sidebarImageIndex = 1;
+ public sidebarImageIndexUpdate: EventEmitter<number> = new EventEmitter();
+ public sidebarFilter = '#fff';
+ public sidebarFilterUpdate: EventEmitter<string> = new EventEmitter();
+ public sidebarColor = '#D80B0B';
+ public sidebarColorUpdate: EventEmitter<string> = new EventEmitter();
 
  constructor() { }
 
- getSidebarIndex() {
- return this.sidebarIndex;
+ getSidebarImageIndex(): number {
+ return this.sidebarImageIndex;
  }
- setSideBarIndex(id) {
- this.sidebarIndex = id;
- this.sidebarIndexUpdate.emit(this.sidebarIndex);
+ setSidebarImageIndex(id) {
+ this.sidebarImageIndex = id;
+ this.sidebarImageIndexUpdate.emit(this.sidebarImageIndex);
+ }
+ getSidebarFilter(): string {
+ return this.sidebarFilter;
+ }
+ setSidebarFilter(color: string) {
+ this.sidebarFilter = color;
+ this.sidebarFilterUpdate.emit(this.sidebarFilter);
+ }
+ getSidebarColor(): string {
+ return this.sidebarColor;
+ }
+ setSidebarColor(color: string) {
+ this.sidebarColor = color;
+ this.sidebarColorUpdate.emit(this.sidebarColor);
  }
 }