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

UI: Improvement notification components styles

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-02-15 17:49:28 +02:00
parent 82719b89ef
commit eddb06b536
8 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html
View File

@ -100,6 +100,23 @@
{{ 'notification.create-new' | translate }}
</button>
</tb-entity-list>
<section formGroupName="additionalConfig" class="additional-config-group">
<mat-slide-toggle formControlName="enabled" class="toggle">
{{ 'notification.scheduler-later' | translate }}
</mat-slide-toggle>
<div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" fxLayout="column">
<tb-timezone-select userTimezoneByDefault
required
formControlName="timezone">
</tb-timezone-select>
<mat-form-field>
<mat-label translate>notification.time</mat-label>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
</mat-form-field>
</div>
</section>
</form>
</mat-step>
<mat-step optional *ngIf="!notificationRequestForm.get('useTemplate').value &&
@ -222,21 +239,50 @@
</mat-form-field>
</form>
</mat-step>
<mat-step [stepControl]="notificationRequestAdditionalConfigForm">
<mat-step>
<ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template>
<mat-progress-spinner color="warn" mode="indeterminate"
strokeWidth="5" *ngIf="(isLoading$ | async) && !preview">
</mat-progress-spinner>
<div *ngIf="preview" style="padding-bottom: 16px">
<section class="preview-group notification" *ngIf="preview.processedTemplates.PUSH.enabled">
<section class="preview-group notification" *ngIf="preview.processedTemplates.PUSH?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon svgIcon="mdi:bell-badge"></mat-icon>
<div class="group-title">Web notification preview</div>
<div class="group-title" translate>notification.delivery-method-type.push-preview</div>
</div>
<div class="web-preview">
<tb-notification preview [notification]="preview.processedTemplates.PUSH"></tb-notification>
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.EMAIL?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon svgIcon="mdi:email"></mat-icon>
<div class="group-title" translate>notification.delivery-method-type.email-preview</div>
</div>
<div class="notification-content">
<div class="subject">{{ preview.processedTemplates.EMAIL.subject }}</div>
<mat-divider></mat-divider>
<div class="html-content" [innerHTML]="(preview.processedTemplates.EMAIL.body | safe: 'html')"></div>
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.SMS?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon svgIcon="mdi:message-processing"></mat-icon>
<div class="group-title" translate>notification.delivery-method-type.sms-preview</div>
</div>
<div class="notification-content">
{{ preview.processedTemplates.SMS.body }}
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.SLACK?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon svgIcon="mdi:slack"></mat-icon>
<div class="group-title" translate>notification.delivery-method-type.slack-preview</div>
</div>
<div class="notification-content">
{{ preview.processedTemplates.SLACK.body }}
</div>
</section>
<section class="preview-group">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon>supervisor_account</mat-icon>
@ -248,23 +294,6 @@
</div>
</div>
</section>
<form [formGroup]="notificationRequestAdditionalConfigForm" class="additional-config-group">
<mat-slide-toggle formControlName="enabled" class="toggle">
{{ 'notification.scheduler-later' | translate }}
</mat-slide-toggle>
<div *ngIf="notificationRequestAdditionalConfigForm.get('enabled').value" fxLayout="column">
<tb-timezone-select userTimezoneByDefault
required
formControlName="timezone">
</tb-timezone-select>
<mat-form-field>
<mat-label translate>notification.time</mat-label>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
</mat-form-field>
</div>
</form>
</div>
</mat-step>
</mat-horizontal-stepper>

29
ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss
View File

@ -114,6 +114,26 @@
background-color: #fff;
}
}
.notification-content {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
background: #fff;
padding: 12px 16px;
.subject {
padding-bottom: 12px;
font-weight: 500;
letter-spacing: 0.25px;
}
.html-content {
margin-top: 12px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
}
}
@media #{$mat-gt-xs} {
@ -240,4 +260,13 @@
}
}
}
.preview-group {
.notification-content {
.html-content,
.html-content * {
all: revert;
}
}
}
}

30
ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts
View File

@ -65,7 +65,6 @@ export class RequestNotificationDialogComponent extends
notificationType = NotificationType;
notificationRequestForm: FormGroup;
notificationRequestAdditionalConfigForm: FormGroup;
notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
@ -92,7 +91,12 @@ export class RequestNotificationDialogComponent extends
useTemplate: [true],
templateId: [null, Validators.required],
targets: [null, Validators.required],
template: this.templateNotificationForm
template: this.templateNotificationForm,
additionalConfig: this.fb.group({
enabled: [false],
timezone: [{value: '', disabled: true}, Validators.required],
time: [{value: 0, disabled: true}, Validators.required]
})
});
this.notificationRequestForm.get('template').disable({emitEvent: false});
@ -111,21 +115,15 @@ export class RequestNotificationDialogComponent extends
}
});
this.notificationRequestAdditionalConfigForm = this.fb.group({
enabled: [false],
timezone: [{value: '', disabled: true}, Validators.required],
time: [{value: 0, disabled: true}, Validators.required]
});
this.notificationRequestAdditionalConfigForm.get('enabled').valueChanges.pipe(
this.notificationRequestForm.get('additionalConfig.enabled').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(value => {
if (value) {
this.notificationRequestAdditionalConfigForm.get('timezone').enable({emitEvent: false});
this.notificationRequestAdditionalConfigForm.get('time').enable({emitEvent: false});
this.notificationRequestForm.get('additionalConfig.timezone').enable({emitEvent: false});
this.notificationRequestForm.get('additionalConfig.time').enable({emitEvent: false});
} else {
this.notificationRequestAdditionalConfigForm.get('timezone').disable({emitEvent: false});
this.notificationRequestAdditionalConfigForm.get('time').disable({emitEvent: false});
this.notificationRequestForm.get('additionalConfig.timezone').disable({emitEvent: false});
this.notificationRequestForm.get('additionalConfig.time').disable({emitEvent: false});
}
});
@ -208,8 +206,8 @@ export class RequestNotificationDialogComponent extends
delete formValue.useTemplate;
delete formValue.template;
let delay = 0;
if (this.notificationRequestAdditionalConfigForm.value.enabled) {
delay = (this.notificationRequestAdditionalConfigForm.value.time.valueOf() - this.minDate().valueOf()) / 1000;
if (formValue.additionalConfig.enabled) {
delay = (this.notificationRequestForm.value.additionalConfig.time.valueOf() - this.minDate().valueOf()) / 1000;
}
formValue.additionalConfig = {
sendingDelayInSec: delay > 0 ? delay : 0
@ -230,7 +228,7 @@ export class RequestNotificationDialogComponent extends
}
minDate(): Date {
return new Date(getCurrentTime(this.notificationRequestAdditionalConfigForm.get('timezone').value).format('lll'));
return new Date(getCurrentTime(this.notificationRequestForm.get('additionalConfig.timezone').value).format('lll'));
}
maxDate(): Date {

4
ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html
View File

@ -207,10 +207,6 @@
<button mat-stroked-button *ngIf="selectedIndex > 0"
(click)="backStep()">{{ 'action.back' | translate }}</button>
<span fxFlex></span>
<button *ngIf="selectedIndex > 0"
mat-button mat-stroked-button color="primary">
{{ 'notification.send-test-notification' | translate }}
</button>
<button mat-raised-button
color="primary"
(click)="nextStep()">{{ nextStepLabel() | translate }}</button>

2
ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss
View File

@ -17,7 +17,7 @@
@import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-dialog-container) {
width: 720px;
width: 830px;
max-height: 100vh;
.tb-form-fields {

2
ui-ngx/src/app/modules/home/pages/profile/profile.component.html
View File

@ -57,7 +57,7 @@
<input matInput formControlName="lastName"/>
</mat-form-field>
<tb-phone-input [required]="false"
[label]="'contact.phone'"
label="{{ 'contact.phone' | translate }}"
[enableFlagsSelect]="true"
formControlName="phone">
</tb-phone-input>

2
ui-ngx/src/app/modules/home/pages/user/user.component.html
View File

@ -93,7 +93,7 @@
<input matInput formControlName="lastName">
</mat-form-field>
<tb-phone-input [required]="false"
[label]="'contact.phone'"
label="{{ 'contact.phone' | translate }}"
[enableFlagsSelect]="true"
formControlName="phone">
</tb-phone-input>

7
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -2726,9 +2726,13 @@
"delivery-method": "Delivery method",
"delivery-method-type": {
"email": "Email",
"email-preview": "Email notification preview",
"push": "Web",
"push-preview": "Web notification preview",
"slack": "Slack",
"sms": "SMS"
"slack-preview": "Slack notification preview",
"sms": "SMS",
"sms-preview": "SMS notification preview"
},
"delivery-methods": "Delivery methods",
"description": "Description",
@ -2794,7 +2798,6 @@
"search-targets": "Search recipients",
"search-templates": "Search templates",
"send-notification": "Send notification",
"send-test-notification": "Send test notification",
"sent": "Sent",
"settings": "Notification settings",
"slack": "Slack",