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

Fix mardown widget

Browse Source
This commit is contained in:
Kalutka Zhenya 2022-09-21 15:54:30 +03:00
parent 1e2d7f9f20
commit e182930da5
5 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts
View File

@ -119,8 +119,7 @@ export class MarkdownWidgetComponent extends PageComponent implements OnInit {
const data = formattedDataFormDatasourceData(initialData);
let markdownText = this.settings.useMarkdownTextFunction ?
safeExecute(this.markdownTextFunction, [data]) : this.settings.markdownTextPattern;
const allData = flatFormattedData(data);
markdownText = createLabelFromPattern(markdownText, allData);
markdownText = createLabelFromPattern(markdownText, data[0]);
if (this.markdownText !== markdownText) {
this.markdownText = this.utils.customTranslation(markdownText, markdownText);
this.cd.detectChanges();

3
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
View File

@ -28,7 +28,8 @@
</tb-js-func>
<tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
formControlName="markdownTextPattern"
label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}">
label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}"
helpId="widget/editor/test">
</tb-markdown-editor>
<tb-css formControlName="markdownCss"
label="{{ 'widgets.markdown.markdown-css' | translate }}">

56
ui-ngx/src/app/shared/components/markdown-editor.component.html
View File

@ -17,25 +17,49 @@
-->
<div class="markdown-content" [ngClass]="{'tb-edit-mode': !readonly}"
tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
<div *ngIf="label" fxLayout="row" fxLayoutAlign="start center" style="height: 40px;">
<!-- <div *ngIf="label" fxLayout="row" fxLayoutAlign="space-between center" style="height: 40px;">-->
<!-- <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>-->
<!-- <div class="buttons-panel">-->
<!-- <button [fxShow]="!editorMode"-->
<!-- class="edit-toggle"-->
<!-- type="button"-->
<!-- mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>-->
<!-- <div *ngIf = "helpId" [tb-help-popup]="helpId"></div>-->
<!-- <button [fxShow]="editorMode"-->
<!-- class="edit-toggle"-->
<!-- type="button"-->
<!-- mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>-->
<!-- <button mat-button mat-icon-button (click)="fullscreen = !fullscreen"-->
<!-- matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"-->
<!-- matTooltipPosition="above">-->
<!-- <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;">
<label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
<span fxFlex></span>
<button [fxShow]="!editorMode"
class="edit-toggle"
type="button"
mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>
<button [fxShow]="editorMode"
class="edit-toggle"
type="button"
mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>
<div *ngIf = "helpId" [tb-help-popup]="helpId"></div>
<fieldset style="width: initial">
<div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
matTooltipPosition="above"
style="border-radius: 50%"
(click)="fullscreen = !fullscreen">
<button type='button' mat-button mat-icon-button class="tb-mat-32">
<mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button>
</div>
</fieldset>
</div>
<div [fxShow]="!readonly && !disabled" class="markdown-content-editor">
<div class="buttons-panel">
<button [fxShow]="!editorMode"
class="edit-toggle"
type="button"
mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>
<button [fxShow]="editorMode"
class="edit-toggle"
type="button"
mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>
<button mat-button mat-icon-button (click)="fullscreen = !fullscreen"
matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
matTooltipPosition="above">
<mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button>
</div>
<div [fxShow]="editorMode" #markdownEditor class="tb-markdown-editor"></div>
<div [fxShow]="!editorMode" class="tb-markdown-view-container">
<tb-markdown [data]="renderValue" lineNumbers fallbackToPlainMarkdown></tb-markdown>

33
ui-ngx/src/app/shared/components/markdown-editor.component.scss
View File

@ -58,20 +58,27 @@
overflow: auto;
height: 100%;
}
.buttons-panel {
position: absolute;
top: 5px;
right: 24px;
z-index: 1;
button.edit-toggle {
min-width: 32px;
min-height: 15px;
padding: 4px;
margin: 0;
font-size: .8rem;
line-height: 15px;
button.edit-toggle {
min-width: 32px;
min-height: 15px;
padding: 4px;
margin-right: 4px;
font-size: .8rem;
line-height: 15px;
color: #7b7b7b;
background: rgba(220, 220, 220, .35);
}
button.mat-button, button.mat-icon-button, button.mat-icon-button.tb-mat-32 {
background: rgba(220, 220, 220, .35);
align-items: center;
vertical-align: middle;
min-width: 32px;
min-height: 15px;
padding: 4px;
font-size: .8rem;
line-height: 15px;
&:not(.tb-help-popup-button) {
color: #7b7b7b;
background: rgba(220, 220, 220, .35);
}
}
}

2
ui-ngx/src/app/shared/components/markdown-editor.component.ts
View File

@ -40,6 +40,8 @@ export class MarkdownEditorComponent implements OnInit, ControlValueAccessor {
@Input() readonly: boolean;
@Input() helpId: string;
@ViewChild('markdownEditor', {static: true})
markdownEditorElmRef: ElementRef;