settings page - remove btn

Author: Di Wang

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

@@ -10,13 +10,13 @@ export class RootComponent implements OnInit, OnDestroy {
  public id: number;
  public backgroundColor: string;
  constructor(public settingService: SettingsService) {
- this.id = settingService.getSidebarImageIndex();
+ this.id = settingService.getSidebarImageIndex() + 1;
  this.backgroundColor = settingService.getSidebarColor();
  }
 
  ngOnInit() {
  this.settingService.sidebarImageIndexUpdate.subscribe((id: number) => {
- this.id = id;
+ this.id = id + 1;
  });
  this.settingService.sidebarColorUpdate.subscribe((color: string) => {
  this.backgroundColor = color;

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

@@ -4,10 +4,11 @@
  outline: none;
 }
 
-.sidebar-bg{
+.sidebar-img{
  max-width: 100%;
  border-radius: 10px;
  margin-top: 10px;
+ cursor: pointer;
  -webkit-transition: all 400ms;
  -moz-transition: all 400ms;
  -ms-transition: all 400ms;
@@ -16,7 +17,7 @@
  border: 4px solid transparent;
 }
 
-.sidebar-bg:hover{
+.sidebar-img:hover{
  border-color: rgba(0, 187, 255, 0.5);
  -webkit-transition: all 400ms;
  -moz-transition: all 400ms;
@@ -25,7 +26,7 @@
  transition: all 400ms;
 }
 
-.sidebar-btn .active{
+.background-image .active{
  border-color: #00bbff;
 }
 

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

@@ -23,19 +23,19 @@ <h4 class="text-center text-uppercase">Sidebar Background</h4>
  </div>
  </div>
 
- <div class="col-md-10 col-md-offset-1">
+ <div class="col-md-10 col-md-offset-1 background-image">
  <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>
+ <img src="../../../assets/img/sidebar-1.jpg" alt="sidebar-bg" class="sidebar-img" (click)="bgChooseClick(0)"/>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
- <button class="sidebar-btn" (click)="bgChooseClick(2)"><img src="../../../assets/img/sidebar-2.jpg" alt="sidebar-bg" class="sidebar-bg"/></button>
+ <img src="../../../assets/img/sidebar-2.jpg" alt="sidebar-bg" class="sidebar-img" (click)="bgChooseClick(1)"/>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
- <button class="sidebar-btn" (click)="bgChooseClick(3)"><img src="../../../assets/img/sidebar-3.jpg" alt="sidebar-bg" class="sidebar-bg"/></button>
+ <img src="../../../assets/img/sidebar-3.jpg" alt="sidebar-bg" class="sidebar-img" (click)="bgChooseClick(2)"/>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
- <button class="sidebar-btn" (click)="bgChooseClick(4)"><img src="../../../assets/img/sidebar-4.jpg" alt="sidebar-bg" class="sidebar-bg"/></button>
+ <img src="../../../assets/img/sidebar-4.jpg" alt="sidebar-bg" class="sidebar-img" (click)="bgChooseClick(3)"/>
  </div>
  </div>
  </div>

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

@@ -12,17 +12,17 @@ export class SettingsComponent implements OnInit {
 
  ngOnInit() {
  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';
+ const sidebarImgs: HTMLCollection = document.getElementsByClassName('sidebar-img');
+ sidebarImgs[defaultId].className = sidebarImgs[defaultId].className + ' active';
  }
 
  bgChooseClick(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', '');
+ const sidebarImgs: HTMLCollection = document.getElementsByClassName('sidebar-img');
+ for (let i = 0; i < sidebarImgs.length; i++) {
+ sidebarImgs[i].className = sidebarImgs[i].className.replace(' active', '');
  }
- sideBtns[id - 1].children[0].className = sideBtns[id - 1].children[0].className + ' active';
+ sidebarImgs[id].className = sidebarImgs[id].className + ' active';
  }
 
  filterChooseClick(id) {

src/app/services/settings.service.ts

@@ -2,7 +2,7 @@ import { Injectable, EventEmitter } from '@angular/core';
 
 @Injectable()
 export class SettingsService {
- public sidebarImageIndex = 1;
+ public sidebarImageIndex = 0;
  public sidebarImageIndexUpdate: EventEmitter<number> = new EventEmitter();
  public sidebarFilter = '#fff';
  public sidebarFilterUpdate: EventEmitter<string> = new EventEmitter();