tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Clear style code in notification component

pull/8522/head
Vladyslav_Prykhodko 3 years ago
parent
ba7605cb85
commit
fcf5921b7e
8 changed files with 132 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
  2. 53
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
  3. 2
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
  4. 114
      ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.html
  5. 10
      ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.scss
  6. 4
      ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
  7. 18
      ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
  8. 4
      ui-ngx/src/app/shared/models/notification.models.ts

108
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
View File

@ -39,18 +39,10 @@
<ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
<form [formGroup]="notificationRequestForm">
<div fxLayoutAlign="center">
<tb-toggle-header (valueChange)="notificationRequestForm.get('useTemplate').patchValue($event)"
class="tb-notification-use-template-toggle-group"
ignoreMdLgSize
useSelectOnMdLg="false"
appearance="fill"
name="useTemplate"
[options]="[
{ name: translate.instant('notification.start-from-scratch'), value: false},
{ name: translate.instant('notification.use-template'), value: true}
]"
[value]="notificationRequestForm.get('useTemplate').value">
</tb-toggle-header>
<tb-toggle-select formControlName="useTemplate" appearance="fill">
<tb-toggle-option [value]="false">{{ 'notification.start-from-scratch' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="true">{{ 'notification.use-template' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
<div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
<tb-template-autocomplete
@ -68,7 +60,7 @@
<div>
<label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
<div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
<div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
</div>
<button
matTooltip="{{ 'notification.refresh-allow-delivery-method' | translate }}"
@ -82,7 +74,7 @@
<section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
<ng-container *ngFor="let deliveryMethods of notificationDeliveryMethods">
<a *ngIf="isInteractDeliveryMethod(deliveryMethods); else deliveryMethod"
class="delivery-method-container interact"
class="tb-form-panel stroked delivery-method-container tb-pointer interact"
[routerLink]="configurationPage(deliveryMethods)"
[formGroupName]="deliveryMethods"
[matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
@ -95,7 +87,7 @@
</mat-icon>
</a>
<ng-template #deliveryMethod>
<section class="delivery-method-container"
<section class="delivery-method-container tb-form-panel stroked"
[formGroupName]="deliveryMethods"
[matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
[matTooltipDisabled]="getDeliveryMethodsTemplatesControl(deliveryMethods).enabled"
@ -126,7 +118,7 @@
</button>
</tb-entity-list>
</ng-template>
<section formGroupName="additionalConfig" class="additional-config-group">
<section formGroupName="additionalConfig" class="tb-form-panel stroked no-padding-bottom no-gap">
<mat-slide-toggle formControlName="enabled" class="toggle">
{{ 'notification.scheduler-later' | translate }}
</mat-slide-toggle>
@ -162,82 +154,82 @@
<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.WEB?.enabled">
<div *ngIf="preview" class="tb-form-panel no-padding no-border">
<section class="preview-group tb-form-panel stroked no-gap">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:bell-badge"></mat-icon>
<div class="group-title" translate>notification.delivery-method.web-preview</div>
<tb-icon class="tb-mat-18">supervisor_account</tb-icon>
<div class="tb-form-panel-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
</div>
<div class="details-recipients" *ngIf="notificationRequestForm.get('targets').value?.length > 1">
<div *ngFor="let detail of preview.recipientsCountByTarget | keyvalue" class="details-recipient">
<span class="number">{{ detail.value }}</span>{{ detail.key }}
</div>
</div>
<mat-divider class="divider"></mat-divider>
<mat-chip-listbox>
<mat-chip *ngFor="let recipientTitle of preview.recipientsPreview">
<span>{{ recipientTitle }}</span>
</mat-chip>
</mat-chip-listbox>
</section>
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.WEB?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-icon class="tb-mat-18">mdi:bell-badge</tb-icon>
<div class="tb-form-panel-title" translate>notification.delivery-method.web-preview</div>
</div>
<div class="web-preview">
<tb-notification preview [notification]="preview.processedTemplates.WEB"></tb-notification>
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.EMAIL?.enabled">
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MOBILE_APP?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:email"></mat-icon>
<div class="group-title" translate>notification.delivery-method.email-preview</div>
<tb-icon class="tb-mat-18">mdi:cellphone-text</tb-icon>
<div class="tb-form-panel-title" translate>notification.delivery-method.mobile-app-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 class="subject">{{ preview.processedTemplates.MOBILE_APP.subject }}</div>
<div>{{ preview.processedTemplates.MOBILE_APP.body }}</div>
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.SMS?.enabled">
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SMS?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:message-processing"></mat-icon>
<div class="group-title" translate>notification.delivery-method.sms-preview</div>
<tb-icon class="tb-mat-18">mdi:message-processing</tb-icon>
<div class="tb-form-panel-title" translate>notification.delivery-method.sms-preview</div>
</div>
<div class="notification-content">
{{ preview.processedTemplates.SMS.body }}
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.SLACK?.enabled">
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.EMAIL?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:slack"></mat-icon>
<div class="group-title" translate>notification.delivery-method.slack-preview</div>
<tb-icon class="tb-mat-18">mdi:email</tb-icon>
<div class="tb-form-panel-title" translate>notification.delivery-method.email-preview</div>
</div>
<div class="notification-content">
{{ preview.processedTemplates.SLACK.body }}
<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.MOBILE_APP?.enabled">
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:cellphone-text"></mat-icon>
<div class="group-title" translate>notification.delivery-method.mobile-app-preview</div>
<tb-icon class="tb-mat-18">mdi:slack</tb-icon>
<div class="tb-form-panel-title" translate>notification.delivery-method.slack-preview</div>
</div>
<div class="notification-content">
<div class="subject">{{ preview.processedTemplates.MOBILE_APP.subject }}</div>
<div>{{ preview.processedTemplates.MOBILE_APP.body }}</div>
{{ preview.processedTemplates.SLACK.body }}
</div>
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:microsoft-teams"></mat-icon>
<div class="group-title" translate>notification.delivery-method.microsoft-teams-preview</div>
<tb-icon class="tb-mat-18">mdi:microsoft-teams</tb-icon>
<div class="tb-form-panel-title" translate>notification.delivery-method.microsoft-teams-preview</div>
</div>
<div class="notification-content mini">
<div class="subject">{{ preview.processedTemplates.MICROSOFT_TEAMS.subject }}</div>
{{ preview.processedTemplates.MICROSOFT_TEAMS.body }}
</div>
</section>
<section class="preview-group">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18">supervisor_account</mat-icon>
<div class="group-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
</div>
<div class="details-recipients" *ngIf="notificationRequestForm.get('targets').value?.length > 1">
<div *ngFor="let detail of preview.recipientsCountByTarget | keyvalue" class="details-recipient">
<span class="number">{{ detail.value }}</span>{{ detail.key }}
</div>
</div>
<mat-divider class="divider"></mat-divider>
<mat-chip-listbox>
<mat-chip *ngFor="let recipientTitle of preview.recipientsPreview">
<span>{{ recipientTitle }}</span>
</mat-chip>
</mat-chip-listbox>
</section>
</div>
</mat-step>
</mat-horizontal-stepper>

53
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
View File

@ -64,7 +64,7 @@
font-size: 13px;
}
.tb-hint {
.tb-form-hint {
padding: 0 0 8px;
}
@ -88,20 +88,14 @@
.delivery-methods-container {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 8px;
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
flex-direction: row;
&.interact {
cursor: pointer;
color: inherit;
}
@ -112,32 +106,17 @@
}
}
.additional-config-group {
padding: 16px 16px 0;
margin-bottom: 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
width: 100%;
height: 100%;
.toggle {
margin-bottom: 16px;
}
.toggle {
margin-bottom: 16px;
}
.preview-group {
padding: 16px;
margin-bottom: 10px;
border: 1px groove rgba(0, 0, 0, .12);
border-radius: 4px;
&.notification {
background-color: #F3F6FA;
}
.group-title {
font-weight: 500;
font-size: 14px;
tb-icon, .tb-form-panel-title {
color: rgba(0, 0, 0, .38);
}
}
&> div:not(:last-child) {
@ -212,7 +191,7 @@
}
}
.tb-notification-use-template-toggle-group {
tb-toggle-select {
margin-bottom: 24px;
width: 320px;
}
@ -240,18 +219,6 @@
}
}
}
.tb-form-panel .mat-expansion-panel.tb-settings {
padding: 11px 16px;
& > .mat-expansion-panel-content > .mat-expansion-panel-body {
gap: 0;
}
}
}
.tb-notification-use-template-toggle-group {
margin-bottom: 24px;
}
.preview-group {

2
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
View File

@ -89,7 +89,7 @@ export class SentNotificationDialogComponent extends
protected fb: FormBuilder,
private notificationService: NotificationService,
private dialog: MatDialog,
public translate: TranslateService) {
private translate: TranslateService) {
super(store, router, dialogRef, fb);
this.notificationDeliveryMethods.forEach(method => {

114
ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.html
View File

@ -237,6 +237,62 @@
</ng-template>
</mat-expansion-panel>
</section>
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.EMAIL"
*ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent class="tb-extension-panel">
<mat-form-field class="mat-block">
<mat-label translate>notification.subject</mat-label>
<input matInput formControlName="subject">
<mat-error *ngIf="templateConfigurationForm.get('EMAIL.subject').hasError('required')">
{{ 'notification.subject-required' | translate }}
</mat-error>
</mat-form-field>
<mat-label class="tb-title tb-required"
[class.tb-error]="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')"
translate>notification.message
</mat-label>
<editor [init]="tinyMceOptions" formControlName="body"></editor>
<mat-error class="tb-mat-error"
*ngIf="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')">
{{ 'notification.message-required' | translate }}
</mat-error>
</ng-template>
</mat-expansion-panel>
</section>
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.SLACK"
*ngIf="templateConfigurationForm.get('SLACK.enabled').value">
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent class="tb-extension-panel">
<mat-form-field class="mat-block">
<mat-label translate>notification.message</mat-label>
<textarea matInput
cdkTextareaAutosize
cols="1"
cdkAutosizeMinRows="1"
formControlName="body">
</textarea>
<mat-error *ngIf="templateConfigurationForm.get('SLACK.body').hasError('required')">
{{ 'notification.message-required' | translate }}
</mat-error>
</mat-form-field>
</ng-template>
</mat-expansion-panel>
</section>
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
*ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
@ -292,7 +348,7 @@
<mat-error
*ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.button.text').hasError('maxlength')">
{{'notification.button-text-max-length' | translate :
{length: templateConfigurationForm.get('MICROSOFT_TEAMS.button.text').getError('maxlength').requiredLength}
{length: templateConfigurationForm.get('MICROSOFT_TEAMS.button.text').getError('maxlength').requiredLength}
}}
</mat-error>
</mat-form-field>
@ -339,60 +395,4 @@
</ng-template>
</mat-expansion-panel>
</section>
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.SLACK"
*ngIf="templateConfigurationForm.get('SLACK.enabled').value">
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent class="tb-extension-panel">
<mat-form-field class="mat-block">
<mat-label translate>notification.message</mat-label>
<textarea matInput
cdkTextareaAutosize
cols="1"
cdkAutosizeMinRows="1"
formControlName="body">
</textarea>
<mat-error *ngIf="templateConfigurationForm.get('SLACK.body').hasError('required')">
{{ 'notification.message-required' | translate }}
</mat-error>
</mat-form-field>
</ng-template>
</mat-expansion-panel>
</section>
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.EMAIL"
*ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent class="tb-extension-panel">
<mat-form-field class="mat-block">
<mat-label translate>notification.subject</mat-label>
<input matInput formControlName="subject">
<mat-error *ngIf="templateConfigurationForm.get('EMAIL.subject').hasError('required')">
{{ 'notification.subject-required' | translate }}
</mat-error>
</mat-form-field>
<mat-label class="tb-title tb-required"
[class.tb-error]="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')"
translate>notification.message
</mat-label>
<editor [init]="tinyMceOptions" formControlName="body"></editor>
<mat-error class="tb-mat-error"
*ngIf="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')">
{{ 'notification.message-required' | translate }}
</mat-error>
</ng-template>
</mat-expansion-panel>
</section>
</section>

10
ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.scss
View File

@ -15,9 +15,14 @@
*/
:host {
.tb-template-header {
margin-bottom: 12px;
position: sticky;
top: 0;
z-index: 1;
padding-bottom: 12px;
background-color: var(--mdc-dialog-container-color, white);
.tb-hint-available-params {
color: rgba(0,0,0,0.54);
color: rgba(0, 0, 0, 0.54);
letter-spacing: 0.4px;
.content {
@ -29,6 +34,7 @@
.template-tittle {
gap: 12px;
font-weight: normal;
tb-icon {
color: rgba(0, 0, 0, .38);
}

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

@ -59,9 +59,9 @@
<div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
<section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
<section *ngFor="let deliveryMethods of notificationDeliveryMethods"
class="delivery-method-container"
class="tb-form-panel stroked"
[formGroupName]="deliveryMethods">
<mat-slide-toggle class="delivery-method" formControlName="enabled">
<mat-slide-toggle formControlName="enabled">
{{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}
</mat-slide-toggle>
</section>

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

@ -68,23 +68,9 @@
.delivery-methods-container {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 8px;
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
.delivery-method {
width: 100%;
height: 100%;
}
}
}
}

4
ui-ngx/src/app/shared/models/notification.models.ts
View File

@ -380,9 +380,9 @@ export enum NotificationDeliveryMethod {
WEB = 'WEB',
MOBILE_APP = 'MOBILE_APP',
SMS = 'SMS',
MICROSOFT_TEAMS = 'MICROSOFT_TEAMS',
SLACK = 'SLACK',
EMAIL = 'EMAIL',
SLACK = 'SLACK',
MICROSOFT_TEAMS = 'MICROSOFT_TEAMS'
}
export interface NotificationDeliveryMethodInfo {

Write Preview
Loading…
Cancel
Save