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

UI: Change notification style

pull/8212/head
Vladyslav_Prykhodko 4 years ago
parent
c173cba872
commit
2863bbadc5
12 changed files with 23 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html
  2. 6
      ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss
  3. 2
      ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts
  4. 4
      ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts
  5. 2
      ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalation-form.component.html
  6. 2
      ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html
  7. 4
      ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html
  8. 10
      ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss
  9. 6
      ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss
  10. 2
      ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-configuration.ts
  11. 2
      ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss
  12. 1
      ui-ngx/src/assets/locale/locale.constant-en_US.json

3
ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html
View File

@ -24,8 +24,7 @@
[required]="required" [required]="required"
[matAutocomplete]="slackAutocomplete"> [matAutocomplete]="slackAutocomplete">
<button *ngIf="conversationSlackFormGroup.get('conversation').value && !disabled" <button *ngIf="conversationSlackFormGroup.get('conversation').value && !disabled"
type="button" type="button" matSuffix mat-icon-button aria-label="Clear"
matSuffix mat-button mat-icon-button aria-label="Clear"
(click)="clear()"> (click)="clear()">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>

6
ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss
View File

@ -58,10 +58,10 @@
.mat-mdc-tab { .mat-mdc-tab {
&.mat-mdc-tab-disabled { &.mat-mdc-tab-disabled {
opacity: 1; opacity: 1;
//width: 100%; flex: 1;
.mat-tab-label-content { .mdc-tab__content, .mdc-tab__text-label {
width: 100%; flex: 1;
} }
} }
} }

2
ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts
View File

@ -70,7 +70,7 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
new EntityTableColumn<Notification>('type', 'notification.type', '10%', (notification) => new EntityTableColumn<Notification>('type', 'notification.type', '10%', (notification) =>
this.translate.instant(NotificationTemplateTypeTranslateMap.get(notification.type).name)), this.translate.instant(NotificationTemplateTypeTranslateMap.get(notification.type).name)),
new EntityTableColumn<Notification>('subject', 'notification.subject', '30%'), new EntityTableColumn<Notification>('subject', 'notification.subject', '30%'),
new EntityTableColumn<Notification>('text', 'notification.text', '60%') new EntityTableColumn<Notification>('text', 'notification.message', '60%')
); );
} }

4
ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts
View File

@ -69,10 +69,10 @@ export class TargetsTableConfig extends EntityTableConfig<NotificationTarget> {
this.columns.push( this.columns.push(
new EntityTableColumn<NotificationTarget>('name', 'notification.notification-target', '20%'), new EntityTableColumn<NotificationTarget>('name', 'notification.notification-target', '20%'),
new EntityTableColumn<NotificationTarget>('configuration.type', 'notification.type', '40%', new EntityTableColumn<NotificationTarget>('configuration.type', 'notification.type', '20%',
(target) => this.translate.instant(NotificationTargetTypeTranslationMap.get(target.configuration.type)), (target) => this.translate.instant(NotificationTargetTypeTranslationMap.get(target.configuration.type)),
() => ({}), false), () => ({}), false),
new EntityTableColumn<NotificationTarget>('configuration.description', 'notification.description', '40%', new EntityTableColumn<NotificationTarget>('configuration.description', 'notification.description', '60%',
(target) => target.configuration.description || '', (target) => target.configuration.description || '',
() => ({}), false) () => ({}), false)
); );

2
ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalation-form.component.html
View File

@ -36,7 +36,7 @@
formControlName="targets" formControlName="targets"
subscriptSizing="dynamic" subscriptSizing="dynamic"
[entityType]="entityType.NOTIFICATION_TARGET" [entityType]="entityType.NOTIFICATION_TARGET"
placeholderText="{{ 'notification.add-target' | translate }}"> [placeholderText]="escalationFormGroup.get('targets').value ? '' : ('notification.add-target' | translate)">
<button #createTargetButton <button #createTargetButton
mat-button [fxHide]="disabled" matSuffix mat-button [fxHide]="disabled" matSuffix
(click)="createTarget($event, createTargetButton)"> (click)="createTarget($event, createTargetButton)">

2
ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html
View File

@ -25,7 +25,7 @@
[formControl]="escalationControl" [formControl]="escalationControl"
[systemEscalation]="$index === 0"> [systemEscalation]="$index === 0">
</tb-escalation-form> </tb-escalation-form>
<span *ngIf="$index === 0" style="width: 40px;"></span> <span *ngIf="$index === 0" style="width: 48px;"></span>
<button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;" <button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;"
type="button" type="button"
(click)="removeEscalation($index)" (click)="removeEscalation($index)"

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

@ -102,7 +102,7 @@
</tb-alarm-severities-list> </tb-alarm-severities-list>
</fieldset> </fieldset>
<fieldset class="fields-group tb-margin" formGroupName="clearRule"> <fieldset class="fields-group tb-margin-2" formGroupName="clearRule">
<legend translate>notification.clear-rule</legend> <legend translate>notification.clear-rule</legend>
<mat-form-field fxFlex class="mat-block" floatLabel="always"> <mat-form-field fxFlex class="mat-block" floatLabel="always">
<mat-label translate>alarm.alarm-status-list</mat-label> <mat-label translate>alarm.alarm-status-list</mat-label>
@ -208,7 +208,7 @@
</form> </form>
<form [formGroup]="ruleNotificationForm"> <form [formGroup]="ruleNotificationForm">
<section formGroupName="additionalConfig">; <section formGroupName="additionalConfig">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>notification.description</mat-label> <mat-label translate>notification.description</mat-label>
<input matInput formControlName="description"> <input matInput formControlName="description">

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

@ -17,7 +17,7 @@
@import "../../../../../../scss/constants"; @import "../../../../../../scss/constants";
:host { :host {
width: 700px; width: 900px;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
max-height: 100vh; max-height: 100vh;
@ -30,12 +30,16 @@
} }
.fields-group { .fields-group {
padding: 0 16px 8px; padding: 0 16px;
border: 1px groove rgba(0, 0, 0, .25); border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px; border-radius: 4px;
&.tb-margin { &.tb-margin {
margin-bottom: 10px; margin-bottom: 12px;
}
&.tb-margin-2 {
margin-bottom: 24px;
} }
&.tb-hierarchy { &.tb-hierarchy {

6
ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss
View File

@ -18,7 +18,7 @@
:host { :host {
form.tb-dialog-container { form.tb-dialog-container {
min-width: 580px; min-width: 600px;
max-height: 100vh; max-height: 100vh;
} }
@ -36,8 +36,8 @@
.mat-mdc-radio-group { .mat-mdc-radio-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 14px; margin-bottom: 22px;
gap: 8px; gap: 12px;
.mat-mdc-radio-button { .mat-mdc-radio-button {
flex: 1 1 100%; flex: 1 1 100%;

2
ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-configuration.ts
View File

@ -96,7 +96,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
additionalConfig: this.fb.group({ additionalConfig: this.fb.group({
icon: this.fb.group({ icon: this.fb.group({
enabled: [false], enabled: [false],
icon: [{value: '', disabled: true}, Validators.required], icon: [{value: 'notifications', disabled: true}, Validators.required],
color: ['#757575'] color: ['#757575']
}), }),
actionButtonConfig: this.fb.group({ actionButtonConfig: this.fb.group({

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"; @import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) { :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 830px; width: 930px;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
max-height: 100vh; max-height: 100vh;

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

@ -2870,7 +2870,6 @@
"general": "General" "general": "General"
}, },
"templates": "Templates", "templates": "Templates",
"text": "Text",
"time": "Time", "time": "Time",
"trigger": { "trigger": {
"alarm": "Alarm", "alarm": "Alarm",

Write Preview
Loading…
Cancel
Save