Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4aad661

Browse files
author
Di Wang
committed
settings page - color
1 parent 0af44ca commit 4aad661

File tree

4 files changed

+29
-21
lines changed

4 files changed

+29
-21
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<div class="col-md-10 col-md-offset-1">
55
<h4 class="text-center text-uppercase">Sidebar Filters</h4>
66
<div class="col-md-12 dot-row">
7-
<div class="dot purple" (click)="filterChooseClick(0)"></div>
8-
<div class="dot blue" (click)="filterChooseClick(1)"></div>
9-
<div class="dot green" (click)="filterChooseClick(2)"></div>
10-
<div class="dot orange" (click)="filterChooseClick(3)"></div>
11-
<div class="dot red" (click)="filterChooseClick(4)"></div>
12-
<div class="dot white" (click)="filterChooseClick(5)"></div>
13-
<div class="dot rose" (click)="filterChooseClick(6)"></div>
7+
<div class="dot purple" (click)="filterChooseClick('#9c27b0')"></div>
8+
<div class="dot blue" (click)="filterChooseClick('#00bcd4')"></div>
9+
<div class="dot green" (click)="filterChooseClick('#4caf50')"></div>
10+
<div class="dot orange" (click)="filterChooseClick('#ff9800')"></div>
11+
<div class="dot red" (click)="filterChooseClick('#f44336')"></div>
12+
<div class="dot white" (click)="filterChooseClick('#fff')"></div>
13+
<div class="dot rose" (click)="filterChooseClick('#e91e63')"></div>
1414
</div>
1515
</div>
1616

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export class SettingsComponent implements OnInit {
2525
sidebarImgs[id].className = sidebarImgs[id].className + ' active';
2626
}
2727

28-
filterChooseClick(id) {
29-
console.log(id);
28+
filterChooseClick(color) {
29+
this.settingService.setSidebarFilter(color);
3030
}
3131

3232
bgColorChooseClick(color) {

‎src/app/sidebar/sidebar.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@
66
<div class="divider"></div>
77
<div style="width: 100%; height: 100%; overflow-y: auto">
88
<ul class="nav links">
9-
<li routerLinkActive #dashboard="routerLinkActive" [ngClass]="dashboard.isActive ? 'route-active route' : 'route hover'" [routerLinkActiveOptions]="{exact: true}">
9+
<li routerLinkActive #dashboard="routerLinkActive" [ngClass]="dashboard.isActive ? 'route-active route' : 'route hover'" [routerLinkActiveOptions]="{exact: true}"[style.background-color]="dashboard.isActive ? color : 'transparent'">
1010
<a routerLink="/dashboard"><i class="material-icons" [ngStyle]="{color: dashboard.isActive ? 'rgba(0,0,0,.6)' : 'rgba(255, 255, 255, 0.8)'}">dashboard</i><p>Dashboard</p></a>
1111
</li>
12-
<li routerLinkActive #profile="routerLinkActive" [ngClass]="profile.isActive ? 'route-active route' : 'route hover'">
12+
<li routerLinkActive #profile="routerLinkActive" [ngClass]="profile.isActive ? 'route-active route' : 'route hover'"[style.background-color]="profile.isActive ? color : 'transparent'">
1313
<a routerLink="profile"><i class="material-icons" [ngStyle]="{color: profile.isActive ? 'rgba(0,0,0,.6)' : 'rgba(255, 255, 255, 0.8)'}">person</i><p>User Profile</p></a>
1414
</li>
1515
<li>
1616
<div class="accordion hover"><i class="material-icons" style="color: rgba(255, 255, 255, 0.8)">apps</i>Components<b class="caret"></b></div>
1717
<div class="accordion-panel">
18-
<div routerLinkActive #pricetable="routerLinkActive" [ngClass]="pricetable.isActive ? 'route-active route' : 'route hover'">
18+
<div routerLinkActive #pricetable="routerLinkActive" [ngClass]="pricetable.isActive ? 'route-active route' : 'route hover'"[style.background-color]="pricetable.isActive ? color : 'transparent'">
1919
<a routerLink="components/price-table"><p class="span">PT</p><p>Price Table</p></a>
2020
</div>
21-
<div routerLinkActive #panels="routerLinkActive" [ngClass]="panels.isActive ? 'route-active route' : 'route hover'">
21+
<div routerLinkActive #panels="routerLinkActive" [ngClass]="panels.isActive ? 'route-active route' : 'route hover'"[style.background-color]="panels.isActive ? color : 'transparent'">
2222
<a routerLink="components/panels"><p class="span">P</p><p>Panels</p></a>
2323
</div>
2424
</div>
2525
</li>
26-
<li routerLinkActive #table="routerLinkActive" [ngClass]="table.isActive ? 'route-active route' : 'route hover'">
26+
<li routerLinkActive #table="routerLinkActive" [ngClass]="table.isActive ? 'route-active route' : 'route hover'"[style.background-color]="table.isActive ? color : 'transparent'">
2727
<a routerLink="table"><i class="material-icons" [ngStyle]="{color: table.isActive ? 'rgba(0,0,0,.6)' : 'rgba(255, 255, 255, 0.8)'}">content_paste</i><p>Table List</p></a>
2828
</li>
29-
<li routerLinkActive #notification="routerLinkActive" [ngClass]="notification.isActive ? 'route-active route' : 'route hover'">
29+
<li routerLinkActive #notification="routerLinkActive" [ngClass]="notification.isActive ? 'route-active route' : 'route hover'"[style.background-color]="notification.isActive ? color : 'transparent'">
3030
<a routerLink="notification"><i class="material-icons" [ngStyle]="{color: notification.isActive ? 'rgba(0,0,0,.6)' : 'rgba(255, 255, 255, 0.8)'}">notifications</i><p>Notification</p></a>
3131
</li>
32-
<li routerLinkActive #alert="routerLinkActive" [ngClass]="alert.isActive ? 'route-active route' : 'route hover'">
32+
<li routerLinkActive #alert="routerLinkActive" [ngClass]="alert.isActive ? 'route-active route' : 'route hover'"[style.background-color]="alert.isActive ? color : 'transparent'">
3333
<a routerLink="alert"><i class="material-icons" [ngStyle]="{color: alert.isActive ? 'rgba(0,0,0,.6)' : 'rgba(255, 255, 255, 0.8)'}">warning</i><p>Sweet Alert</p></a>
3434
</li>
35-
<li routerLinkActive #settings="routerLinkActive" [ngClass]="settings.isActive ? 'route-active route' : 'route hover'">
35+
<li routerLinkActive #settings="routerLinkActive" [ngClass]="settings.isActive ? 'route-active route' : 'route hover'"[style.background-color]="settings.isActive ? color : 'transparent'">
3636
<a routerLink="settings"><i class="material-icons" [ngStyle]="{color: settings.isActive ? 'rgba(0,0,0,.6)' : 'rgba(255, 255, 255, 0.8)'}">settings</i><p>Settings</p></a>
3737
</li>
3838
</ul>

‎src/app/sidebar/sidebar.component.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
import {AfterViewInit, Component, OnInit} from '@angular/core';
1+
import {AfterViewInit, Component, OnInit, OnDestroy} from '@angular/core';
2+
import { SettingsService } from '../services/settings.service';
23

34
@Component({
45
selector: 'app-sidebar',
56
templateUrl: './sidebar.component.html',
67
styleUrls: ['./sidebar.component.css']
78
})
8-
export class SidebarComponent implements OnInit, AfterViewInit {
9-
10-
constructor() { }
9+
export class SidebarComponent implements OnInit, AfterViewInit,OnDestroy {
10+
publiccolor: string;
11+
constructor(publicsetingsService: SettingsService) { }
1112

1213
ngOnInit() {
14+
this.color = this.setingsService.getSidebarFilter();
15+
this.setingsService.sidebarFilterUpdate.subscribe((filter: string) => {
16+
this.color = filter;
17+
});
18+
}
19+
ngOnDestroy() {
20+
this.setingsService.sidebarFilterUpdate.unsubscribe();
1321
}
1422

1523
ngAfterViewInit() {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /