fixed toggle-theme-button

master
Max 5 years ago
parent 91493d363f
commit 4f9bd3c8e6

@ -16,9 +16,9 @@
<mat-checkbox color="primary" [(ngModel)]="checked">I protected the environment.</mat-checkbox> <mat-checkbox color="primary" [(ngModel)]="checked">I protected the environment.</mat-checkbox>
</p> </p>
<mat-form-field id="action-chooser" *ngIf="checked"> <mat-form-field id="action-chooser" *ngIf="checked">
<mat-label>Did you support the environment?</mat-label> <mat-label>What did you do?</mat-label>
<mat-select [(ngModel)]="selectedValue" name="action"> <mat-select [(ngModel)]="selectedValue" name="action">
<mat-option>the next time ;)</mat-option> <mat-option>nothing ;)</mat-option>
<mat-option *ngFor="let action of actionlist.actions" [value]="action.points"> <mat-option *ngFor="let action of actionlist.actions" [value]="action.points">
{{action.name}} {{action.name}}
</mat-option> </mat-option>

@ -55,29 +55,20 @@
</a> </a>
</div> </div>
</nav> </nav>
<!--neuer shit jooooooooooooooooooooooooooooooooooooooooooooooooo--->
<div id="menu-button-box"> <div id="menu-button-box">
<button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button"> <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item> <button mat-menu-item (click)="$event.stopPropagation();">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
class="theme-button" class="theme-button"
(click)="toggletheme()"> (change)="toggleTheme()"><!--stays white when dragged-->
dark mode dark mode
</mat-slide-toggle> </mat-slide-toggle>
</button> </button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voice mail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu> </mat-menu>
</mat-toolbar> </mat-toolbar>
<router-outlet></router-outlet> <router-outlet></router-outlet>

@ -27,7 +27,7 @@ export class MainNavigationComponent implements OnInit {
profileUrl: string profileUrl: string
lighttheme : boolean = true lighttheme : boolean = true
overlay;
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset) isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe( .pipe(
@ -35,7 +35,9 @@ export class MainNavigationComponent implements OnInit {
shareReplay() shareReplay()
); );
constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {} constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {
this.overlay = overlayContainer.getContainerElement();
}
ngOnInit() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.user = user this.user = user
@ -61,13 +63,18 @@ export class MainNavigationComponent implements OnInit {
{ path: '/register', label: 'Register' }, { path: '/register', label: 'Register' },
]; ];
public toggletheme(){ toggleTheme() {
if(this.lighttheme){ if (this.overlay.classList.contains("dark-theme")) {
this.overlay.classList.remove("dark-theme");
this.overlay.classList.add("light-theme");
this.onSetTheme("light-theme");
} else if (this.overlay.classList.contains("light-theme")) {
this.overlay.classList.remove("light-theme");
this.overlay.classList.add("dark-theme");
this.onSetTheme("dark-theme"); this.onSetTheme("dark-theme");
this.lighttheme = false;
} else { } else {
this.onSetTheme("light-theme"); this.overlay.classList.add("dark-theme");
this.lighttheme = true; this.onSetTheme("dark-theme");
} }
} }

Loading…
Cancel
Save