Fix mardown widget

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

@@ -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, data[0]);
-    markdownText = createLabelFromPattern(markdownText, allData);
     if (this.markdownText !== markdownText) {
       this.markdownText = this.utils.customTranslation(markdownText, markdownText);
       this.cd.detectChanges();

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

@@ -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 }}">

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

@@ -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>

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

@@ -58,20 +58,27 @@
     overflow: auto;
     height: 100%;
   }
-  .buttons-panel {
+  button.edit-toggle {
-    position: absolute;
+    min-width: 32px;
-    top: 5px;
+    min-height: 15px;
-    right: 24px;
+    padding: 4px;
-    z-index: 1;
+    margin-right: 4px;
-    button.edit-toggle {
+    font-size: .8rem;
-      min-width: 32px;
+    line-height: 15px;
-      min-height: 15px;
+    color: #7b7b7b;
-      padding: 4px;
+    background: rgba(220, 220, 220, .35);
-      margin: 0;
+  }
-      font-size: .8rem;
+  button.mat-button, button.mat-icon-button, button.mat-icon-button.tb-mat-32 {
-      line-height: 15px;
+    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);
     }
   }
 }

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

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