feat(html-container): split-pane settings layout, fullscreen, mode-aware completer

- Split the settings dialog into a resizable two-pane layout (left: resources/HTML/CSS/JS tabs; right: live preview) using split.js, with a fullscreen toggle that resets the tab animation duration to avoid jank during expand. - Split ContainerFunctionEditorCompleter into HTML- and Angular-mode variants so the autocomplete suggests `container` only in HTML mode (Angular mode has no container argument). - Mark the widget with previewWidth/previewHeight 100% and overflowVisible: true in its controllerScript typeParameters so the basic config preview fills its slot.
4 weeks ago · 13ae00a6cd
5 changed files with 271 additions and 85 deletions
--- a/application/src/main/data/json/system/widget_types/html_container.json
+++ b/application/src/main/data/json/system/widget_types/html_container.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-html-container-widget \n    [ctx]=\"ctx\">\n</tb-html-container-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    \n}\n",
+    "controllerScript": "self.onInit = function() {\n    \n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '100%',\n        previewHeight: '100%',\n        overflowVisible: true\n    };\n};\n",
    "settingsDirective": "tb-html-container-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-html-container-basic-config",
--- a/ui-ngx/src/app/modules/home/components/widget/lib/html/html-container-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/html/html-container-widget.models.ts
@ -51,13 +51,18 @@ const containerFunctionCompletions: TbEditorCompletions = {
      type: widgetContextCompletions.ctx.type,
      description: widgetContextCompletions.ctx.description,
      children: widgetContextCompletions.ctx.children
-    },
+    }
+  }
+};
+
+export const AngularContainerFunctionEditorCompleter = new TbEditorCompleter(containerFunctionCompletions);
+
+export const HTMLContainerFunctionEditorCompleter = new TbEditorCompleter(
+  {...containerFunctionCompletions,
    container: {
      meta: 'argument',
      type: 'HTMLElement',
      description: 'Container element of the widget'
-    },
-  }
-};
+    }}
+);

-export const ContainerFunctionEditorCompleter = new TbEditorCompleter(containerFunctionCompletions);
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.html
@ -17,82 +17,112 @@
 -->
 <ng-container [formGroup]="htmlContainerSettingsForm">
  <div class="tb-form-panel no-padding no-border relative h-full">
-    <div class="flex flex-row items-center gap-4">
-      <div class="tb-form-panel-title" translate>widgets.html-container.container-type</div>
+    <div class="flex flex-row items-center">
      <tb-toggle-select formControlName="type">
        <tb-toggle-option [value]="HtmlContainerWidgetType.PLAIN">{{ 'widgets.html-container.type-plain' | translate }}</tb-toggle-option>
        <tb-toggle-option [value]="HtmlContainerWidgetType.ANGULAR">{{ 'widgets.html-container.type-angular' | translate }}</tb-toggle-option>
      </tb-toggle-select>
    </div>
-    <mat-tab-group [mat-stretch-tabs]="false" selectedIndex="3" class="flex-1">
-      <mat-tab #resourceTab="matTab">
-        <ng-template mat-tab-label>
-          <div [matBadge]="resourcesFormArray.length" [matBadgeHidden]="resourceTab.isActive || !resourcesFormArray.length"
-               matBadgeSize="small">{{ 'widgets.html-container.resources' | translate }}</div>
-        </ng-template>
-        <div class="flex flex-col gap-2 pt-4">
-          @if (resourcesFormArray.length) {
-            @for (resourceControl of resourcesControls; track resourceControl; let i = $index) {
-              <div class="tb-form-row no-border no-padding" [formGroup]="resourceControl">
-                <tb-resource-autocomplete class="flex-1"
-                                          formControlName="url"
-                                          inlineField
-                                          hideRequiredMarker required
-                                          [allowAutocomplete]="resourceControl.get('isModule').value && htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR"
-                                          placeholder="{{ 'widget.resource-url' | translate }}">
-                </tb-resource-autocomplete>
-                @if (htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR) {
-                  <mat-checkbox formControlName="isModule">
-                    {{ 'widget.resource-is-extension' | translate }}
-                  </mat-checkbox>
+    <div class="tb-html-container-settings-panel flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen">
+      <div class="tb-action-expand-button flex flex-row items-center justify-end">
+        <button mat-stroked-button
+                matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
+                matTooltipPosition="above"
+                (click)="toggleFullScreen()">
+          <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+          <span>{{ (fullscreen ? 'fullscreen.exit' : 'fullscreen.fullscreen') | translate }}</span>
+        </button>
+      </div>
+      <div class="flex flex-1">
+        <mat-tab-group #leftPanel
+                       [mat-stretch-tabs]="fullscreen"
+                       [selectedIndex]="fullscreen ? 2 : 3"
+                       [animationDuration]="tabsAnimationDuration"
+                       [disablePagination]="fullscreen"
+                       class="tb-content"
+                       [class.flex-1]="!fullscreen">
+          <mat-tab #resourceTab="matTab">
+            <ng-template mat-tab-label>
+              <div [matBadge]="resourcesFormArray.length" [matBadgeHidden]="resourceTab.isActive || !resourcesFormArray.length"
+                   matBadgeSize="small">{{ 'widgets.html-container.resources' | translate }}</div>
+            </ng-template>
+            <div class="flex flex-col gap-2 pt-4" [class.px-2]="fullscreen">
+              @if (resourcesFormArray.length) {
+                @for (resourceControl of resourcesControls; track resourceControl; let i = $index) {
+                  <div class="tb-form-row no-border no-padding" [formGroup]="resourceControl">
+                    <tb-resource-autocomplete class="flex-1"
+                                              formControlName="url"
+                                              inlineField
+                                              hideRequiredMarker required
+                                              [allowAutocomplete]="resourceControl.get('isModule').value && htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR"
+                                              placeholder="{{ 'widget.resource-url' | translate }}">
+                    </tb-resource-autocomplete>
+                    @if (htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR) {
+                      <mat-checkbox formControlName="isModule">
+                        {{ 'widget.resource-is-extension' | translate }}
+                      </mat-checkbox>
+                    }
+                    <button mat-icon-button color="primary"
+                            (click)="removeResource(i)"
+                            matTooltip="{{'widget.remove-resource' | translate}}"
+                            matTooltipPosition="above">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                  </div>
                }
-                <button mat-icon-button color="primary"
-                        (click)="removeResource(i)"
-                        matTooltip="{{'widget.remove-resource' | translate}}"
+              } @else {
+                <span translate
+                      class="tb-prompt flex items-center justify-center">widgets.html-container.no-resources</span>
+              }
+              <div>
+                <button mat-raised-button color="primary"
+                        (click)="addResource()"
+                        matTooltip="{{'widget.add-resource' | translate}}"
                        matTooltipPosition="above">
-                  <mat-icon>delete</mat-icon>
+                  <span translate>action.add</span>
                </button>
              </div>
-            }
-          } @else {
-            <span translate
-                  class="tb-prompt flex items-center justify-center">widgets.html-container.no-resources</span>
+            </div>
+          </mat-tab>
+          <mat-tab label="{{ 'widgets.html-container.css' | translate }}">
+            <tb-css class="flex-1"
+                    [fillHeight]="true"
+                    formControlName="css"
+                    label="{{ 'widgets.html-container.css' | translate }}">
+            </tb-css>
+          </mat-tab>
+          <mat-tab label="{{ (htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? 'widgets.html-container.angular-html-template' : 'widgets.html-container.html') | translate }}">
+            <tb-html class="flex-1"
+                     [fillHeight]="true"
+                     formControlName="html"
+                     label="{{ (htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? 'widgets.html-container.angular-html-template' : 'widgets.html-container.html') | translate }}">
+            </tb-html>
+          </mat-tab>
+          @if (!fullscreen) {
+            <mat-tab label="{{ 'widgets.html-container.java-script' | translate }}">
+              <ng-container *ngTemplateOutlet="javascript"></ng-container>
+            </mat-tab>
+          }
+        </mat-tab-group>
+        <div #rightPanel class="tb-content flex" [class.!hidden]="!fullscreen">
+          @if (fullscreen) {
+            <ng-container *ngTemplateOutlet="javascript"></ng-container>
          }
-          <div>
-            <button mat-raised-button color="primary"
-                    (click)="addResource()"
-                    matTooltip="{{'widget.add-resource' | translate}}"
-                    matTooltipPosition="above">
-              <span translate>action.add</span>
-            </button>
-          </div>
        </div>
-      </mat-tab>
-      <mat-tab label="{{ (htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? 'widgets.html-container.angular-html-template' : 'widgets.html-container.html') | translate }}">
-        <tb-html class="flex-1"
-                 [fillHeight]="true"
-                 formControlName="html"
-                 label="{{ (htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? 'widgets.html-container.angular-html-template' : 'widgets.html-container.html') | translate }}">
-        </tb-html>
-      </mat-tab>
-      <mat-tab label="{{ 'widgets.html-container.css' | translate }}">
-        <tb-css class="flex-1"
-                [fillHeight]="true"
-                formControlName="css"
-                label="{{ 'widgets.html-container.css' | translate }}">
-        </tb-css>
-      </mat-tab>
-      <mat-tab label="{{ 'widgets.html-container.java-script' | translate }}">
-        <tb-js-func class="flex-1"
-                    [fillHeight]="true"
-                    formControlName="js"
-                    [globalVariables]="functionScopeVariables"
-                    [editorCompleter]="containerFunctionEditorCompleter"
-                    [functionArgs]="htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? ['ctx'] : ['ctx', 'container']"
-                    withModules
-                    functionTitle="{{ 'widgets.html-container.js-function' | translate }}">
-        </tb-js-func>
-      </mat-tab>
-    </mat-tab-group>
+    </div>
+    </div>
  </div>
 </ng-container>
+<ng-template #javascript>
+  <ng-container [formGroup]="htmlContainerSettingsForm">
+    <tb-js-func class="flex-1"
+                [fillHeight]="true"
+                formControlName="js"
+                [globalVariables]="functionScopeVariables"
+                [editorCompleter]="containerFunctionEditorCompleter"
+                [functionArgs]="htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? ['ctx'] : ['ctx', 'container']"
+                withModules
+                functionTitle="{{ 'widgets.html-container.js-function' | translate }}">
+    </tb-js-func>
+  </ng-container>
+</ng-template>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.scss
@ -14,15 +14,115 @@
 * limitations under the License.
 */

-  :host {
-    &.tb-html-container-settings {
+.tb-html-container-settings {
+    height: 100%;
+}
+
+.tb-html-container-settings .tb-html-container-settings-panel, .tb-html-container-settings-panel {
+  position: relative;
+  background: #fff;
+  .mat-mdc-tab-body-wrapper {
+    position: relative;
+    top: 0;
+    flex: 1;
+  }
+  .tb-action-expand-button {
+    position: absolute;
+    top: 4px;
+    right: 0;
+    z-index: 2;
+  }
+  .gutter {
+    display: none;
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    &.gutter-horizontal {
+      cursor: col-resize;
+      background-image: url("../../../../../../../../../assets/split.js/grips/vertical.png");
+    }
+  }
+  .tb-js-func {
+    &:not(.tb-fullscreen) {
+      &.tb-hide-brackets {
+        padding-bottom: 0;
+      }
+    }
+  }
+  .tb-html {
+    position: relative;
+    &:not(.tb-fullscreen) {
+      padding-bottom: 0;
+    }
+    .tb-html-toolbar {
+      position: absolute;
+      top: 0;
+      right: 8px;
+      z-index: 8;
+      .tb-title {
+        display: none;
+      }
+    }
+    .tb-html-content-panel {
+      border-top: none;
+      height: 100%;
+    }
+  }
+  .tb-css {
+    position: relative;
+    &:not(.tb-fullscreen) {
+      .tb-css-content-panel {
+        margin: 0;
+      }
+    }
+    .tb-css-toolbar {
+      position: absolute;
+      top: 0;
+      right: 8px;
+      z-index: 8;
+      .tb-title {
+        display: none;
+      }
+    }
+    .tb-css-content-panel {
+      border-top: none;
      height: 100%;
-      ::ng-deep {
-        .mat-mdc-tab-body-wrapper {
-          position: relative;
-          top: 0;
-          flex: 1;
+    }
+  }
+  &.tb-fullscreen {
+    padding: 8px;
+    gap: 8px;
+    .tb-action-expand-button {
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+    .gutter {
+      display: block;
+    }
+    .tb-content {
+      border: 1px solid #c0c0c0;
+      .tb-html {
+        .tb-html-content-panel {
+          border: none;
+        }
+      }
+      .tb-css {
+        .tb-css-content-panel {
+          border: none;
+        }
+      }
+      .tb-js-func {
+        padding-top: 8px;
+        .tb-js-func-toolbar {
+          padding: 0 5px;
+        }
+        .tb-js-func-panel {
+          border-left: none;
+          border-right: none;
+          border-bottom: none;
        }
      }
    }
+  }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.ts
@ -14,7 +14,18 @@
 /// limitations under the License.
 ///

-import { Component, DestroyRef, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  DestroyRef,
+  ElementRef,
+  forwardRef,
+  HostBinding,
+  Input,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { WidgetResource } from '@shared/models/widget.models';
 import {
  ControlValueAccessor,
@ -28,7 +39,8 @@ import {
  Validators
 } from '@angular/forms';
 import {
-  ContainerFunctionEditorCompleter,
+  AngularContainerFunctionEditorCompleter,
+  HTMLContainerFunctionEditorCompleter,
  HtmlContainerWidgetSettings,
  HtmlContainerWidgetType
 } from '@home/components/widget/lib/html/html-container-widget.models';
@ -52,23 +64,39 @@ import { WidgetService } from '@core/http/widget.service';
      multi: true,
    }
  ],
+  encapsulation: ViewEncapsulation.None,
  standalone: false
 })
-export class HtmlContainerSettingsComponent implements OnInit, ControlValueAccessor, Validator {
+export class HtmlContainerSettingsComponent implements OnInit, AfterViewInit, ControlValueAccessor, Validator {

  HtmlContainerWidgetType = HtmlContainerWidgetType;

  functionScopeVariables = this.widgetService.getWidgetScopeVariables();

-  containerFunctionEditorCompleter = ContainerFunctionEditorCompleter;
+  get containerFunctionEditorCompleter() {
+    return this.htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR
+      ? AngularContainerFunctionEditorCompleter
+      : HTMLContainerFunctionEditorCompleter;
+  }

  @HostBinding('class')
  hostClass = 'tb-html-container-settings';

+  @ViewChild('leftPanel', { read: ElementRef })
+  leftPanelElmRef!: ElementRef;
+
+  @ViewChild('rightPanel', { read: ElementRef })
+  rightPanelElmRef!: ElementRef;
+
  @Input()
  disabled: boolean;

+  fullscreen = false;
+
+  tabsAnimationDuration = '500ms';
+
  htmlContainerSettingsForm: UntypedFormGroup;
+
  private modelValue: HtmlContainerWidgetSettings;

  constructor(private fb: UntypedFormBuilder,
@ -102,11 +130,26 @@ export class HtmlContainerSettingsComponent implements OnInit, ControlValueAcces
    });
  }

+  ngAfterViewInit(): void {
+    if (this.leftPanelElmRef && this.rightPanelElmRef) {
+      this.initSplitLayout(this.leftPanelElmRef.nativeElement,
+        this.rightPanelElmRef.nativeElement);
+    }
+  }
+
+  private initSplitLayout(leftPanel: any, rightPanel: any) {
+    Split([leftPanel, rightPanel], {
+      sizes: [50, 50],
+      gutterSize: 8,
+      cursor: 'col-resize'
+    });
+  }
+
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }

-  registerOnTouched(fn: any): void {
+  registerOnTouched(_fn: any): void {
  }

  setDisabledState(isDisabled: boolean): void {
@ -150,7 +193,15 @@ export class HtmlContainerSettingsComponent implements OnInit, ControlValueAcces
    this.resourcesFormArray.removeAt(index);
  }

-  private propagateChange = (v: any) => { };
+  toggleFullScreen(): void {
+    this.fullscreen = !this.fullscreen;
+    this.tabsAnimationDuration = '0ms';
+    setTimeout(() => {
+      this.tabsAnimationDuration = '500ms';
+    });
+  }
+
+  private propagateChange = (_v: any) => { };

  private updateModel() {
    this.modelValue = this.htmlContainerSettingsForm.value;