dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #10139 from ArtemDzhereleiko/AD/imp/update-toast-notification

Browse Source 
Update toast notification
This commit is contained in:
Igor Kulikov 2024-02-12 14:02:47 +02:00 committed by GitHub
commit ab5deba7ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/core/notification/notification.models.ts
View File

@ -33,6 +33,7 @@ export class NotificationMessage {
horizontalPosition?: NotificationHorizontalPosition;
verticalPosition?: NotificationVerticalPosition;
panelClass?: string | string[];
modern?: boolean;
}
export class HideNotification {

21
ui-ngx/src/app/modules/home/models/widget-component.models.ts
View File

@ -349,35 +349,35 @@ export class WidgetContext {
showSuccessToast(message: string, duration: number = 1000,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') {
this.showToast('success', message, duration, verticalPosition, horizontalPosition, target);
target: string = 'dashboardRoot', modern = false) {
this.showToast('success', message, duration, verticalPosition, horizontalPosition, target, modern);
}
showInfoToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') {
this.showToast('info', message, undefined, verticalPosition, horizontalPosition, target);
target: string = 'dashboardRoot', modern = false) {
this.showToast('info', message, undefined, verticalPosition, horizontalPosition, target, modern);
}
showWarnToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') {
this.showToast('warn', message, undefined, verticalPosition, horizontalPosition, target);
target: string = 'dashboardRoot', modern = false) {
this.showToast('warn', message, undefined, verticalPosition, horizontalPosition, target, modern);
}
showErrorToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') {
this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target);
target: string = 'dashboardRoot', modern = false) {
this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target, modern);
}
showToast(type: NotificationType, message: string, duration: number,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') {
target: string = 'dashboardRoot', modern = false) {
this.store.dispatch(new ActionNotificationShow(
{
message,
@ -387,7 +387,8 @@ export class WidgetContext {
horizontalPosition,
target,
panelClass: this.widgetNamespace,
forceDismiss: true
forceDismiss: true,
modern
}));
}

19
ui-ngx/src/app/shared/components/snack-bar-component.html
View File

@ -15,15 +15,30 @@
limitations under the License.
-->
<div fxLayout="row" fxLayoutAlign="start center" class="tb-toast"
<div fxLayout="row" fxLayoutAlign="start center"
[@showHideAnimation]="{value: animationState, params: animationParams}"
(@showHideAnimation.done)="onHideFinished($event)"
[ngClass]="{
'tb-toast': !notification.modern,
'tb-modern-toast': notification.modern,
'error-toast': notification.type === 'error',
'warn-toast': notification.type === 'warn',
'success-toast': notification.type === 'success',
'info-toast': notification.type === 'info'
}">
<div class="toast-text" [innerHTML]="notification.message"></div>
<ng-container *ngIf="!notification.modern; else modern">
<div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
<button #actionButton type="button" mat-button (click)="action($event)">{{ 'action.close' | translate }}</button>
</ng-container>
<ng-template #modern>
<div class="tb-modern-toast-panel" [ngClass]="{
'error-toast': notification.type === 'error',
'warn-toast': notification.type === 'warn',
'success-toast': notification.type === 'success',
'info-toast': notification.type === 'info'
}">
<div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
<button #actionButton class="tb-mat-20" mat-icon-button (click)="action($event)"><mat-icon>close</mat-icon></button>
</div>
</ng-template>
</div>

38
ui-ngx/src/app/shared/components/snack-bar-component.scss
View File

@ -71,4 +71,42 @@
background: #008000;
}
}
.tb-modern-toast {
display: flex;
flex-direction: column;
z-index: 1;
&-panel {
display: flex;
padding: 4px 4px 4px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 4px;
box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.2);
&.info-toast {
background: #e6e6e6;
color: rgba(50, 50, 50, 1);
}
&.warn-toast {
background: #fff3eb;
color: rgba(220, 109, 27, 1);
}
&.error-toast {
background-color: #fff2f3;
color: rgba(209, 39, 48, 1);
}
&.success-toast {
background: #ebfcec;
color: rgba(0, 128, 0, 1);
}
}
.toast-text {
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
}
}

2
ui-ngx/src/app/shared/components/toast.directive.ts
View File

@ -280,7 +280,7 @@ export type ToastAnimationState = 'default' | 'opened' | 'closing';
})
export class TbSnackBarComponent implements AfterViewInit, OnDestroy {
@ViewChild('actionButton', {static: true}) actionButton: MatButton;
@ViewChild('actionButton') actionButton: MatButton;
@HostBinding('class')
get panelClass(): string[] {