Winsomnia/MireaFrontend
2
0
Fork 0
Code Pull Requests Actions Projects Releases Activity

style: add a better loader color display

Browse Source
This commit is contained in:
Polianin Nikita
2024-02-16 10:35:55 +03:00
parent 5cdf189f5a
commit d9764bfc0e
3 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/notification/notification.component.html
View File

@ -1,11 +1,11 @@
<div class="notification-content" [class]="data.className">
<span>
{{ data.message }}
</span>
</span>
<button mat-icon-button class="close-button" (click)="dismiss()">
<mat-icon>close</mat-icon>
</button>
</div>
@if (showProgressBar) {
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
<mat-progress-bar mode="determinate" [value]="progress" [color]="color"/>
}

4
src/components/notification/notification.component.ts
View File

@ -19,12 +19,16 @@ import {MatIconButton} from "@angular/material/button";
export class NotificationComponent {
showProgressBar: boolean = false;
progress: number = 100;
color: string = "primary";
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private snackBarRef: MatSnackBarRef<NotificationComponent>) {
if (data.duration) {
this.startProgress(data.duration);
this.showProgressBar = true;
}
if (data.color) {
this.color = data.color;
}
}
dismiss(): void {