mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-07 20:10:03 +03:00
2c61260e0f
* Fixed download spinner in player component * Downloads UI is more mobile friendly (#905) * Code cleanup * Fixed size of actions in home screen downloads * Errored downloads now display their stage as "Error" in the UI * Moved personal settings from about dialog to profile dialog * Profile dialog can now be opened without logging in/without multi-user mode * Fixed issue where archive dialog could be accessed from anywhere * Misc internationalization improvements * Combined download stage and download progress columns * Added back loading spinner to download actions * Adjusted thresholds for consolidating download action buttons * Implemented virtual scrolling for notifications (helps if many notifications exist) * Fixed minor console error
67 lines
6.9 KiB
HTML
67 lines
6.9 KiB
HTML
<div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
|
|
<div class="mat-elevation-z3" style="position: relative; z-index: 10;">
|
|
<mat-toolbar class="sticky-toolbar top-toolbar">
|
|
<div class="container-fluid" style="padding-left: 0px; padding-right: 0px">
|
|
<div class="row" width="100%" height="100%">
|
|
<div class="col-6" style="text-align: left; margin-top: 1px;">
|
|
<div style="display: flex; align-items: center;">
|
|
<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 style="margin-left: 8px; display: inline-block;"><button mat-icon-button routerLink='/home'><img style="width: 32px;" src="assets/images/logo_128px.png"></button></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6" style="text-align: right; align-items: flex-end; display: inline-block">
|
|
<button *ngIf="postsService.config?.Extra.enable_notifications" [matMenuTriggerFor]="notificationsMenu" (menuOpened)="notificationMenuOpened()" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
|
|
<mat-menu [classList]="'notifications-menu'" (close)="notificationMenuClosed()" #notificationsMenu="matMenu">
|
|
<app-notifications #notifications (notificationCount)="notificationCountUpdate($event)" (click)="$event.stopPropagation()"></app-notifications>
|
|
</mat-menu>
|
|
<button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
|
|
<mat-menu #menuSettings="matMenu">
|
|
<button class="top-menu-button" (click)="openProfileDialog()" mat-menu-item>
|
|
<mat-icon>person</mat-icon>
|
|
<span i18n="Profile menu label">Profile</span>
|
|
</button>
|
|
<button *ngIf="!postsService.config?.Advanced.multi_user_mode || postsService.isLoggedIn" class="top-menu-button" (click)="openArchivesDialog()" mat-menu-item>
|
|
<mat-icon>topic</mat-icon>
|
|
<span i18n="Archives menu label">Archives</span>
|
|
</button>
|
|
<button class="top-menu-button" (click)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
|
|
<mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
|
|
<span i18n="Dark mode toggle label">Dark</span>
|
|
<mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
|
|
</button>
|
|
<button class="top-menu-button" (click)="openAboutDialog()" mat-menu-item>
|
|
<mat-icon>info</mat-icon>
|
|
<span i18n="About menu label">About</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-toolbar>
|
|
</div>
|
|
<div class="sidenav-container" style="height: calc(100% - 64px)">
|
|
<mat-sidenav-container style="height: 100%">
|
|
<mat-sidenav [opened]="postsService.sidepanel_mode === 'side' && !window.location.href.includes('/player')" [mode]="postsService.sidepanel_mode" #sidenav>
|
|
<mat-nav-list>
|
|
<a *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn)" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
|
|
<a *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode && !postsService.isLoggedIn" mat-list-item (click)="sidenav.close()" routerLink='/login'><ng-container i18n="Navigation menu Login Page title">Login</ng-container></a>
|
|
<a *ngIf="postsService.config && allowSubscriptions && postsService.hasPermission('subscriptions')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
|
|
<a *ngIf="postsService.config && enableDownloadsManager && postsService.hasPermission('downloads_manager')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
|
|
<a *ngIf="postsService.config && postsService.hasPermission('tasks_manager')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/tasks'><ng-container i18n="Navigation menu Tasks Page title">Tasks</ng-container></a>
|
|
<ng-container *ngIf="postsService.config && postsService.hasPermission('settings')">
|
|
<mat-divider></mat-divider>
|
|
<a mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/settings'><ng-container i18n="Settings menu label">Settings</ng-container></a>
|
|
</ng-container>
|
|
<ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && postsService.hasPermission('subscriptions')">
|
|
<mat-divider *ngIf="postsService.subscriptions.length > 0"></mat-divider>
|
|
<a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatars [style.display]="'inline-block'" [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatars>{{subscription.name}}</a>
|
|
</ng-container>
|
|
</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> |