settings page - add white bg

Author: Di Wang

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

@@ -19,6 +19,7 @@ <h4 class="text-center text-uppercase">Sidebar Background</h4>
  <div class="col-md-12 dot-row">
  <div class="dot red" (click)="bgColorChooseClick('#D80B0B')"></div>
  <div class="dot dodgerblue" (click)="bgColorChooseClick('dodgerblue')"></div>
+ <div class="dot white" (click)="bgColorChooseClick('#fff')"></div>
  <div class="dot black" (click)="bgColorChooseClick('#000')"></div>
  </div>
  </div>

src/app/sidebar/sidebar.component.css

@@ -13,12 +13,11 @@
  left: 13px;
 }
 
-.logo:after{
+.divider{
  content: '';
- position: absolute;
- bottom: 0;
- right: 15px;
+ position: relative;
  height: 1px;
+ left: 15px;
  width: calc(100% - 30px);
  background-color: rgba(255, 255, 255, 0.5);
 }
@@ -62,7 +61,6 @@
 
 .nav li a span{
  margin-left: 20px;
- font-weight: 100;
 }
 
 .active a, .active a:hover{

src/app/sidebar/sidebar.component.html

@@ -1,12 +1,13 @@
-<div class="logo text-uppercase">
+<div class="logo text-uppercase" [style.color]="normalFontColor">
  <img src="../../assets/img/angular2-logo.png" class="logo-img" alt="logo"/>
  Dashboard Pro
 </div>
+<div class="divider" [style.background-color]="dividerBgColor"></div>
 <div class="sidebar-wrapper">
  <div class="nav-container">
  <ul class="nav">
  <li *ngFor="let menuItem of menuItems" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive? 'active' : ''" [routerLinkActiveOptions]="{exact: true}">
- <a [routerLink]="[menuItem.path]" [style.background-color]="rla.isActive? color : 'transparent'" [style.color]="rla.isActive? activeFontColor : 'rgba(255,255,255,.8)'">
+ <a [routerLink]="[menuItem.path]" [style.background-color]="rla.isActive? color : 'transparent'" [style.color]="rla.isActive? activeFontColor : normalFontColor">
  <i class="material-icons">{{menuItem.icon}}</i>
  <span>{{menuItem.title}}</span>
  </a>

src/app/sidebar/sidebar.component.ts

@@ -11,24 +11,37 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
  public color: string;
  public menuItems: object;
  public activeFontColor: string;
- constructor(public setingsService: SettingsService) {
+ public normalFontColor: string;
+ public dividerBgColor: string;
+ constructor(public settingsService: SettingsService) {
  this.menuItems = ROUTES;
  this.activeFontColor = 'rgba(0,0,0,.6)';
+ this.normalFontColor = 'rgba(255,255,255,.8)';
+ this.dividerBgColor = 'rgba(255, 255, 255, 0.5)';
  }
 
  ngOnInit() {
- this.color = this.setingsService.getSidebarFilter();
- this.setingsService.sidebarFilterUpdate.subscribe((filter: string) => {
+ this.color = this.settingsService.getSidebarFilter();
+ this.settingsService.sidebarFilterUpdate.subscribe((filter: string) => {
  this.color = filter;
  if (filter === '#fff') {
  this.activeFontColor = 'rgba(0,0,0,.6)';
  }else {
  this.activeFontColor = 'rgba(255,255,255,.8)';
  }
  });
+ this.settingsService.sidebarColorUpdate.subscribe((color: string) => {
+ if (color === '#fff') {
+ this.normalFontColor = 'rgba(0,0,0,.6)';
+ this.dividerBgColor = 'rgba(0,0,0,.1)';
+ }else {
+ this.normalFontColor = 'rgba(255,255,255,.8)';
+ this.dividerBgColor = 'rgba(255, 255, 255, 0.5)';
+ }
+ });
  }
  ngOnDestroy() {
- this.setingsService.sidebarFilterUpdate.unsubscribe();
+ this.settingsService.sidebarFilterUpdate.unsubscribe();
  }
 
  ngAfterViewInit() {