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
Split 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;"}
<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
(ngSubmit)="save()" class="add-entity-form">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar class="flex flex-row" color="primary">
<h2>Add entity</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
@ -14,21 +14,21 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div mat-dialog-content class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required>
<mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
Entity name is required.
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel" >
</mat-form-field>
</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
class="mat-block"
formControlName="entityType"
@ -36,50 +36,50 @@
[allowedEntityTypes]="allowedEntityTypes"
></tb-entity-type-select>
<tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
class="mat-block"
*ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
class="mat-block flex-1"
formControlName="type"
[required]="true"
[entityType]="'ASSET'"
></tb-entity-subtype-autocomplete>
<tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
class="mat-block"
*ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
class="mat-block flex-1"
formControlName="type"
[required]="true"
[entityType]="'DEVICE'"
></tb-entity-subtype-autocomplete>
</div>
<div formGroupName="attributes" fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div formGroupName="attributes" class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label>
<input matInput formControlName="address">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label>
<input matInput formControlName="owner">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value.
</mat-error>
</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>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -89,11 +89,11 @@
</div>
<div class="relations-list">
<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="row" fxLayout="row" fxLayoutAlign="start center" 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 fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<div class="body" [class.!hidden]="!relations().length">
<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 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div class="flex flex-1 flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction">
@ -106,20 +106,20 @@
</mat-error>
</mat-form-field>
<tb-relation-type-autocomplete
fxFlex class="mat-block"
class="mat-block flex-1"
formControlName="relationType"
[required]="true">
</tb-relation-type-autocomplete>
</div>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<tb-entity-select
fxFlex class="mat-block"
class="mat-block flex-1"
[required]="true"
formControlName="relatedEntity">
</tb-entity-select>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary"
aria-label="Remove"
type="button"
@ -143,7 +143,7 @@
</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"
type="button"
[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;"}
<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
(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>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
@ -14,57 +14,57 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div mat-dialog-content class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required readonly="">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Type</mat-label>
<input matInput formControlName="entityType" readonly>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Type</mat-label>
<input matInput formControlName="type" readonly>
</mat-form-field>
</div>
<div formGroupName="attributes" fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div formGroupName="attributes" class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label>
<input matInput formControlName="address">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label>
<input matInput formControlName="owner">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value.
</mat-error>
</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>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -74,12 +74,12 @@
</div>
<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="body" [fxShow]="oldRelations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
<div class="body" [class.!hidden]="!oldRelations().length">
<div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
*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 fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div class="flex flex-1 flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction">
@ -92,20 +92,20 @@
</mat-error>
</mat-form-field>
<tb-relation-type-autocomplete
fxFlex class="mat-block"
class="mat-block flex-1"
formControlName="relationType"
required="true">
</tb-relation-type-autocomplete>
</div>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<tb-entity-select
fxFlex class="mat-block"
class="mat-block flex-1"
required="true"
formControlName="relatedEntity">
</tb-entity-select>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary"
aria-label="Remove"
type="button"
@ -121,11 +121,11 @@
</div>
<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="body" [fxShow]="relations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" 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 fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<div class="body" [class.!hidden]="!relations().length">
<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 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div class="flex flex-1 flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction">
@ -138,20 +138,20 @@
</mat-error>
</mat-form-field>
<tb-relation-type-autocomplete
fxFlex class="mat-block"
class="mat-block flex-1"
formControlName="relationType"
[required]="true">
</tb-relation-type-autocomplete>
</div>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<tb-entity-select
fxFlex class="mat-block"
class="mat-block flex-1"
[required]="true"
formControlName="relatedEntity">
</tb-entity-select>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary"
aria-label="Remove"
type="button"
@ -175,7 +175,7 @@
</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"
type="button"
[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
{:code-style="max-height: 400px;"}
<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>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()"
type="button">
<mat-icon class="material-icons">close
@ -16,8 +16,8 @@
*ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<div mat-dialog-content class="flex flex-col">
<mat-form-field class="mat-block flex-1">
<mat-label>Clone device name</mat-label>
<input matInput formControlName="cloneName" required>
<mat-error *ngIf="cloneDeviceFormGroup.get('cloneName').hasError('required')">
@ -25,8 +25,7 @@
</mat-error>
</mat-form-field>
</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" type="button"
[disabled]="(isLoading$ | async)"
(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;"}
<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
(ngSubmit)="save()" class="add-entity-form">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar class="flex flex-row" color="primary">
<h2>Add entity</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
@ -14,21 +14,21 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div mat-dialog-content class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required>
<mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
Entity name is required.
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel" >
</mat-form-field>
</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
class="mat-block"
formControlName="entityType"
@ -36,50 +36,50 @@
[allowedEntityTypes]="allowedEntityTypes"
></tb-entity-type-select>
<tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
class="mat-block"
*ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
class="mat-block flex-1"
formControlName="type"
[required]="true"
[entityType]="'ASSET'"
></tb-entity-subtype-autocomplete>
<tb-entity-subtype-autocomplete
fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
class="mat-block"
*ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
class="mat-block flex-1"
formControlName="type"
[required]="true"
[entityType]="'DEVICE'"
></tb-entity-subtype-autocomplete>
</div>
<div formGroupName="attributes" fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div formGroupName="attributes" class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label>
<input matInput formControlName="address">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label>
<input matInput formControlName="owner">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value.
</mat-error>
</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>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -89,11 +89,11 @@
</div>
<div class="relations-list">
<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="row" fxLayout="row" fxLayoutAlign="start center" 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 fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<div class="body" [class.!hidden]="!relations().length">
<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 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div class="flex flex-1 flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction">
@ -106,20 +106,20 @@
</mat-error>
</mat-form-field>
<tb-relation-type-autocomplete
fxFlex class="mat-block"
class="mat-block flex-1"
formControlName="relationType"
[required]="true">
</tb-relation-type-autocomplete>
</div>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<tb-entity-select
fxFlex class="mat-block"
class="mat-block flex-1"
[required]="true"
formControlName="relatedEntity">
</tb-entity-select>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary"
aria-label="Remove"
type="button"
@ -143,7 +143,7 @@
</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"
type="button"
[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
{:code-style="max-height: 400px;"}
<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>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
@ -15,10 +15,9 @@
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)">
</div>
<div mat-dialog-content fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px"
fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div mat-dialog-content class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Email</mat-label>
<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,}))$/'>
@ -30,25 +29,22 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px"
fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>First Name</mat-label>
<input matInput
formControlName="firstName">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px"
fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Last Name</mat-label>
<input matInput
formControlName="lastName">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px"
fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>User activation method</mat-label>
<mat-select matInput formControlName="userActivationMethod">
<mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod.value">
@ -60,8 +56,7 @@
</mat-form-field>
</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" type="button"
[disabled]="(isLoading$ | async)"
(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;">
<mat-toolbar color="primary">
<h2 translate>user.activation-link</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="close()"
type="button">
@ -104,10 +104,10 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<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>
<div fxLayout="row" fxLayoutAlign="start center">
<pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
<div class="flex flex-row items-center justify-start">
<pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
<button mat-icon-button
color="primary"
ngxClipboard
@ -120,7 +120,7 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
</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"
type="button"
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;"}
<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
(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>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
@ -14,57 +14,57 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div mat-dialog-content class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Name</mat-label>
<input matInput formControlName="entityName" required readonly="">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Label</mat-label>
<input matInput formControlName="entityLabel">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Entity Type</mat-label>
<input matInput formControlName="entityType" readonly>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Type</mat-label>
<input matInput formControlName="type" readonly>
</mat-form-field>
</div>
<div formGroupName="attributes" fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div formGroupName="attributes" class="flex flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Latitude</mat-label>
<input type="number" step="any" matInput formControlName="latitude">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Longitude</mat-label>
<input type="number" step="any" matInput formControlName="longitude">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Address</mat-label>
<input matInput formControlName="address">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label>Owner</mat-label>
<input matInput formControlName="owner">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block flex-1">
<mat-label>Integer Value</mat-label>
<input type="number" step="1" matInput formControlName="number">
<mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
Invalid integer value.
</mat-error>
</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>
<mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
{{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@ -74,12 +74,12 @@
</div>
<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="body" [fxShow]="oldRelations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
<div class="body" [class.!hidden]="!oldRelations().length">
<div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
*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 fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div class="flex flex-1 flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction">
@ -92,20 +92,20 @@
</mat-error>
</mat-form-field>
<tb-relation-type-autocomplete
fxFlex class="mat-block"
class="mat-block flex-1"
formControlName="relationType"
required="true">
</tb-relation-type-autocomplete>
</div>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<tb-entity-select
fxFlex class="mat-block"
class="mat-block flex-1"
required="true"
formControlName="relatedEntity">
</tb-entity-select>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary"
aria-label="Remove"
type="button"
@ -121,16 +121,16 @@
</div>
<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="body" [fxShow]="relations().length">
<div class="row" fxLayout="row" fxLayoutAlign="start center" 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 fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<div class="body" [class.!hidden]="!relations().length">
<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 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
<div class="flex flex-1 flex-col">
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label>Direction</mat-label>
<mat-select formControlName="direction" name="direction">
<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-select>
<mat-error *ngIf="relation.get('direction').hasError('required')">
@ -138,20 +138,20 @@
</mat-error>
</mat-form-field>
<tb-relation-type-autocomplete
fxFlex class="mat-block"
class="mat-block flex-1"
formControlName="relationType"
[required]="true">
</tb-relation-type-autocomplete>
</div>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<tb-entity-select
fxFlex class="mat-block"
class="mat-block flex-1"
[required]="true"
formControlName="relatedEntity">
</tb-entity-select>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="flex flex-col items-center justify-center">
<button mat-icon-button color="primary"
aria-label="Remove"
type="button"
@ -175,7 +175,7 @@
</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"
type="button"
[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
{:code-style="max-height: 400px;"}
<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>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
@ -13,15 +13,15 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) || loading">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async) && !loading"></div>
<div mat-dialog-content fxLayout="column">
<div formGroupName="attributes" fxLayout="column">
<div mat-dialog-content class="flex flex-col">
<div formGroupName="attributes" class="flex flex-col">
<tb-image-input
label="Entity image"
formControlName="image"
></tb-image-input>
</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"
type="submit"
[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 =
'<div aria-label="Image">' +
'<form #theForm="ngForm">' +
'<mat-toolbar fxLayout="row" color="primary">' +
'<mat-toolbar class="flex flex-row" color="primary">' +
'<h2>{{title}}</h2>' +
'<span fxFlex></span>' +
'<span class="flex-1"></span>' +
'<button mat-icon-button (click)="close()">' +
'<mat-icon>close</mat-icon>' +
'</button>' +
'</mat-toolbar>' +
'<div mat-dialog-content>' +
'<div class="mat-content mat-padding">' +
'<div fxLayout="column" fxFlex>' +
'<div class="flex flex-1 flex-col">' +
'<div style="padding-top: 20px;">' +
'<img [src]="imageUrl" style="height: 300px;"/>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div mat-dialog-actions fxLayout="row">' +
'<span fxFlex></span>' +
'<div mat-dialog-actions class="flex flex-row">' +
'<span class="flex-1"></span>' +
'<button mat-button (click)="close()" style="margin-right:20px;">Close</button>' +
'</div>' +
'</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:
```html
<div fxFlex fxLayout="column" style="height: 100%;">
<div class="flex h-full flex-1 flex-col">
<div>My first Alarm widget.</div>
<table class="my-alarm-table" style="width: 100%;">
<table class="my-alarm-table w-full">
<thead>
<tr>
<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>
<tr *ngFor="let alarm of alarms">
<td *ngFor="let dataKey of alarmSource?.dataKeys"
[ngStyle]="getAlarmCellStyle(alarm, dataKey)">
[style]="getAlarmCellStyle(alarm, dataKey)">
{{getAlarmValue(alarm, dataKey)}}
</td>
</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:
```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 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.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}</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
<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-label>RPC method</mat-label>
<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:
```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>
<button mat-raised-button color="primary" (click)="showAlert()">Click me</button>
</div>

Write Preview
Loading…
Cancel
Save