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; horizontalPosition?: NotificationHorizontalPosition;
verticalPosition?: NotificationVerticalPosition; verticalPosition?: NotificationVerticalPosition;
panelClass?: string | string[]; panelClass?: string | string[];
modern?: boolean;
} }
export class HideNotification { 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, showSuccessToast(message: string, duration: number = 1000,
verticalPosition: NotificationVerticalPosition = 'bottom', verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left', horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') { target: string = 'dashboardRoot', modern = false) {
this.showToast('success', message, duration, verticalPosition, horizontalPosition, target); this.showToast('success', message, duration, verticalPosition, horizontalPosition, target, modern);
} }
showInfoToast(message: string, showInfoToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom', verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left', horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') { target: string = 'dashboardRoot', modern = false) {
this.showToast('info', message, undefined, verticalPosition, horizontalPosition, target); this.showToast('info', message, undefined, verticalPosition, horizontalPosition, target, modern);
} }
showWarnToast(message: string, showWarnToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom', verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left', horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') { target: string = 'dashboardRoot', modern = false) {
this.showToast('warn', message, undefined, verticalPosition, horizontalPosition, target); this.showToast('warn', message, undefined, verticalPosition, horizontalPosition, target, modern);
} }
showErrorToast(message: string, showErrorToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom', verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left', horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') { target: string = 'dashboardRoot', modern = false) {
this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target); this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target, modern);
} }
showToast(type: NotificationType, message: string, duration: number, showToast(type: NotificationType, message: string, duration: number,
verticalPosition: NotificationVerticalPosition = 'bottom', verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left', horizontalPosition: NotificationHorizontalPosition = 'left',
target: string = 'dashboardRoot') { target: string = 'dashboardRoot', modern = false) {
this.store.dispatch(new ActionNotificationShow( this.store.dispatch(new ActionNotificationShow(
{ {
message, message,
@ -387,7 +387,8 @@ export class WidgetContext {
horizontalPosition, horizontalPosition,
target, target,
panelClass: this.widgetNamespace, 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. 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]="{value: animationState, params: animationParams}"
(@showHideAnimation.done)="onHideFinished($event)" (@showHideAnimation.done)="onHideFinished($event)"
[ngClass]="{ [ngClass]="{
'tb-toast': !notification.modern,
'tb-modern-toast': notification.modern,
'error-toast': notification.type === 'error', 'error-toast': notification.type === 'error',
'warn-toast': notification.type === 'warn', 'warn-toast': notification.type === 'warn',
'success-toast': notification.type === 'success', 'success-toast': notification.type === 'success',
'info-toast': notification.type === 'info' '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> <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> </div>

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

@ -71,4 +71,42 @@
background: #008000; 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 { export class TbSnackBarComponent implements AfterViewInit, OnDestroy {
@ViewChild('actionButton', {static: true}) actionButton: MatButton; @ViewChild('actionButton') actionButton: MatButton;
@HostBinding('class') @HostBinding('class')
get panelClass(): string[] { get panelClass(): string[] {