#EX-218: Add progress bar and auto dismiss to snackbar

frontend/Exence/src/app/shared/snackbar/snackbar.component.html

@@ -1,23 +1,26 @@
-<section [class]="'py-2 notification-' + getCssClass()">
-	<div class="d-flex justify-content-between align-items-center w-100">
+<section
+	[class]="'py-2 position-relative notification-' + getCssClass()"
+	[class.fade-out]="fadeOutStarted()"
+>
+	<div class="d-flex justify-content-between align-items-center w-100 p-3">
 		<div class="d-flex justify-content-between align-items-center">
 			@switch (data.type) {
 				@case (errorType) {
-					<mat-icon>error</mat-icon>
+					<mat-icon class="type-icon">error</mat-icon>
 				}
 				@case (warnType) {
-					<mat-icon>warning</mat-icon>
+					<mat-icon class="type-icon">warning</mat-icon>
 				}
 				@case (infoType) {
-					<mat-icon>info</mat-icon>
+					<mat-icon class="type-icon">info</mat-icon>
 				}
 				@case (successType) {
-					<mat-icon>check</mat-icon>
+					<mat-icon class="type-icon">check</mat-icon>
 				}
 			}
 			<div
 				[innerHTML]="data.message"
-				class="text-break ms-4"
+				class="text-break ms-4 me-2"
 			></div>
 		</div>
 		@if (data.action) {
@@ -39,8 +42,16 @@
 			mat-icon-button
 			matSnackBarAction
 			(click)="onClose()"
+			class="close-button"
 		>
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
+
+	<div class="position-absolute bottom-0 start-0 progressbar w-100">
+		<div
+			class="h-100"
+			style.width="{{ progress() }}%"
+		></div>
+	</div>
 </section>

frontend/Exence/src/app/shared/snackbar/snackbar.component.scss

@@ -4,12 +4,31 @@
 	--mat-icon-button-icon-color: currentColor;
 }
 
+section {
+	border-radius: 5px;
+	background-color: lighten(var(--app-card-color), 10%);
+	box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+
+	transition: opacity 300ms ease-out, box-shadow 300ms ease-out;
+	opacity: 1;
+
+	overflow: hidden;
+
+	&.fade-out {
+		opacity: 0;
+		box-shadow: unset;
+	}
+}
+
 .notification {
 	&-error {
 		color: var(--error-color);
 	}
-	&-success {
-		color: var(--primary-color);
+	&-success, &-info {
+		color: var(--default-text-color);
+		.close-button, .type-icon {
+			color: var(--primary-color);
+		}
 	}
 	&-warning {
 		color: var(--warn-color);
@@ -18,4 +37,13 @@
 
 mat-icon {
 	flex-shrink: 0;
+}
+
+.progressbar {
+	height: 2px;
+
+	div {
+		transition: width 0.1s;
+		background-color: var(--primary-color);
+	}
 }

frontend/Exence/src/app/shared/snackbar/snackbar.component.ts

@@ -1,10 +1,10 @@
-import { Component, inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
-import { SnackbarType } from './snackbar.service';
-import { SvgIcons } from '../svg-icons/svg-icons';
+import { Component, DestroyRef, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatButtonModule } from '@angular/material/button';
+import { SvgIcons } from '../svg-icons/svg-icons';
+import { SnackbarType } from './snackbar.service';
 
 export interface SnackbarData {
 	message: string;
@@ -17,6 +17,8 @@ export interface SnackbarData {
 	};
 }
 
+export const SNACKBAR_DISMISS_DURATION = 5000;
+
 @Component({
 	selector: 'ex-snackbar',
 	templateUrl: './snackbar.component.html',
@@ -29,13 +31,28 @@ export interface SnackbarData {
 })
 export class SnackbarComponent {
 	private readonly snackbarRef = inject(MatSnackBarRef<SnackbarComponent>);
+	private readonly destroyRef = inject(DestroyRef);
 	readonly data = inject<SnackbarData>(MAT_SNACK_BAR_DATA);
 
+	private animationFrameId?: number;
+
 	readonly errorType = SnackbarType.Error;
 	readonly warnType = SnackbarType.Warning;
 	readonly infoType = SnackbarType.Info;
 	readonly successType = SnackbarType.Success;
 
+	progress = signal<number>(0);
+	fadeOutStarted = signal<boolean>(false);
+
+	constructor() {
+		this.startProgressAnimation();
+		this.destroyRef.onDestroy(() => {
+			if (this.animationFrameId) {
+				cancelAnimationFrame(this.animationFrameId);
+			}
+		});	
+	}
+
 	getCssClass(): string {
 		switch (this.data.type) {
 			case SnackbarType.Error:
@@ -52,6 +69,30 @@ export class SnackbarComponent {
 	onClose(): void {
 		this.snackbarRef.dismiss();
 	}
+
+	private startProgressAnimation(): void {
+		const startTime = performance.now();
+
+		const animate = (currentTime: number): void => {
+			if (!startTime) return;
+
+			const elapsed = currentTime - startTime;
+			const progressValue = Math.min(elapsed, SNACKBAR_DISMISS_DURATION);
+			const newProgress = Math.floor((progressValue / SNACKBAR_DISMISS_DURATION) * 100);
+
+			this.progress.set(newProgress);
+
+			if (progressValue >= SNACKBAR_DISMISS_DURATION - 300) {
+				this.fadeOutStarted.set(true);
+			}
+
+			if (progressValue < SNACKBAR_DISMISS_DURATION) {
+				this.animationFrameId = requestAnimationFrame(animate);
+			}
+		};
+
+		this.animationFrameId = requestAnimationFrame(animate);
+	}
 }
 
 

frontend/Exence/src/app/shared/snackbar/snackbar.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { MatSnackBar, MatSnackBarConfig, SimpleSnackBar } from '@angular/material/snack-bar';
-import { SnackbarComponent, SnackbarData } from './snackbar.component';
+import { SNACKBAR_DISMISS_DURATION, SnackbarComponent, SnackbarData } from './snackbar.component';
 
 export const enum SnackbarType {
 	Error,
@@ -16,11 +16,18 @@ export class SnackbarService {
 	private readonly snackbar = inject(MatSnackBar);
 
 	private readonly snackbarConfig: MatSnackBarConfig<SimpleSnackBar> = {
-		panelClass: 'custom-snackbar'
+		panelClass: 'custom-snackbar',
+		duration: SNACKBAR_DISMISS_DURATION,
+		horizontalPosition: 'right',
+		verticalPosition: 'top',
 	};
 
 	showCustom(data: SnackbarData): void {
-		this.snackbar.openFromComponent(SnackbarComponent, { ...this.snackbarConfig, data });
+		this.snackbar.openFromComponent(SnackbarComponent, {
+			...this.snackbarConfig,
+			data,
+			duration: SNACKBAR_DISMISS_DURATION,
+		});
 	}
 
 	showError(message: string): void {
@@ -29,7 +36,7 @@ export class SnackbarService {
 			data: {
 				message,
 				type: SnackbarType.Error
-			} satisfies SnackbarData
+			} satisfies SnackbarData,
 		});
 	}
 
@@ -39,29 +46,27 @@ export class SnackbarService {
 			data: {
 				message,
 				type: SnackbarType.Warning
-			} satisfies SnackbarData
+			} satisfies SnackbarData,
 		});
 	}
 
 	showInfo(message: string): void {
 		this.snackbar.openFromComponent(SnackbarComponent, {
 			...this.snackbarConfig,
-			duration: 10000,
 			data: {
 				message,
 				type: SnackbarType.Info
-			} satisfies SnackbarData
+			} satisfies SnackbarData,
 		});
 	}
 
 	showSuccess(message: string): void {
 		this.snackbar.openFromComponent(SnackbarComponent, {
 			...this.snackbarConfig,
-			duration: 10000,
 			data: {
 				message,
 				type: SnackbarType.Success
-			} satisfies SnackbarData
+			} satisfies SnackbarData,
 		});
 	}
 }

frontend/Exence/src/styles/components/snackbar.scss

@@ -1,10 +1,18 @@
+@import "../imports.scss";
+
 mat-snack-bar-container.mat-mdc-snack-bar-container.custom-snackbar {
 	.mdc-snackbar__label {
 		--mat-snack-bar-supporting-text-size: 16px;
 		--mat-snack-bar-supporting-text-weight: 700;
 	}
 
 	.mat-mdc-snackbar-surface {
-		--mat-snack-bar-container-color: var(--app-card-color);
-	} 
+		background-color: unset;
+		box-shadow: unset;
+		padding: 0;
+
+		.mat-mdc-snack-bar-label {
+			padding: 0;
+		}
+	}
 }

frontend/Exence/src/styles/styles.scss

@@ -67,7 +67,7 @@ a {
 }
 
 hr {
-	background-color: lighten(--secondary-color, 45%);
+	background-color: lighten(var(--secondary-color), 45%);
 	height: 1px;
 	border: none;
 	opacity: 0.36;
@@ -122,4 +122,4 @@ hr {
 
 mat-card.mat-mdc-card.categories mat-card-header .mat-mdc-card-header-text {
 	width: 100%;	
-}
+}