Browse Source

* Fixes #18 "dark theme slider"

pull/29/head
Per-Arne Andersen 4 years ago
parent
commit
994d59a75e
  1. 28
      wg_dashboard_frontend/src/app/layout/layout.module.ts
  2. 7
      wg_dashboard_frontend/src/app/layout/layout/layout.component.html
  3. 14
      wg_dashboard_frontend/src/app/layout/layout/layout.component.ts

28
wg_dashboard_frontend/src/app/layout/layout.module.ts

@ -12,22 +12,24 @@ import { RouterModule } from '@angular/router';
import { MatMenuModule } from '@angular/material/menu';
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
import {NotifierModule} from "angular-notifier";
import {FormsModule} from "@angular/forms";
@NgModule({
declarations: [LayoutComponent],
imports: [
CommonModule,
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatIconModule,
MatButtonModule,
FlexLayoutModule,
RouterModule,
MatMenuModule,
MatSlideToggleModule,
NotifierModule,
],
imports: [
CommonModule,
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatIconModule,
MatButtonModule,
FlexLayoutModule,
RouterModule,
MatMenuModule,
MatSlideToggleModule,
NotifierModule,
FormsModule,
],
exports: [
],

7
wg_dashboard_frontend/src/app/layout/layout/layout.component.html

@ -36,10 +36,11 @@
<mat-menu #themeMenu="matMenu">
<button mat-menu-item *ngFor="let theme of themes" (click)="setCurrentTheme(theme)">{{theme.name}}</button>
<mat-slide-toggle
style="margin-top: 10px;"
style="margin-top: 10px; padding: 0 16px;"
color="primary"
(click)="toggleDarkMode($event);"
[checked]="darkMode">
[(ngModel)]="darkMode"
(change)="toggleDarkMode()"
(click)="$event.stopPropagation();">
Dark
</mat-slide-toggle>
</mat-menu>

14
wg_dashboard_frontend/src/app/layout/layout/layout.component.ts

@ -40,22 +40,22 @@ export class LayoutComponent implements OnInit {
public auth: AuthService,
private comm: DataService,
private cookieService: CookieService
) {}
ngOnInit(): void {
console.log('Layout');
) {
this.darkMode = (this.cookieService.get("darkMode") === 'true');
if(this.cookieService.check("currentTheme")){
this.currentTheme = JSON.parse(this.cookieService.get("currentTheme"));
this.darkMode = (this.cookieService.get("darkMode") === 'true');
}else {
this.currentTheme = { ... this.themes[0]}
}
this.sendData()
}
ngOnInit(): void {
console.log('Layout');
}
toggleDarkMode($event){
$event.stopPropagation();
this.darkMode = !this.darkMode;
toggleDarkMode(){
this.cookieService.set("darkMode", String(this.darkMode));
this.sendData();
}

Loading…
Cancel
Save