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

UI: Fixed incorrect show mail notification preview

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-11-25 18:52:43 +02:00
parent 72c6a375b3
commit 5c6567eab7
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -213,7 +213,7 @@
<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>
<editor [init]="tinyMceOptions" [initialValue]="preview.processedTemplates.EMAIL.body"></editor>
</div>
</section>
<section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">

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

@ -179,14 +179,6 @@
letter-spacing: 0.25px;
}
.html-content {
margin-top: 12px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
overflow-x: auto;
}
&.mini {
font-size: 12px;
line-height: 1.25;
@ -233,15 +225,6 @@
}
}
.preview-group {
.notification-content {
.html-content,
.html-content * {
all: revert;
}
}
}
.delivery-methods-container {
.delivery-method-container {
&.interact * {

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

@ -77,6 +77,30 @@ export class SentNotificationDialogComponent extends
showRefresh = false;
tinyMceOptions: Record<string, any> = {
base_url: '/assets/tinymce',
suffix: '.min',
plugins: ['autoresize'],
menubar: false,
toolbar: false,
statusbar: false,
resize: false,
readonly: true,
height: 400,
autofocus: false,
branding: false,
promotion: false,
setup: (ed) => {
ed.on('PreInit', () => {
const document = $(ed.iframeElement.contentDocument);
const body = $('#tinymce', document);
body.attr({contenteditable: false});
body.css('pointerEvents', 'none');
body.css('userSelect', 'none');
})
}
};
private authUser: AuthUser = getCurrentAuthUser(this.store);
private allowNotificationDeliveryMethods: Array<NotificationDeliveryMethod>;