mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-07 20:10:03 +03:00
6f3e94cf24
theme change behavior slightly modified to improve accessibility added hammerjs settings menu now has minimum width, updated colors, and additional hints
42 lines
2.5 KiB
HTML
42 lines
2.5 KiB
HTML
<div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
|
|
<div>
|
|
<mat-toolbar color="primary" class="top">
|
|
<div class="flex-row" width="100%" height="100%">
|
|
<div class="flex-column" style="text-align: left; margin-top: 1px;">
|
|
<button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
|
|
<button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
|
|
</div>
|
|
<div class="flex-column" style="text-align: center; margin-top: 5px;">
|
|
<div>{{topBarTitle}}</div>
|
|
</div>
|
|
<div class="flex-column" style="text-align: right; align-items: flex-end;">
|
|
<button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
|
|
<mat-menu #menuSettings="matMenu">
|
|
<button (click)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
|
|
<mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
|
|
<span>Dark</span>
|
|
<mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
|
|
</button>
|
|
<button (click)="openSettingsDialog()" mat-menu-item>
|
|
<mat-icon>settings</mat-icon>
|
|
<span>Settings</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
</mat-toolbar>
|
|
</div>
|
|
<div style="height: calc(100% - 64px)">
|
|
<mat-sidenav-container style="height: 100%">
|
|
<mat-sidenav #sidenav>
|
|
<mat-nav-list>
|
|
<a mat-list-item (click)="sidenav.close()" routerLink='/home'>Home</a>
|
|
<a mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'>Subscriptions</a>
|
|
</mat-nav-list>
|
|
</mat-sidenav>
|
|
<mat-sidenav-content [style.background]="postsService.theme ? postsService.theme.background_color : null">
|
|
<router-outlet></router-outlet>
|
|
</mat-sidenav-content>
|
|
</mat-sidenav-container>
|
|
</div>
|
|
</div> |