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

UI: Fixed form style

pull/8204/head
Artem Dzhereleiko 4 years ago
parent
d2876e7a79
commit
2e807f319d
35 changed files with 73 additions and 75 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. 8
      ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
  2. 3
      ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
  3. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
  4. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
  5. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
  6. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
  7. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
  8. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
  9. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
  10. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
  11. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
  12. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
  13. 22
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
  14. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
  15. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
  16. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
  17. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
  18. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
  19. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
  20. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
  21. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
  22. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
  23. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
  24. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
  25. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
  26. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
  27. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
  28. 29
      ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
  29. 4
      ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
  30. 2
      ui-ngx/src/app/shared/components/html.component.html
  31. 1
      ui-ngx/src/app/shared/components/image-input.component.scss
  32. 2
      ui-ngx/src/app/shared/components/js-func.component.html
  33. 2
      ui-ngx/src/app/shared/components/markdown-editor.component.html
  34. 2
      ui-ngx/src/app/shared/components/markdown-editor.component.scss
  35. 3
      ui-ngx/src/styles.scss

8
ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
View File

@ -41,10 +41,10 @@
<mat-label translate>admin.default-branch</mat-label> <mat-label translate>admin.default-branch</mat-label>
<input matInput formControlName="defaultBranch"> <input matInput formControlName="defaultBranch">
</mat-form-field> </mat-form-field>
<mat-checkbox formControlName="readOnly"> <div fxLayout="column">
{{ 'admin.repository-read-only' | translate }} <mat-checkbox formControlName="readOnly">
</mat-checkbox> {{ 'admin.repository-read-only' | translate }}
<div> </mat-checkbox>
<mat-checkbox formControlName="showMergeCommits"> <mat-checkbox formControlName="showMergeCommits">
{{ 'admin.show-merge-commits' | translate }} {{ 'admin.show-merge-commits' | translate }}
</mat-checkbox> </mat-checkbox>

3
ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
View File

@ -17,9 +17,6 @@
.mat-mdc-card.repository-settings { .mat-mdc-card.repository-settings {
margin: 8px; margin: 8px;
} }
.mat-mdc-checkbox {
padding-bottom: 16px;
}
.fields-group { .fields-group {
padding: 0 16px 8px; padding: 0 16px 8px;
margin-bottom: 10px; margin-bottom: 10px;

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
View File

@ -51,7 +51,7 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<section fxLayout="column" fxLayoutGap="8px"> <section fxLayout="column" fxLayoutGap.gt-xs="8px">
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center"> <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="displayEntityName"> <mat-slide-toggle fxFlex formControlName="displayEntityName">
{{ 'widgets.table.display-entity-name' | translate }} {{ 'widgets.table.display-entity-name' | translate }}

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

@ -47,7 +47,7 @@
</mat-form-field> </mat-form-field>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.label-widget.label-position</legend> <legend class="group-title" translate>widgets.label-widget.label-position</legend>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label translate>widgets.label-widget.x-pos</mat-label> <mat-label translate>widgets.label-widget.x-pos</mat-label>
<input matInput type="number" min="0" max="100" formControlName="x"> <input matInput type="number" min="0" max="100" formControlName="x">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
View File

@ -24,7 +24,7 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.chart.border-settings</legend> <legend class="group-title" translate>widgets.chart.border-settings</legend>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.border-width</mat-label> <mat-label translate>widgets.chart.border-width</mat-label>
<input matInput type="number" min="0" formControlName="borderWidth"> <input matInput type="number" min="0" formControlName="borderWidth">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
View File

@ -41,7 +41,7 @@
</fieldset> </fieldset>
<fieldset class="fields-group" formGroupName="stroke"> <fieldset class="fields-group" formGroupName="stroke">
<legend class="group-title" translate>widgets.chart.stroke-settings</legend> <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.width-pixels</mat-label> <mat-label translate>widgets.chart.width-pixels</mat-label>
<input matInput type="number" min="0" formControlName="width"> <input matInput type="number" min="0" formControlName="width">

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
View File

@ -16,7 +16,7 @@
--> -->
<section [formGroup]="widgetFontFormGroup" fxLayout="column"> <section [formGroup]="widgetFontFormGroup" fxLayout="column">
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-family</mat-label> <mat-label translate>widgets.widget-font.font-family</mat-label>
<input matInput formControlName="family"> <input matInput formControlName="family">
@ -26,7 +26,7 @@
<input matInput type="number" min="1" step="1" formControlName="size"> <input matInput type="number" min="1" step="1" formControlName="size">
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-style</mat-label> <mat-label translate>widgets.widget-font.font-style</mat-label>
<mat-select formControlName="style"> <mat-select formControlName="style">
@ -68,7 +68,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input <tb-color-input
fxFlex fxFlex
formControlName="color" formControlName="color"

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
View File

@ -29,7 +29,7 @@
<mat-label translate>widgets.rpc.initial-value</mat-label> <mat-label translate>widgets.rpc.initial-value</mat-label>
<input matInput type="number" formControlName="initialValue"> <input matInput type="number" formControlName="initialValue">
</mat-form-field> </mat-form-field>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.rpc.min-value</mat-label> <mat-label translate>widgets.rpc.min-value</mat-label>
<input required matInput type="number" formControlName="minValue"> <input required matInput type="number" formControlName="minValue">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
View File

@ -33,7 +33,7 @@
</mat-checkbox> </mat-checkbox>
</section> </section>
</section> </section>
<section fxLayout="column" fxLayoutGap="8px"> <section fxLayout="column" fxLayoutGap.gt-xs="8px">
<mat-slide-toggle fxFlex formControlName="displayDetails"> <mat-slide-toggle fxFlex formControlName="displayDetails">
{{ 'widgets.persistent-table.display-request-details' | translate }} {{ 'widgets.persistent-table.display-request-details' | translate }}
</mat-slide-toggle> </mat-slide-toggle>

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
View File

@ -24,7 +24,7 @@
<mat-slide-toggle formControlName="isPrimary" class="slide-block"> <mat-slide-toggle formControlName="isPrimary" class="slide-block">
{{ 'widgets.rpc.button-primary' | translate }} {{ 'widgets.rpc.button-primary' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<section fxLayout="row wrap" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="textColor" formControlName="textColor"
icon="format_color_fill" icon="format_color_fill"

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
View File

@ -22,7 +22,7 @@
<mat-label translate>widgets.rpc.slide-toggle-label</mat-label> <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
<input matInput formControlName="title"> <input matInput formControlName="title">
</mat-form-field> </mat-form-field>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.rpc.label-position</mat-label> <mat-label translate>widgets.rpc.label-position</mat-label>
<mat-select formControlName="labelPosition"> <mat-select formControlName="labelPosition">

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
View File

@ -42,7 +42,7 @@
icon="format_color_fill" icon="format_color_fill"
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.minor-ticks-count</mat-label> <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
<input matInput type="number" min="0" formControlName="minorTicks"> <input matInput type="number" min="0" formControlName="minorTicks">
@ -71,7 +71,7 @@
<mat-slide-toggle formControlName="showBorder" class="slide-block"> <mat-slide-toggle formControlName="showBorder" class="slide-block">
{{ 'widgets.gauge.show-plate-border' | translate }} {{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorBorder" formControlName="colorBorder"
icon="format_color_fill" icon="format_color_fill"
@ -89,7 +89,7 @@
<mat-label translate>widgets.gauge.needle-circle-size</mat-label> <mat-label translate>widgets.gauge.needle-circle-size</mat-label>
<input matInput type="number" min="0" formControlName="needleCircleSize"> <input matInput type="number" min="0" formControlName="needleCircleSize">
</mat-form-field> </mat-form-field>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorNeedle" formControlName="colorNeedle"
icon="format_color_fill" icon="format_color_fill"

22
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
View File

@ -31,7 +31,7 @@
</tb-color-input> </tb-color-input>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.ticks-settings</legend> <legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.min-value</mat-label> <mat-label translate>widgets.gauge.min-value</mat-label>
<input matInput type="number" formControlName="minValue"> <input matInput type="number" formControlName="minValue">
@ -41,7 +41,7 @@
<input matInput type="number" formControlName="maxValue"> <input matInput type="number" formControlName="maxValue">
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="0px" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.major-ticks-count</mat-label> <mat-label translate>widgets.gauge.major-ticks-count</mat-label>
<input matInput type="number" min="0" formControlName="majorTicksCount"> <input matInput type="number" min="0" formControlName="majorTicksCount">
@ -52,7 +52,7 @@
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
</section> </section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="0px" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.minor-ticks-count</mat-label> <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
<input matInput type="number" min="0" formControlName="minorTicks"> <input matInput type="number" min="0" formControlName="minorTicks">
@ -127,7 +127,7 @@
<legend class="group-title" translate>widgets.gauge.value-font</legend> <legend class="group-title" translate>widgets.gauge.value-font</legend>
<tb-widget-font formControlName="valueFont" [hasShadowColor]="true"></tb-widget-font> <tb-widget-font formControlName="valueFont" [hasShadowColor]="true"></tb-widget-font>
</fieldset> </fieldset>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorValueBoxRect" formControlName="colorValueBoxRect"
icon="format_color_fill" icon="format_color_fill"
@ -139,7 +139,7 @@
label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
</section> </section>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorValueBoxBackground" formControlName="colorValueBoxBackground"
icon="format_color_fill" icon="format_color_fill"
@ -168,7 +168,7 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.needle-settings</legend> <legend class="group-title" translate>widgets.gauge.needle-settings</legend>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorNeedle" formControlName="colorNeedle"
icon="format_color_fill" icon="format_color_fill"
@ -180,7 +180,7 @@
label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
</section> </section>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorNeedleShadowUp" formControlName="colorNeedleShadowUp"
icon="format_color_fill" icon="format_color_fill"
@ -294,7 +294,7 @@
<ng-template #radialGauge let-settingsForm="settingsForm"> <ng-template #radialGauge let-settingsForm="settingsForm">
<fieldset class="fields-group" [formGroup]="settingsForm"> <fieldset class="fields-group" [formGroup]="settingsForm">
<legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend> <legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.start-ticks-angle</mat-label> <mat-label translate>widgets.gauge.start-ticks-angle</mat-label>
<input matInput type="number" min="0" max="360" formControlName="startAngle"> <input matInput type="number" min="0" max="360" formControlName="startAngle">
@ -314,7 +314,7 @@
<ng-template #linearGauge let-settingsForm="settingsForm"> <ng-template #linearGauge let-settingsForm="settingsForm">
<fieldset class="fields-group" [formGroup]="settingsForm"> <fieldset class="fields-group" [formGroup]="settingsForm">
<legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend> <legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.bar-stroke-width</mat-label> <mat-label translate>widgets.gauge.bar-stroke-width</mat-label>
<input matInput type="number" min="0" formControlName="barStrokeWidth"> <input matInput type="number" min="0" formControlName="barStrokeWidth">
@ -325,7 +325,7 @@
label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
</section> </section>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorBar" formControlName="colorBar"
icon="format_color_fill" icon="format_color_fill"
@ -337,7 +337,7 @@
label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
</section> </section>
<section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <tb-color-input fxFlex
formControlName="colorBarProgress" formControlName="colorBarProgress"
icon="format_color_fill" icon="format_color_fill"

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
View File

@ -18,7 +18,7 @@
<section class="tb-widget-settings" [formGroup]="digitalGaugeWidgetSettingsForm" fxLayout="column"> <section class="tb-widget-settings" [formGroup]="digitalGaugeWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.common-settings</legend> <legend class="group-title" translate>widgets.gauge.common-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.min-value</mat-label> <mat-label translate>widgets.gauge.min-value</mat-label>
<input matInput type="number" formControlName="minValue"> <input matInput type="number" formControlName="minValue">
@ -182,7 +182,7 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.unit-title-and-timestamp-settings</legend> <legend class="group-title" translate>widgets.gauge.unit-title-and-timestamp-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="showUnitTitle"> <mat-slide-toggle fxFlex formControlName="showUnitTitle">
{{ 'widgets.gauge.show-unit-title' | translate }} {{ 'widgets.gauge.show-unit-title' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
@ -191,7 +191,7 @@
<input matInput formControlName="unitTitle"> <input matInput formControlName="unitTitle">
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="showTimestamp"> <mat-slide-toggle fxFlex formControlName="showTimestamp">
{{ 'widgets.gauge.show-timestamp' | translate }} {{ 'widgets.gauge.show-timestamp' | translate }}
</mat-slide-toggle> </mat-slide-toggle>

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
View File

@ -40,7 +40,7 @@
<div fxLayout="column" fxLayoutGap="0.5em"> <div fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<section class="tb-widget-settings" fxLayout="column"> <section class="tb-widget-settings" fxLayout="column">
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label translate>widgets.gauge.highlight-from</mat-label> <mat-label translate>widgets.gauge.highlight-from</mat-label>
<input matInput type="number" formControlName="from"> <input matInput type="number" formControlName="from">

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
View File

@ -45,7 +45,7 @@
<div fxLayout="column" fxLayoutGap="0.5em"> <div fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<section class="tb-widget-settings" fxLayout="column"> <section class="tb-widget-settings" fxLayout="column">
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gpio.pin</mat-label> <mat-label translate>widgets.gpio.pin</mat-label>
<input required matInput type="number" min="1" step="1" formControlName="pin"> <input required matInput type="number" min="1" step="1" formControlName="pin">
@ -55,7 +55,7 @@
<input required matInput formControlName="label"> <input required matInput formControlName="label">
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gpio.row</mat-label> <mat-label translate>widgets.gpio.row</mat-label>
<input required matInput type="number" min="0" step="1" formControlName="row"> <input required matInput type="number" min="0" step="1" formControlName="row">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
View File

@ -28,7 +28,7 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend> <legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.true-label</mat-label> <mat-label translate>widgets.input-widgets.true-label</mat-label>
<input matInput formControlName="trueValue"> <input matInput formControlName="trueValue">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
View File

@ -21,7 +21,7 @@
</tb-update-attribute-general-settings> </tb-update-attribute-general-settings>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend> <legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.min-value</mat-label> <mat-label translate>widgets.input-widgets.min-value</mat-label>
<input matInput type="number" step="any" formControlName="minValue"> <input matInput type="number" step="any" formControlName="minValue">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
View File

@ -21,7 +21,7 @@
</tb-update-attribute-general-settings> </tb-update-attribute-general-settings>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend> <legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.min-value</mat-label> <mat-label translate>widgets.input-widgets.min-value</mat-label>
<input matInput type="number" step="1" formControlName="minValue"> <input matInput type="number" step="1" formControlName="minValue">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
View File

@ -37,7 +37,7 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend> <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.widget-mode</mat-label> <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
<mat-select formControlName="widgetMode"> <mat-select formControlName="widgetMode">

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
View File

@ -25,7 +25,7 @@
<mat-slide-toggle formControlName="showResultMessage" class="slide-block"> <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
{{ 'widgets.input-widgets.show-result-message' | translate }} {{ 'widgets.input-widgets.show-result-message' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.latitude-key-name</mat-label> <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
<input matInput formControlName="latKeyName"> <input matInput formControlName="latKeyName">
@ -47,7 +47,7 @@
<mat-slide-toggle formControlName="showLabel" class="slide-block"> <mat-slide-toggle formControlName="showLabel" class="slide-block">
{{ 'widgets.input-widgets.show-label' | translate }} {{ 'widgets.input-widgets.show-label' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.latitude-label</mat-label> <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
<input matInput formControlName="latLabel"> <input matInput formControlName="latLabel">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
View File

@ -45,7 +45,7 @@
<mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;"> <mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;">
{{ 'widgets.input-widgets.update-all-values' | translate }} {{ 'widgets.input-widgets.update-all-values' | translate }}
</mat-checkbox> </mat-checkbox>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.save-button-label</mat-label> <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
<input matInput formControlName="saveButtonLabel"> <input matInput formControlName="saveButtonLabel">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
View File

@ -21,7 +21,7 @@
</tb-update-attribute-general-settings> </tb-update-attribute-general-settings>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend> <legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.input-widgets.min-length</mat-label> <mat-label translate>widgets.input-widgets.min-length</mat-label>
<input matInput type="number" step="1" min="0" formControlName="minLength"> <input matInput type="number" step="1" min="0" formControlName="minLength">

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
View File

@ -18,7 +18,7 @@
<section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup"> <section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup">
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.common-map-settings</legend> <legend class="group-title" translate>widgets.maps.common-map-settings</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-datasources-key-autocomplete fxFlex <tb-datasources-key-autocomplete fxFlex
[fxShow]="provider === mapProvider.image" [fxShow]="provider === mapProvider.image"
required required
@ -55,7 +55,7 @@
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayoutGap="8px"> <section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.maps.default-map-zoom-level</mat-label> <mat-label translate>widgets.maps.default-map-zoom-level</mat-label>
<input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel"> <input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel">
@ -65,7 +65,7 @@
<input matInput formControlName="defaultCenterPosition"> <input matInput formControlName="defaultCenterPosition">
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
<section fxFlex fxLayout="column"> <section fxFlex fxLayout="column">
<mat-slide-toggle formControlName="disableScrollZooming" class="slide-block"> <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
{{ 'widgets.maps.disable-scroll-zooming' | translate }} {{ 'widgets.maps.disable-scroll-zooming' | translate }}

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
View File

@ -34,7 +34,7 @@
<mat-slide-toggle formControlName="zoomOnClick" class="slide-block"> <mat-slide-toggle formControlName="zoomOnClick" class="slide-block">
{{ 'widgets.maps.zoom-on-cluster-click' | translate }} {{ 'widgets.maps.zoom-on-cluster-click' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.maps.max-cluster-zoom</mat-label> <mat-label translate>widgets.maps.max-cluster-zoom</mat-label>
<input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom"> <input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom">

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
View File

@ -18,7 +18,7 @@
<section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup"> <section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.markers-settings</legend> <legend class="group-title" translate>widgets.maps.markers-settings</legend>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.maps.marker-offset-x</mat-label> <mat-label translate>widgets.maps.marker-offset-x</mat-label>
<input matInput type="number" formControlName="markerOffsetX"> <input matInput type="number" formControlName="markerOffsetX">
@ -113,7 +113,7 @@
functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}" functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
helpId="widget/lib/map/tooltip_fn"> helpId="widget/lib/map/tooltip_fn">
</tb-js-func> </tb-js-func>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.maps.tooltip-offset-x</mat-label> <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
<input matInput type="number" formControlName="tooltipOffsetX"> <input matInput type="number" formControlName="tooltipOffsetX">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
View File

@ -18,7 +18,7 @@
<section class="tb-widget-settings" [formGroup]="routeMapSettingsFormGroup"> <section class="tb-widget-settings" [formGroup]="routeMapSettingsFormGroup">
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.route-map-settings</legend> <legend class="group-title" translate>widgets.maps.route-map-settings</legend>
<section fxLayout="row" fxLayoutGap="8px"> <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.maps.stroke-weight</mat-label> <mat-label translate>widgets.maps.stroke-weight</mat-label>
<input matInput type="number" min="0" formControlName="strokeWeight"> <input matInput type="number" min="0" formControlName="strokeWeight">

29
ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
View File

@ -19,8 +19,8 @@
<mat-tab label="{{ 'widget-config.data' | translate }}" *ngIf="widgetType !== widgetTypes.static"> <mat-tab label="{{ 'widget-config.data' | translate }}" *ngIf="widgetType !== widgetTypes.static">
<div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px"> <div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
<div *ngIf="displayTimewindowConfig()" fxFlex="100" <div *ngIf="displayTimewindowConfig()" fxFlex="100"
fxLayout.xs="column" fxLayoutGap="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"> fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutGap="8px" fxFlex.gt-xs> <div fxLayout="column" fxFlex.gt-xs>
<mat-checkbox formControlName="useDashboardTimewindow"> <mat-checkbox formControlName="useDashboardTimewindow">
{{ 'widget-config.use-dashboard-timewindow' | translate }} {{ 'widget-config.use-dashboard-timewindow' | translate }}
</mat-checkbox> </mat-checkbox>
@ -29,7 +29,7 @@
</mat-checkbox> </mat-checkbox>
</div> </div>
<section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start" <section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start"
fxFlex.gt-xs style="margin-bottom: 16px;"> fxFlex.gt-xs>
<span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate <span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate
style="padding-right: 8px;">widget-config.timewindow</span> style="padding-right: 8px;">widget-config.timewindow</span>
<tb-timewindow asButton="true" <tb-timewindow asButton="true"
@ -43,7 +43,7 @@
</div> </div>
<div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center"> <div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center">
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
fxLayoutGap="8px"> fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block" floatLabel="always"> <mat-form-field fxFlex class="mat-block" floatLabel="always">
<mat-label translate>alarm.alarm-status-list</mat-label> <mat-label translate>alarm.alarm-status-list</mat-label>
<mat-select formControlName="alarmStatusList" multiple <mat-select formControlName="alarmStatusList" multiple
@ -63,8 +63,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center">
fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block" floatLabel="always"> <mat-form-field fxFlex class="mat-block" floatLabel="always">
<mat-label translate>alarm.alarm-type-list</mat-label> <mat-label translate>alarm.alarm-type-list</mat-label>
<mat-chip-grid #alarmTypeChipList formControlName="alarmTypeList"> <mat-chip-grid #alarmTypeChipList formControlName="alarmTypeList">
@ -355,7 +354,7 @@
<mat-slide-toggle class="mat-slide" formControlName="showTitle"> <mat-slide-toggle class="mat-slide" formControlName="showTitle">
{{ 'widget-config.display-title' | translate }} {{ 'widget-config.display-title' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px"> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label translate>widget-config.title</mat-label> <mat-label translate>widget-config.title</mat-label>
<input matInput formControlName="title"> <input matInput formControlName="title">
@ -365,12 +364,12 @@
<input matInput formControlName="titleTooltip"> <input matInput formControlName="titleTooltip">
</mat-form-field> </mat-form-field>
</div> </div>
<fieldset class="fields-group" fxLayoutGap="8px" style="margin: 0"> <fieldset class="fields-group" fxLayoutGap.gt-xs="8px" style="margin: 0">
<legend class="group-title" translate>widget-config.title-icon</legend> <legend class="group-title" translate>widget-config.title-icon</legend>
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> <mat-slide-toggle class="mat-slide" formControlName="showTitleIcon">
{{ 'widget-config.display-icon' | translate }} {{ 'widget-config.display-icon' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="8px"> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px">
<tb-material-icon-select fxFlex <tb-material-icon-select fxFlex
formControlName="titleIcon"> formControlName="titleIcon">
</tb-material-icon-select> </tb-material-icon-select>
@ -404,8 +403,8 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widget-config.widget-style</legend> <legend class="group-title" translate>widget-config.widget-style</legend>
<div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap="8px" class="tb-widget-style"> <div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap.gt-xs="8px" class="tb-widget-style">
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
<tb-color-input fxFlex <tb-color-input fxFlex
label="{{'widget-config.background-color' | translate}}" label="{{'widget-config.background-color' | translate}}"
icon="format_color_fill" icon="format_color_fill"
@ -419,7 +418,7 @@
formControlName="color"> formControlName="color">
</tb-color-input> </tb-color-input>
</div> </div>
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label translate>widget-config.padding</mat-label> <mat-label translate>widget-config.padding</mat-label>
<input matInput formControlName="padding"> <input matInput formControlName="padding">
@ -477,8 +476,8 @@
<fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider"> <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider">
<legend class="group-title" translate>widget-config.mobile-mode-settings</legend> <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
<mat-expansion-panel class="tb-settings"> <mat-expansion-panel class="tb-settings">
<mat-expansion-panel-header> <mat-expansion-panel-header style="height: 100%;">
<mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap="8px" fxFlex="70"> <mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex="70">
<mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center"> <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
{{ 'widget-config.mobile-hide' | translate }} {{ 'widget-config.mobile-hide' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
@ -491,7 +490,7 @@
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label translate>widget-config.order</mat-label> <mat-label translate>widget-config.order</mat-label>
<input matInput formControlName="mobileOrder" type="number" step="1"> <input matInput formControlName="mobileOrder" type="number" step="1">

4
ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
View File

@ -124,13 +124,13 @@
<textarea matInput formControlName="description" rows="2"></textarea> <textarea matInput formControlName="description" rows="2"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div style="padding-bottom: 16px;" translate>dashboard.mobile-app-settings</div> <div translate>dashboard.mobile-app-settings</div>
<tb-image-input fxFlex <tb-image-input fxFlex
label="{{'dashboard.image' | translate}}" label="{{'dashboard.image' | translate}}"
maxSizeByte="524288" maxSizeByte="524288"
formControlName="image"> formControlName="image">
</tb-image-input> </tb-image-input>
<mat-checkbox fxFlex formControlName="mobileHide" style="padding-bottom: 16px; padding-top: 16px;"> <mat-checkbox fxFlex formControlName="mobileHide">
{{ 'dashboard.mobile-hide' | translate }} {{ 'dashboard.mobile-hide' | translate }}
</mat-checkbox> </mat-checkbox>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">

2
ui-ngx/src/app/shared/components/html.component.html
View File

@ -18,7 +18,7 @@
<div class="tb-html" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}" <div class="tb-html" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
tb-fullscreen tb-fullscreen
[fullscreen]="fullscreen" fxLayout="column"> [fullscreen]="fullscreen" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-html-toolbar"> <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-html-toolbar">
<label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label> <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
<span fxFlex></span> <span fxFlex></span>
<button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()"> <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()">

1
ui-ngx/src/app/shared/components/image-input.component.scss
View File

@ -23,6 +23,7 @@ $previewSize: 96px !default;
.tb-container { .tb-container {
margin-top: 0; margin-top: 0;
padding: 0;
label.tb-title { label.tb-title {
display: block; display: block;
padding-bottom: 8px; padding-bottom: 8px;

2
ui-ngx/src/app/shared/components/js-func.component.html
View File

@ -18,7 +18,7 @@
<div class="tb-js-func" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-js-func-title': functionTitle}" <div class="tb-js-func" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-js-func-title': functionTitle}"
tb-fullscreen tb-fullscreen
[fullscreen]="fullscreen" fxLayout="column"> [fullscreen]="fullscreen" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-js-func-toolbar"> <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-js-func-toolbar">
<label *ngIf="functionTitle" class="tb-title no-padding" <label *ngIf="functionTitle" class="tb-title no-padding"
[ngClass]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">{{functionTitle + ': f(' + functionArgsString + ')' }}</label> [ngClass]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">{{functionTitle + ': f(' + functionArgsString + ')' }}</label>
<label *ngIf="!functionTitle" class="tb-title no-padding" <label *ngIf="!functionTitle" class="tb-title no-padding"

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

@ -17,7 +17,7 @@
--> -->
<div class="markdown-content" [ngClass]="{'tb-edit-mode': !readonly}" <div class="markdown-content" [ngClass]="{'tb-edit-mode': !readonly}"
tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()"> tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
<div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="markdown-editor-toolbar"> <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="markdown-editor-toolbar">
<label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label> <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
<span fxFlex></span> <span fxFlex></span>
<button [fxShow]="!editorMode" <button [fxShow]="!editorMode"

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

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
.markdown-content { .markdown-content {
min-width: 400px; min-width: 300px;
&.tb-edit-mode { &.tb-edit-mode {
.tb-markdown-view-container { .tb-markdown-view-container {
border: 1px solid #c0c0c0; border: 1px solid #c0c0c0;

3
ui-ngx/src/styles.scss
View File

@ -1486,7 +1486,8 @@ mat-label {
} }
@media #{$mat-lt-md} { @media #{$mat-lt-md} {
.mat-mdc-form-field { .mat-mdc-form-field.mat-mdc-form-field-has-icon-suffix,
.mat-mdc-form-field.mat-mdc-form-field-has-icon-prefix{
.mat-mdc-form-field-infix { .mat-mdc-form-field-infix {
width: auto; width: auto;
} }

Write Preview
Loading…
Cancel
Save