TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-03-25 06:00:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Notifications style improvements

Browse Source
This commit is contained in:
Isaac Abadi
2022-12-29 13:56:45 -06:00
parent 992947fba5
commit cc2be46ad8
11 changed files with 75 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/components/notifications-list/notifications-list.component.html
View File

@@ -1,17 +1,28 @@
<div *ngFor="let notification of notifications; let i = index;">
<mat-divider class="notification-divider"></mat-divider>
<div class="notification-text">
<ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
{{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
</ng-container>
<ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
{{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
</ng-container>
</div>
<div *ngIf="notification.actions?.length > 0">
<button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
<span *ngFor="let action of notification.actions">
<button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
</span>
</div>
<div class="card-radius mat-elevation-z2" *ngFor="let notification of notifications; let i = index;">
<mat-card class="notification-card card-radius">
<mat-card-header>
<mat-card-subtitle>
<div>
<span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
</div>
</mat-card-subtitle>
<mat-card-title>
<ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
{{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
{{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
</ng-container>
</mat-card-content>
<mat-card-actions *ngIf="notification.actions?.length > 0">
<button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
<span *ngFor="let action of notification.actions">
<button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
</span>
</mat-card-actions>
<span *ngIf="!notification.read" class="dot"></span>
</mat-card>
</div>

25
src/app/components/notifications-list/notifications-list.component.scss
View File

@@ -7,4 +7,27 @@
margin-left: 10px;
margin-right: 10px;
display: inline-block;
}
}
.notification-timestamp {
font-size: 14px;
}
.notification-card {
margin-top: 5px;
}
.card-radius {
border-radius: 12px;
}
.dot {
height: 8px;
width: 8px;
background-color: red;
border-radius: 50%;
display: inline-block;
position: absolute;
right: 8px;
top: 8px;
}

4
src/app/components/notifications-list/notifications-list.component.ts
View File

@@ -14,8 +14,8 @@ export class NotificationsListComponent {
@Output() notificationAction = new EventEmitter<{notification: Notification, action: NotificationAction}>();
NOTIFICATION_PREFIX: { [key in NotificationType]: string } = {
download_complete: $localize`Finished downloading:`,
download_error: $localize`Download failed:`
download_complete: $localize`Finished downloading`,
download_error: $localize`Download failed`
}
// Attaches string to the end of the notification text

9
src/app/components/notifications/notifications.component.html
View File

@@ -1,10 +1,5 @@
<strong *ngIf="notifications !== null && notifications.length === 0 && read_notifications.length === 0" style="text-align: center; margin: 10px; position: relative; top: 8px;" i18n="No notifications available">No notifications available</strong>
<div *ngIf="notifications !== null && notifications.length === 0" style="text-align: center; margin: 10px;" i18n="No notifications available">No notifications available</div>
<div style="margin: 10px;" *ngIf="notifications?.length > 0">
<strong class="notification-title" i18n="New notifications">New notifications</strong>
<app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="notifications"></app-notifications-list>
<button style="margin-top: 15px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button>
</div>
<div style="margin: 10px;" *ngIf="read_notifications?.length > 0">
<strong class="notification-title" i18n="Old notifications">Old notifications</strong>
<app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="read_notifications"></app-notifications-list>
</div>

24
src/app/components/notifications/notifications.component.ts
View File

@@ -11,8 +11,7 @@ import { NotificationAction } from 'api-types/models/NotificationAction';
})
export class NotificationsComponent implements OnInit {
notifications = null;
read_notifications = null;
notifications: Notification[] = null;
@Output() notificationCount = new EventEmitter<number>();
@@ -33,9 +32,8 @@ export class NotificationsComponent implements OnInit {
getNotifications(): void {
this.postsService.getNotifications().subscribe(res => {
this.notifications = res['notifications'].filter(notification => !notification.read);
this.read_notifications = res['notifications'].filter(notification => notification.read);
this.notificationCount.emit(this.notifications.length);
this.notifications = res['notifications'];
this.notificationCount.emit(this.notifications.filter(notification => !notification.read).length);
});
}
@@ -48,7 +46,10 @@ export class NotificationsComponent implements OnInit {
this.router.navigate(['downloads']);
break;
case NotificationAction.RETRY_DOWNLOAD:
this.postsService.restartDownload(action_info['notification']['data']['download_uid'])
this.postsService.restartDownload(action_info['notification']['data']['download_uid']).subscribe(res => {
this.postsService.openSnackBar($localize`Download restarted!`);
this.deleteNotification(action_info['notification']['uid']);
});
break;
default:
console.error(`Notification action ${action_info['action']} does not exist!`);
@@ -59,7 +60,6 @@ export class NotificationsComponent implements OnInit {
deleteNotification(uid: string): void {
this.postsService.deleteNotification(uid).subscribe(res => {
this.notifications.filter(notification => notification['uid'] !== uid);
this.read_notifications.filter(read_notification => read_notification['uid'] !== uid);
this.notificationCount.emit(this.notifications.length);
this.getNotifications();
});
@@ -67,9 +67,7 @@ export class NotificationsComponent implements OnInit {
deleteAllNotifications(): void {
this.postsService.deleteAllNotifications().subscribe(res => {
console.log(res);
this.notifications = [];
this.read_notifications = [];
this.getNotifications();
});
this.notificationCount.emit(0);
@@ -78,15 +76,9 @@ export class NotificationsComponent implements OnInit {
setNotificationsToRead(): void {
const uids = this.notifications.map(notification => notification.uid);
this.postsService.setNotificationsToRead(uids).subscribe(res => {
console.log(res);
this.getNotifications();
});
this.notificationCount.emit(0);
}
notificationMenuClosed(): void {
if (this.notifications.length > 0) {
this.setNotificationsToRead();
}
}
}