settings page - add dots

Author: Di Wang

src/app/app.module.ts

@@ -28,7 +28,7 @@ import { SettingsComponent } from './dashboard/settings/settings.component';
 import { PriceTableComponent } from './dashboard/component/pricetable/pricetable.component';
 import { PanelsComponent } from './dashboard/component/panels/panels.component';
 
-import { SidebarBgServiceService } from './services/sidebar-bg-service.service';
+import { SettingsService } from './services/settings.service';
 
 @NgModule({
  declarations: [
@@ -65,7 +65,7 @@ import { SidebarBgServiceService } from './services/sidebar-bg-service.service';
  MdMenuModule,
  MdCheckboxModule
  ],
- providers: [SidebarBgServiceService],
+ providers: [SettingsService],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { SidebarBgServiceService } from '../../services/sidebar-bg-service.service';
+import { SettingsService } from '../../services/settings.service';
 
 @Component({
  selector: 'app-root',
@@ -8,7 +8,7 @@ import { SidebarBgServiceService } from '../../services/sidebar-bg-service.servi
 })
 export class RootComponent implements OnInit, OnDestroy {
  public id: number;
- constructor(public sidebarService: SidebarBgServiceService) {
+ constructor(public sidebarService: SettingsService) {
  this.id = sidebarService.getSidebarIndex();
  }
 

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

@@ -28,3 +28,48 @@
 .sidebar-btn .active{
  border-color: #00bbff;
 }
+
+.dot-row{
+ display: flex;
+ justify-content: center;
+ margin: 20px 0 40px 0;
+}
+
+.dot{
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ margin: 0 10px;
+}
+
+.purple{
+ background-color: #9c27b0;
+}
+
+.blue{
+ background-color: #00bcd4;
+}
+
+.green{
+ background-color: #4caf50;
+}
+
+.orange{
+ background-color: #ff9800;
+}
+
+.red{
+ background-color: #f44336;
+}
+
+.white{
+ background-color: rgba(200, 200, 200, 0.2);
+}
+
+.rose{
+ background-color: #e91e63;
+}
+
+.black{
+ background-color: #000;
+}

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

@@ -2,6 +2,29 @@
  <app-navbar title="Settings"></app-navbar>
  <div class="row" style="margin-top: 30px">
  <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>
+ </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>
+ </div>
+
+ <div class="col-md-10 col-md-offset-1">
+ <h4 class="text-uppercase text-center">SideBar Background Image</h4>
  <div class="col-md-3 col-sm-3 col-xs-6">
  <button class="sidebar-btn" (click)="bgChooseClick(1)"><img src="../../../assets/img/sidebar-1.jpg" alt="sidebar-bg" class="sidebar-bg"/></button>
  </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { SidebarBgServiceService } from '../../services/sidebar-bg-service.service';
+import { SettingsService } from '../../services/settings.service';
 
 @Component({
  selector: 'app-settings',
@@ -8,7 +8,7 @@ import { SidebarBgServiceService } from '../../services/sidebar-bg-service.servi
 })
 export class SettingsComponent implements OnInit {
 
- constructor(public sidebarService: SidebarBgServiceService) { }
+ constructor(public sidebarService: SettingsService) { }
 
  ngOnInit() {
  const defaultId = this.sidebarService.getSidebarIndex();

src/app/services/sidebar-bg-service.service.ts renamed to src/app/services/settings.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, EventEmitter } from '@angular/core';
 
 @Injectable()
-export class SidebarBgServiceService {
+export class SettingsService {
  public sidebarIndex = 1;
  public sidebarIndexUpdate: EventEmitter<number> = new EventEmitter();