From 9ab367e28dac84612409105dc550bbda2c478e21 Mon Sep 17 00:00:00 2001
From: Guillaume Heurtier <guillaume.heurtier@maarch.org>
Date: Wed, 26 Feb 2020 11:14:31 +0100
Subject: [PATCH] FEAT #12091 TIME 0:50 close notifications when click on
button
---
src/frontend/app/notification.service.html | 5 ++++-
src/frontend/app/notification.service.scss | 8 +++++++-
src/frontend/app/notification.service.ts | 12 ++++++++----
3 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/src/frontend/app/notification.service.html b/src/frontend/app/notification.service.html
index d30409c9505..8848a2ce402 100644
--- a/src/frontend/app/notification.service.html
+++ b/src/frontend/app/notification.service.html
@@ -2,10 +2,13 @@
<div class="notif-container-icon">
<i class="fa fa-{{data.icon}} fa-2x"></i>
</div>
+ <button mat-icon-button class="notif-container-close" (click)="dismiss()">
+ <mat-icon class="fa fa-times fa-lg" aria-hidden="true"></mat-icon>
+ </button>
<div class="notif-container-content">
<div class="notif-container-content-msg">
<div [innerHTML]="data.url"></div>
<div [innerHTML]="data.message"></div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/app/notification.service.scss b/src/frontend/app/notification.service.scss
index 685380b8f0b..9cfba981453 100644
--- a/src/frontend/app/notification.service.scss
+++ b/src/frontend/app/notification.service.scss
@@ -22,6 +22,12 @@
flex-direction: column;
}
}
+
+ &-close {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ }
}
::ng-deep.mat-snack-bar-container.error-snackbar {
@@ -34,4 +40,4 @@
color: $primary;
background: white;
border: solid 1px $primary;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/app/notification.service.ts b/src/frontend/app/notification.service.ts
index af820cf541f..8da7de90a6a 100755
--- a/src/frontend/app/notification.service.ts
+++ b/src/frontend/app/notification.service.ts
@@ -10,6 +10,10 @@ import { LANG } from './translate.component';
})
export class CustomSnackbarComponent {
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
+
+ dismiss() {
+ this.data.close();
+ }
}
@Injectable()
@@ -20,21 +24,21 @@ export class NotificationService {
}
success(message: string) {
const duration = this.getMessageDuration(message, 2000);
- this.snackBar.openFromComponent(CustomSnackbarComponent, {
+ const snackBar = this.snackBar.openFromComponent(CustomSnackbarComponent, {
duration: duration,
panelClass: 'success-snackbar',
verticalPosition : 'top',
- data: { message: message, icon: 'info-circle' }
+ data: { message: message, icon: 'info-circle', close: () => {snackBar.dismiss()} }
});
}
error(message: string, url: string = null) {
const duration = this.getMessageDuration(message, 4000);
- this.snackBar.openFromComponent(CustomSnackbarComponent, {
+ const snackBar = this.snackBar.openFromComponent(CustomSnackbarComponent, {
duration: duration,
panelClass: 'error-snackbar',
verticalPosition : 'top',
- data: { url: url, message: message, icon: 'exclamation-triangle' }
+ data: { url: url, message: message, icon: 'exclamation-triangle', close: () => {snackBar.dismiss()} }
});
}
--
GitLab