Winsomnia/MireaFrontend
1
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,5 +7,5 @@
</button> </button>
</div> </div>
@if (showProgressBar) { @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 { export class NotificationComponent {
showProgressBar: boolean = false; showProgressBar: boolean = false;
progress: number = 100; progress: number = 100;
color: string = "primary";
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private snackBarRef: MatSnackBarRef<NotificationComponent>) { constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private snackBarRef: MatSnackBarRef<NotificationComponent>) {
if (data.duration) { if (data.duration) {
this.startProgress(data.duration); this.startProgress(data.duration);
this.showProgressBar = true; this.showProgressBar = true;
} }
if (data.color) {
this.color = data.color;
}
} }
dismiss(): void { dismiss(): void {

7
src/services/open-notify.service.ts
View File

@ -43,7 +43,12 @@ export class OpenNotifyService {
open(message: string, color: NotifyColor = NotifyColor.Basic, duration: number = 5000) { open(message: string, color: NotifyColor = NotifyColor.Basic, duration: number = 5000) {
this.setColorClass = color; this.setColorClass = color;
this._snackBar.openFromComponent(NotificationComponent, { this._snackBar.openFromComponent(NotificationComponent, {
data: {message: message, duration: duration, className: this.colorClass}, data: {
message: message,
duration: duration,
className: this.colorClass,
color: color === NotifyColor.Danger ? "accent" : "primary"
},
duration: duration, duration: duration,
verticalPosition: 'top', verticalPosition: 'top',
horizontalPosition: 'center', horizontalPosition: 'center',