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

Flex layout replacements. Switch to tailwind.css.

pull/11838/head
Igor Kulikov 2 years ago
parent
2626b56d45
commit
3a5ab479f0
13 changed files with 178 additions and 184 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. 62
      ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
  2. 76
      ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
  3. 11
      ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
  4. 62
      ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
  5. 29
      ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
  6. 10
      ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
  7. 78
      ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
  8. 10
      ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
  9. 10
      ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
  10. 6
      ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
  11. 4
      ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
  12. 2
      ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
  13. 2
      ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md

62
ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
View File

@ -4,9 +4,9 @@
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup" <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
(ngSubmit)="save()" class="add-entity-form"> (ngSubmit)="save()" class="add-entity-form">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Add entity</h2> <h2>Add entity</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button"> <button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
@ -14,21 +14,21 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label> <mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required> <input matInput formControlName="entityName" required>
<mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')"> <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
Entity name is required. Entity name is required.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label> <mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel" > <input matInput formControlName="entityLabel" >
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<tb-entity-type-select <tb-entity-type-select
class="mat-block" class="mat-block"
formControlName="entityType" formControlName="entityType"
@ -36,50 +36,50 @@
[allowedEntityTypes]="allowedEntityTypes" [allowedEntityTypes]="allowedEntityTypes"
></tb-entity-type-select> ></tb-entity-type-select>
<tb-entity-subtype-autocomplete <tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'" *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
class="mat-block" class="mat-block flex-1"
formControlName="type" formControlName="type"
[required]="true" [required]="true"
[entityType]="'ASSET'" [entityType]="'ASSET'"
></tb-entity-subtype-autocomplete> ></tb-entity-subtype-autocomplete>
<tb-entity-subtype-autocomplete <tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'" *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
class="mat-block" class="mat-block flex-1"
formControlName="type" formControlName="type"
[required]="true" [required]="true"
[entityType]="'DEVICE'" [entityType]="'DEVICE'"
></tb-entity-subtype-autocomplete> ></tb-entity-subtype-autocomplete>
</div> </div>
<div formGroupName="attributes" fxLayout="column"> <div formGroupName="attributes" class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label> <mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude"> <input type="number" step="any" matInput formControlName="latitude">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label> <mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude"> <input type="number" step="any" matInput formControlName="longitude">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<input matInput formControlName="address"> <input matInput formControlName="address">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label> <mat-label>Owner</mat-label>
<input matInput formControlName="owner"> <input matInput formControlName="owner">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label> <mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number"> <input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')"> <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value. Invalid integer value.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex> <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
<label class="checkbox-label">Boolean Value</label> <label class="checkbox-label">Boolean Value</label>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;"> <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }} {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -89,11 +89,11 @@
</div> </div>
<div class="relations-list"> <div class="relations-list">
<div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div> <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
<div class="body" [fxShow]="relations().length"> <div class="body" [class.!hidden]="!relations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;"> <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
<div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;"> <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div fxFlex fxLayout="column"> <div class="flex flex-1 flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;"> <mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction"> <mat-select formControlName="direction" name="direction">
@ -106,20 +106,20 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-relation-type-autocomplete <tb-relation-type-autocomplete
fxFlex class="mat-block" class="mat-block flex-1"
formControlName="relationType" formControlName="relationType"
[required]="true"> [required]="true">
</tb-relation-type-autocomplete> </tb-relation-type-autocomplete>
</div> </div>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<tb-entity-select <tb-entity-select
fxFlex class="mat-block" class="mat-block flex-1"
[required]="true" [required]="true"
formControlName="relatedEntity"> formControlName="relatedEntity">
</tb-entity-select> </tb-entity-select>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
aria-label="Remove" aria-label="Remove"
type="button" type="button"
@ -143,7 +143,7 @@
</div> </div>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> <div mat-dialog-actions class="flex flex-row items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

76
ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
View File

@ -4,9 +4,9 @@
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup" <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
(ngSubmit)="save()" class="edit-entity-form"> (ngSubmit)="save()" class="edit-entity-form">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2> <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button"> <button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
@ -14,57 +14,57 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label> <mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required readonly=""> <input matInput formControlName="entityName" required readonly="">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label> <mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel"> <input matInput formControlName="entityLabel">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Type</mat-label> <mat-label>Entity Type</mat-label>
<input matInput formControlName="entityType" readonly> <input matInput formControlName="entityType" readonly>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Type</mat-label> <mat-label>Type</mat-label>
<input matInput formControlName="type" readonly> <input matInput formControlName="type" readonly>
</mat-form-field> </mat-form-field>
</div> </div>
<div formGroupName="attributes" fxLayout="column"> <div formGroupName="attributes" class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label> <mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude"> <input type="number" step="any" matInput formControlName="latitude">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label> <mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude"> <input type="number" step="any" matInput formControlName="longitude">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<input matInput formControlName="address"> <input matInput formControlName="address">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label> <mat-label>Owner</mat-label>
<input matInput formControlName="owner"> <input matInput formControlName="owner">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label> <mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number"> <input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')"> <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value. Invalid integer value.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex> <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
<label class="checkbox-label">Boolean Value</label> <label class="checkbox-label">Boolean Value</label>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;"> <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }} {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -74,12 +74,12 @@
</div> </div>
<div class="relations-list old-relations"> <div class="relations-list old-relations">
<div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div> <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
<div class="body" [fxShow]="oldRelations().length"> <div class="body" [class.!hidden]="!oldRelations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
*ngFor="let relation of oldRelations().controls; let i = index;"> *ngFor="let relation of oldRelations().controls; let i = index;">
<div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;"> <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div fxFlex fxLayout="column"> <div class="flex flex-1 flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;"> <mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction"> <mat-select formControlName="direction" name="direction">
@ -92,20 +92,20 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-relation-type-autocomplete <tb-relation-type-autocomplete
fxFlex class="mat-block" class="mat-block flex-1"
formControlName="relationType" formControlName="relationType"
required="true"> required="true">
</tb-relation-type-autocomplete> </tb-relation-type-autocomplete>
</div> </div>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<tb-entity-select <tb-entity-select
fxFlex class="mat-block" class="mat-block flex-1"
required="true" required="true"
formControlName="relatedEntity"> formControlName="relatedEntity">
</tb-entity-select> </tb-entity-select>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
aria-label="Remove" aria-label="Remove"
type="button" type="button"
@ -121,11 +121,11 @@
</div> </div>
<div class="relations-list"> <div class="relations-list">
<div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div> <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
<div class="body" [fxShow]="relations().length"> <div class="body" [class.!hidden]="!relations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;"> <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
<div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;"> <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div fxFlex fxLayout="column"> <div class="flex flex-1 flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;"> <mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction"> <mat-select formControlName="direction" name="direction">
@ -138,20 +138,20 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-relation-type-autocomplete <tb-relation-type-autocomplete
fxFlex class="mat-block" class="mat-block flex-1"
formControlName="relationType" formControlName="relationType"
[required]="true"> [required]="true">
</tb-relation-type-autocomplete> </tb-relation-type-autocomplete>
</div> </div>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<tb-entity-select <tb-entity-select
fxFlex class="mat-block" class="mat-block flex-1"
[required]="true" [required]="true"
formControlName="relatedEntity"> formControlName="relatedEntity">
</tb-entity-select> </tb-entity-select>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
aria-label="Remove" aria-label="Remove"
type="button" type="button"
@ -175,7 +175,7 @@
</div> </div>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> <div mat-dialog-actions class="flex flex-row items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

11
ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
View File

@ -3,9 +3,9 @@
```html ```html
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form [formGroup]="cloneDeviceFormGroup" (ngSubmit)="save()" style="min-width:320px;"> <form [formGroup]="cloneDeviceFormGroup" (ngSubmit)="save()" style="min-width:320px;">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Clone device: {{ deviceName }}</h2> <h2>Clone device: {{ deviceName }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" <button mat-icon-button (click)="cancel()"
type="button"> type="button">
<mat-icon class="material-icons">close <mat-icon class="material-icons">close
@ -16,8 +16,8 @@
*ngIf="isLoading$ | async"> *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Clone device name</mat-label> <mat-label>Clone device name</mat-label>
<input matInput formControlName="cloneName" required> <input matInput formControlName="cloneName" required>
<mat-error *ngIf="cloneDeviceFormGroup.get('cloneName').hasError('required')"> <mat-error *ngIf="cloneDeviceFormGroup.get('cloneName').hasError('required')">
@ -25,8 +25,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div mat-dialog-actions fxLayout="row" <div mat-dialog-actions class="flex flex-row items-center justify-end">
fxLayoutAlign="end center">
<button mat-button color="primary" type="button" <button mat-button color="primary" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial> (click)="cancel()" cdkFocusInitial>

62
ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
View File

@ -4,9 +4,9 @@
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup" <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
(ngSubmit)="save()" class="add-entity-form"> (ngSubmit)="save()" class="add-entity-form">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Add entity</h2> <h2>Add entity</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button"> <button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
@ -14,21 +14,21 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label> <mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required> <input matInput formControlName="entityName" required>
<mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')"> <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
Entity name is required. Entity name is required.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label> <mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel" > <input matInput formControlName="entityLabel" >
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<tb-entity-type-select <tb-entity-type-select
class="mat-block" class="mat-block"
formControlName="entityType" formControlName="entityType"
@ -36,50 +36,50 @@
[allowedEntityTypes]="allowedEntityTypes" [allowedEntityTypes]="allowedEntityTypes"
></tb-entity-type-select> ></tb-entity-type-select>
<tb-entity-subtype-autocomplete <tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'" *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
class="mat-block" class="mat-block flex-1"
formControlName="type" formControlName="type"
[required]="true" [required]="true"
[entityType]="'ASSET'" [entityType]="'ASSET'"
></tb-entity-subtype-autocomplete> ></tb-entity-subtype-autocomplete>
<tb-entity-subtype-autocomplete <tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'" *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
class="mat-block" class="mat-block flex-1"
formControlName="type" formControlName="type"
[required]="true" [required]="true"
[entityType]="'DEVICE'" [entityType]="'DEVICE'"
></tb-entity-subtype-autocomplete> ></tb-entity-subtype-autocomplete>
</div> </div>
<div formGroupName="attributes" fxLayout="column"> <div formGroupName="attributes" class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label> <mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude"> <input type="number" step="any" matInput formControlName="latitude">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label> <mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude"> <input type="number" step="any" matInput formControlName="longitude">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<input matInput formControlName="address"> <input matInput formControlName="address">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label> <mat-label>Owner</mat-label>
<input matInput formControlName="owner"> <input matInput formControlName="owner">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label> <mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number"> <input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')"> <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value. Invalid integer value.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex> <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
<label class="checkbox-label">Boolean Value</label> <label class="checkbox-label">Boolean Value</label>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;"> <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }} {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -89,11 +89,11 @@
</div> </div>
<div class="relations-list"> <div class="relations-list">
<div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div> <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
<div class="body" [fxShow]="relations().length"> <div class="body" [class.!hidden]="!relations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;"> <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
<div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;"> <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div fxFlex fxLayout="column"> <div class="flex flex-1 flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;"> <mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction"> <mat-select formControlName="direction" name="direction">
@ -106,20 +106,20 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-relation-type-autocomplete <tb-relation-type-autocomplete
fxFlex class="mat-block" class="mat-block flex-1"
formControlName="relationType" formControlName="relationType"
[required]="true"> [required]="true">
</tb-relation-type-autocomplete> </tb-relation-type-autocomplete>
</div> </div>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<tb-entity-select <tb-entity-select
fxFlex class="mat-block" class="mat-block flex-1"
[required]="true" [required]="true"
formControlName="relatedEntity"> formControlName="relatedEntity">
</tb-entity-select> </tb-entity-select>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
aria-label="Remove" aria-label="Remove"
type="button" type="button"
@ -143,7 +143,7 @@
</div> </div>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> <div mat-dialog-actions class="flex flex-row items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

29
ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
View File

@ -3,9 +3,9 @@
```html ```html
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form [formGroup]="addEntityFormGroup" (ngSubmit)="save()" style="min-width:480px;"> <form [formGroup]="addEntityFormGroup" (ngSubmit)="save()" style="min-width:480px;">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Add new User</h2> <h2>Add new User</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button"> <button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
@ -15,10 +15,9 @@
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"> <div style="height: 4px;" *ngIf="!(isLoading$ | async)">
</div> </div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
fxLayout.xs="column" fxLayoutGap.xs="0"> <mat-form-field class="mat-block flex-1">
<mat-form-field fxFlex class="mat-block">
<mat-label>Email</mat-label> <mat-label>Email</mat-label>
<input matInput formControlName="email" required <input matInput formControlName="email" required
ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\_\-0-9]+\.)+[a-zA-Z]{2,}))$/'> ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\_\-0-9]+\.)+[a-zA-Z]{2,}))$/'>
@ -30,25 +29,22 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
fxLayout.xs="column" fxLayoutGap.xs="0"> <mat-form-field class="mat-block flex-1">
<mat-form-field fxFlex class="mat-block">
<mat-label>First Name</mat-label> <mat-label>First Name</mat-label>
<input matInput <input matInput
formControlName="firstName"> formControlName="firstName">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
fxLayout.xs="column" fxLayoutGap.xs="0"> <mat-form-field class="mat-block flex-1">
<mat-form-field fxFlex class="mat-block">
<mat-label>Last Name</mat-label> <mat-label>Last Name</mat-label>
<input matInput <input matInput
formControlName="lastName"> formControlName="lastName">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
fxLayout.xs="column" fxLayoutGap.xs="0"> <mat-form-field class="mat-block flex-1">
<mat-form-field fxFlex class="mat-block">
<mat-label>User activation method</mat-label> <mat-label>User activation method</mat-label>
<mat-select matInput formControlName="userActivationMethod"> <mat-select matInput formControlName="userActivationMethod">
<mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod.value"> <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod.value">
@ -60,8 +56,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayout="row" <div mat-dialog-actions class="flex flex-row items-center justify-end">
fxLayoutAlign="end center">
<button mat-button color="primary" type="button" <button mat-button color="primary" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial> (click)="cancel()" cdkFocusInitial>

10
ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
View File

@ -93,7 +93,7 @@ function ActivationLinkDialogController(instance) {
let activationLinkDialogTemplate = `<form style="min-width: 400px; position: relative;"> let activationLinkDialogTemplate = `<form style="min-width: 400px; position: relative;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2 translate>user.activation-link</h2> <h2 translate>user.activation-link</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="close()" (click)="close()"
type="button"> type="button">
@ -104,10 +104,10 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent"> <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
<div class="mat-content" fxLayout="column"> <div class="mat-content" class="flex flex-col">
<span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span> <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
<div fxLayout="row" fxLayoutAlign="start center"> <div class="flex flex-row items-center justify-start">
<pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre> <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
<button mat-icon-button <button mat-icon-button
color="primary" color="primary"
ngxClipboard ngxClipboard
@ -120,7 +120,7 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
</div> </div>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
cdkFocusInitial cdkFocusInitial

78
ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
View File

@ -4,9 +4,9 @@
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup" <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
(ngSubmit)="save()" class="edit-entity-form"> (ngSubmit)="save()" class="edit-entity-form">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2> <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button"> <button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
@ -14,57 +14,57 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label> <mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required readonly=""> <input matInput formControlName="entityName" required readonly="">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label> <mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel"> <input matInput formControlName="entityLabel">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Entity Type</mat-label> <mat-label>Entity Type</mat-label>
<input matInput formControlName="entityType" readonly> <input matInput formControlName="entityType" readonly>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Type</mat-label> <mat-label>Type</mat-label>
<input matInput formControlName="type" readonly> <input matInput formControlName="type" readonly>
</mat-form-field> </mat-form-field>
</div> </div>
<div formGroupName="attributes" fxLayout="column"> <div formGroupName="attributes" class="flex flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label> <mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude"> <input type="number" step="any" matInput formControlName="latitude">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label> <mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude"> <input type="number" step="any" matInput formControlName="longitude">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<input matInput formControlName="address"> <input matInput formControlName="address">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label> <mat-label>Owner</mat-label>
<input matInput formControlName="owner"> <input matInput formControlName="owner">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label> <mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number"> <input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')"> <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value. Invalid integer value.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex> <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
<label class="checkbox-label">Boolean Value</label> <label class="checkbox-label">Boolean Value</label>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;"> <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }} {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -74,12 +74,12 @@
</div> </div>
<div class="relations-list old-relations"> <div class="relations-list old-relations">
<div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div> <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
<div class="body" [fxShow]="oldRelations().length"> <div class="body" [class.!hidden]="!oldRelations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
*ngFor="let relation of oldRelations().controls; let i = index;"> *ngFor="let relation of oldRelations().controls; let i = index;">
<div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;"> <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div fxFlex fxLayout="column"> <div class="flex flex-1 flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;"> <mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction"> <mat-select formControlName="direction" name="direction">
@ -92,20 +92,20 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-relation-type-autocomplete <tb-relation-type-autocomplete
fxFlex class="mat-block" class="mat-block flex-1"
formControlName="relationType" formControlName="relationType"
required="true"> required="true">
</tb-relation-type-autocomplete> </tb-relation-type-autocomplete>
</div> </div>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<tb-entity-select <tb-entity-select
fxFlex class="mat-block" class="mat-block flex-1"
required="true" required="true"
formControlName="relatedEntity"> formControlName="relatedEntity">
</tb-entity-select> </tb-entity-select>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
aria-label="Remove" aria-label="Remove"
type="button" type="button"
@ -121,16 +121,16 @@
</div> </div>
<div class="relations-list"> <div class="relations-list">
<div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div> <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
<div class="body" [fxShow]="relations().length"> <div class="body" [class.!hidden]="!relations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;"> <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
<div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;"> <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div fxFlex fxLayout="column"> <div class="flex flex-1 flex-col">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0"> <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;"> <mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction"> <mat-select formControlName="direction" name="direction">
<mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value"> <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
{{ ("relation.search-direction." + direction.value) | translate}} {{ ("relation.search-direction." + direction.value) | translate}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="relation.get('direction').hasError('required')"> <mat-error *ngIf="relation.get('direction').hasError('required')">
@ -138,20 +138,20 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-relation-type-autocomplete <tb-relation-type-autocomplete
fxFlex class="mat-block" class="mat-block flex-1"
formControlName="relationType" formControlName="relationType"
[required]="true"> [required]="true">
</tb-relation-type-autocomplete> </tb-relation-type-autocomplete>
</div> </div>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<tb-entity-select <tb-entity-select
fxFlex class="mat-block" class="mat-block flex-1"
[required]="true" [required]="true"
formControlName="relatedEntity"> formControlName="relatedEntity">
</tb-entity-select> </tb-entity-select>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center"> <div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
aria-label="Remove" aria-label="Remove"
type="button" type="button"
@ -175,7 +175,7 @@
</div> </div>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> <div mat-dialog-actions class="flex flex-row items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

10
ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
View File

@ -3,9 +3,9 @@
```html ```html
{:code-style="max-height: 400px;"} {:code-style="max-height: 400px;"}
<form [formGroup]="editEntity" (ngSubmit)="save()" class="edit-entity-form"> <form [formGroup]="editEntity" (ngSubmit)="save()" class="edit-entity-form">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>Edit {{entityName}} image</h2> <h2>Edit {{entityName}} image</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button"> <button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
@ -13,15 +13,15 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) || loading"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) || loading">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async) && !loading"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async) && !loading"></div>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content class="flex flex-col">
<div formGroupName="attributes" fxLayout="column"> <div formGroupName="attributes" class="flex flex-col">
<tb-image-input <tb-image-input
label="Entity image" label="Entity image"
formControlName="image" formControlName="image"
></tb-image-input> ></tb-image-input>
</div> </div>
</div> </div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> <div mat-dialog-actions class="flex flex-row items-center justify-end">
<button mat-button mat-raised-button color="primary" <button mat-button mat-raised-button color="primary"
type="submit" type="submit"
[disabled]="(isLoading$ | async) || editEntity.invalid || !editEntity.dirty"> [disabled]="(isLoading$ | async) || editEntity.invalid || !editEntity.dirty">

10
ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
View File

@ -56,24 +56,24 @@ function showImageDialog(title, imageUrl) {
var imageDialogTemplate = var imageDialogTemplate =
'<div aria-label="Image">' + '<div aria-label="Image">' +
'<form #theForm="ngForm">' + '<form #theForm="ngForm">' +
'<mat-toolbar fxLayout="row" color="primary">' + '<mat-toolbar class="flex flex-row" color="primary">' +
'<h2>{{title}}</h2>' + '<h2>{{title}}</h2>' +
'<span fxFlex></span>' + '<span class="flex-1"></span>' +
'<button mat-icon-button (click)="close()">' + '<button mat-icon-button (click)="close()">' +
'<mat-icon>close</mat-icon>' + '<mat-icon>close</mat-icon>' +
'</button>' + '</button>' +
'</mat-toolbar>' + '</mat-toolbar>' +
'<div mat-dialog-content>' + '<div mat-dialog-content>' +
'<div class="mat-content mat-padding">' + '<div class="mat-content mat-padding">' +
'<div fxLayout="column" fxFlex>' + '<div class="flex flex-1 flex-col">' +
'<div style="padding-top: 20px;">' + '<div style="padding-top: 20px;">' +
'<img [src]="imageUrl" style="height: 300px;"/>' + '<img [src]="imageUrl" style="height: 300px;"/>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div mat-dialog-actions fxLayout="row">' + '<div mat-dialog-actions class="flex flex-row">' +
'<span fxFlex></span>' + '<span class="flex-1"></span>' +
'<button mat-button (click)="close()" style="margin-right:20px;">Close</button>' + '<button mat-button (click)="close()" style="margin-right:20px;">Close</button>' +
'</div>' + '</div>' +
'</form>' + '</form>' +

6
ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
View File

@ -19,9 +19,9 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
- Put the following HTML code inside the HTML tab of "Resources" section: - Put the following HTML code inside the HTML tab of "Resources" section:
```html ```html
<div fxFlex fxLayout="column" style="height: 100%;"> <div class="flex h-full flex-1 flex-col">
<div>My first Alarm widget.</div> <div>My first Alarm widget.</div>
<table class="my-alarm-table" style="width: 100%;"> <table class="my-alarm-table w-full">
<thead> <thead>
<tr> <tr>
<th *ngFor="let dataKey of alarmSource?.dataKeys">{{dataKey.label}}</th> <th *ngFor="let dataKey of alarmSource?.dataKeys">{{dataKey.label}}</th>
@ -30,7 +30,7 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
<tbody> <tbody>
<tr *ngFor="let alarm of alarms"> <tr *ngFor="let alarm of alarms">
<td *ngFor="let dataKey of alarmSource?.dataKeys" <td *ngFor="let dataKey of alarmSource?.dataKeys"
[ngStyle]="getAlarmCellStyle(alarm, dataKey)"> [style]="getAlarmCellStyle(alarm, dataKey)">
{{getAlarmValue(alarm, dataKey)}} {{getAlarmValue(alarm, dataKey)}}
</td> </td>
</tr> </tr>

4
ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
View File

@ -11,9 +11,9 @@ The **Widget Editor** will open, pre-populated with the content of the default *
- Put the following HTML code inside the HTML tab of "Resources" section: - Put the following HTML code inside the HTML tab of "Resources" section:
```html ```html
<div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="center stretch"> <div class="flex h-full flex-1 flex-col items-stretch justify-center">
<div>My first latest values widget.</div> <div>My first latest values widget.</div>
<div fxFlex fxLayout="row" *ngFor="let dataKeyData of data" fxLayoutAlign="space-around center"> <div class="flex flex-1 flex-row items-center justify-around" *ngFor="let dataKeyData of data">
<div>{{dataKeyData.dataKey.label}}:</div> <div>{{dataKeyData.dataKey.label}}:</div>
<div>{{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}</div> <div>{{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}</div>
<div>{{dataKeyData.data[0] && dataKeyData.data[0][1]}}</div> <div>{{dataKeyData.data[0] && dataKeyData.data[0][1]}}</div>

2
ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
View File

@ -12,7 +12,7 @@ The **Widget Editor** will open, pre-populated with default **Control** template
```html ```html
<form #rpcForm="ngForm" (submit)="sendCommand()"> <form #rpcForm="ngForm" (submit)="sendCommand()">
<div class="mat-content mat-padding" fxLayout="column"> <div class="mat-content mat-padding flex flex-col">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label>RPC method</mat-label> <mat-label>RPC method</mat-label>
<input matInput required name="rpcMethod" #rpcMethodField="ngModel" [(ngModel)]="rpcMethod"/> <input matInput required name="rpcMethod" #rpcMethodField="ngModel" [(ngModel)]="rpcMethod"/>

2
ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
View File

@ -10,7 +10,7 @@ The **Widget Editor** will be opened pre-populated with the content of default *
- Put the following HTML code inside the HTML tab of "Resources" section: - Put the following HTML code inside the HTML tab of "Resources" section:
```html ```html
<div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="space-around stretch"> <div class="flex h-full flex-1 flex-col items-stretch justify-around">
<h3 style="text-align: center;">My first static widget.</h3> <h3 style="text-align: center;">My first static widget.</h3>
<button mat-raised-button color="primary" (click)="showAlert()">Click me</button> <button mat-raised-button color="primary" (click)="showAlert()">Click me</button>
</div> </div>

Write Preview
Loading…
Cancel
Save