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
6edc66c715
commit
1bdf49574d
16 changed files with 91 additions and 94 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. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
  2. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
  3. 7
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
  4. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
  5. 20
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
  6. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
  7. 18
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
  8. 16
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
  9. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
  10. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
  11. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
  12. 18
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
  13. 38
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
  14. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
  15. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
  16. 20
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
View File

@ -173,7 +173,7 @@
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div>{{ 'tooltip.value' | translate }}</div> <div>{{ 'tooltip.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-row items-center justify-start gap-2">
<tb-font-settings formControlName="tooltipValueFont" <tb-font-settings formControlName="tooltipValueFont"
[initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipValueColor').value }" [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipValueColor').value }"
[previewText]="tooltipValuePreviewFn"> [previewText]="tooltipValuePreviewFn">
@ -188,8 +188,8 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
{{ 'tooltip.date' | translate }} {{ 'tooltip.date' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
<tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
formControlName="tooltipDateFormat"></tb-date-format-select> formControlName="tooltipDateFormat"></tb-date-format-select>
<tb-font-settings formControlName="tooltipDateFont" <tb-font-settings formControlName="tooltipDateFont"
[initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }" [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }"

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
View File

@ -18,18 +18,18 @@
<div class="tb-form-row no-padding no-border" style="gap: 0; width: 100%;" [formGroup]="advancedRangeLevelFormGroup"> <div class="tb-form-row no-padding no-border" style="gap: 0; width: 100%;" [formGroup]="advancedRangeLevelFormGroup">
<div class="range-container"> <div class="range-container">
<div class="range-input range-input-fields"> <div class="range-input range-input-fields">
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="flex flex-1 flex-row items-center justify-start">
<div class="range-text" translate>widgets.color.from</div> <div class="range-text" translate>widgets.color.from</div>
<tb-value-source-data-key fxFlex <tb-value-source-data-key class="flex-1"
formControlName="from" formControlName="from"
[aliasController]="aliasController" [aliasController]="aliasController"
[dataKeyCallbacks]="dataKeyCallbacks" [dataKeyCallbacks]="dataKeyCallbacks"
[datasource]="datasource"> [datasource]="datasource">
</tb-value-source-data-key> </tb-value-source-data-key>
</div> </div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="flex flex-1 flex-row items-center justify-start">
<div class="range-text" translate>widgets.color.to</div> <div class="range-text" translate>widgets.color.to</div>
<tb-value-source-data-key fxFlex <tb-value-source-data-key class="flex-1"
formControlName="to" formControlName="to"
[aliasController]="aliasController" [aliasController]="aliasController"
[dataKeyCallbacks]="dataKeyCallbacks" [dataKeyCallbacks]="dataKeyCallbacks"

7
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
View File

@ -20,14 +20,13 @@
<div class="tb-auto-date-format-settings-panel-content"> <div class="tb-auto-date-format-settings-panel-content">
<div class="tb-form-row" *ngFor="let unit of formatTimeUnits"> <div class="tb-form-row" *ngFor="let unit of formatTimeUnits">
<div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div> <div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div>
<div fxFlex fxLayout="column" fxLayoutGap="8px" <div class="flex flex-1 flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-4">
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutGap.gt-xs="16px">
<mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic">
<input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}"> <input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}">
<div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div> <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
</mat-form-field> </mat-form-field>
<mat-divider fxHide fxShow.gt-xs vertical></mat-divider> <mat-divider class="lt-sm:!hidden" vertical></mat-divider>
<div class="preview-text" fxFlex>{{ previewText[unit] }}</div> <div class="preview-text flex-1">{{ previewText[unit] }}</div>
</div> </div>
</div> </div>
</div> </div>

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
View File

@ -19,18 +19,18 @@
<div class="tb-background-settings-title" translate>widgets.background.background-settings</div> <div class="tb-background-settings-title" translate>widgets.background.background-settings</div>
<div class="tb-background-settings-panel-content"> <div class="tb-background-settings-panel-content">
<div class="tb-form-panel tb-background-form-panel"> <div class="tb-form-panel tb-background-form-panel">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div class="flex flex-row items-center justify-start gap-4">
<div class="tb-form-panel-title" translate>widgets.background.background</div> <div class="tb-form-panel-title" translate>widgets.background.background</div>
<tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs"> <tb-toggle-select formControlName="type" class="flex-1" selectMediaBreakpoint="xs">
<tb-toggle-option *ngFor="let type of backgroundTypes" <tb-toggle-option *ngFor="let type of backgroundTypes"
[value]="type"> [value]="type">
{{ backgroundTypeTranslationsMap.get(type) | translate }} {{ backgroundTypeTranslationsMap.get(type) | translate }}
</tb-toggle-option> </tb-toggle-option>
</tb-toggle-select> </tb-toggle-select>
</div> </div>
<tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image" <tb-gallery-image-input [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.image"
formControlName="imageUrl"></tb-gallery-image-input> formControlName="imageUrl"></tb-gallery-image-input>
<div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color" <div [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.color"
class="tb-form-row space-between tb-background-color-field"> class="tb-form-row space-between tb-background-color-field">
<div translate>widgets.color.color</div> <div translate>widgets.color.color</div>
<tb-color-input asBoxInput <tb-color-input asBoxInput

20
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
View File

@ -16,9 +16,9 @@
--> -->
<ng-container [formGroup]="colorRangeListFormGroup"> <ng-container [formGroup]="colorRangeListFormGroup">
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode; else basicMode"> <div class="flex flex-row items-center justify-start" *ngIf="advancedMode; else basicMode">
<div fxFlex class="tb-form-panel-title" translate>widgets.color.settings-type</div> <div class="tb-form-panel-title flex-1" translate>widgets.color.settings-type</div>
<tb-toggle-select formControlName="advancedMode" fxFlex> <tb-toggle-select formControlName="advancedMode" class="flex-1">
<tb-toggle-option [value]="false"> <tb-toggle-option [value]="false">
{{ 'widgets.color.basic-mode' | translate }} {{ 'widgets.color.basic-mode' | translate }}
</tb-toggle-option> </tb-toggle-option>
@ -29,8 +29,8 @@
</div> </div>
<ng-template #basicMode> <ng-template #basicMode>
<div fxLayout="row" fxLayoutAlign="start center"> <div class="flex flex-row items-center justify-start">
<div fxFlex *ngIf="panelTitle" class="tb-form-panel-title">{{ panelTitle }}</div> <div *ngIf="panelTitle" class="tb-form-panel-title flex-1">{{ panelTitle }}</div>
</div> </div>
</ng-template> </ng-template>
@ -41,16 +41,16 @@
<div cdkDrag class="tb-draggable tb-advanced-range-drag" <div cdkDrag class="tb-draggable tb-advanced-range-drag"
[formGroup]="rangeFormGroup" [formGroup]="rangeFormGroup"
*ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;" *ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;"
[ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> [class.pb-2]="!isLast">
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="flex flex-1 flex-row items-center justify-start">
<div class="tb-form-row range-container"> <div class="tb-form-row range-container">
<div class="tb-value-range-text" translate>widgets.color.from</div> <div class="tb-value-range-text" translate>widgets.color.from</div>
<mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
<input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div> <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
<mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
<input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
@ -84,7 +84,7 @@
(cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')"> (cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')">
<div cdkDrag class="tb-draggable tb-advanced-range-drag" <div cdkDrag class="tb-draggable tb-advanced-range-drag"
*ngFor="let advancedRangeControl of advancedRangeControls; trackBy: trackByAdvancedRange;let $index = index; last as isLast;" *ngFor="let advancedRangeControl of advancedRangeControls; trackBy: trackByAdvancedRange;let $index = index; last as isLast;"
[ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> [class.pb-2]="!isLast">
<tb-advanced-range [formControl]="advancedRangeControl" <tb-advanced-range [formControl]="advancedRangeControl"
[aliasController]="aliasController" [aliasController]="aliasController"
[dataKeyCallbacks]="dataKeyCallbacks" [dataKeyCallbacks]="dataKeyCallbacks"

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
View File

@ -39,7 +39,7 @@
</div> </div>
</ng-template> </ng-template>
</mat-menu> </mat-menu>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-button <button mat-button
color="primary" color="primary"
type="button" type="button"

18
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
View File

@ -17,8 +17,8 @@
--> -->
<div class="tb-color-settings-panel" [formGroup]="colorSettingsFormGroup"> <div class="tb-color-settings-panel" [formGroup]="colorSettingsFormGroup">
<div class="tb-color-settings-title" translate>widgets.color.color-settings</div> <div class="tb-color-settings-title" translate>widgets.color.color-settings</div>
<div fxLayout="row"> <div class="flex flex-row">
<tb-toggle-select formControlName="type" fxFlex.xs fxFlex="70%"> <tb-toggle-select formControlName="type" class="max-w-70% flex-full xs:flex-1">
<tb-toggle-option *ngFor="let type of colorTypes" <tb-toggle-option *ngFor="let type of colorTypes"
[value]="type"> [value]="type">
{{ colorTypeTranslationsMap.get(type) | translate }} {{ colorTypeTranslationsMap.get(type) | translate }}
@ -31,9 +31,9 @@
formControlName="color"> formControlName="color">
</tb-color-input> </tb-color-input>
</div> </div>
<div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.constant"> <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.constant">
</div> </div>
<div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.gradient"> <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.gradient">
<tb-gradient class="tb-gradient-panel" <tb-gradient class="tb-gradient-panel"
formControlName="gradient" formControlName="gradient"
[minValue]="minValue" [minValue]="minValue"
@ -45,7 +45,7 @@
[popover]="popover"> [popover]="popover">
</tb-gradient> </tb-gradient>
</div> </div>
<div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.range"> <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.range">
<tb-color-range-list class="tb-color-ranges-panel" <tb-color-range-list class="tb-color-ranges-panel"
formControlName="rangeList" formControlName="rangeList"
panelTitle="{{ 'widgets.color.value-range' | translate }}" panelTitle="{{ 'widgets.color.value-range' | translate }}"
@ -56,7 +56,7 @@
[popover]="popover"> [popover]="popover">
</tb-color-range-list> </tb-color-range-list>
</div> </div>
<div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.function"> <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.function">
<ng-container *ngTemplateOutlet="function"></ng-container> <ng-container *ngTemplateOutlet="function"></ng-container>
</div> </div>
<div class="tb-color-settings-panel-buttons"> <div class="tb-color-settings-panel-buttons">
@ -66,8 +66,8 @@
color="primary" color="primary"
type="button" type="button"
[matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}"> [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
<span fxHide.xs>{{ 'widgets.color.copy-color-settings-from' | translate }}</span> <span class="xs:!hidden">{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
<span fxHide.gt-xs>{{ 'widgets.color.copy-from' | translate }}</span> <span class="gt-xs:!hidden">{{ 'widgets.color.copy-from' | translate }}</span>
</button> </button>
<mat-menu #settingsSourcesMenu="matMenu"> <mat-menu #settingsSourcesMenu="matMenu">
<ng-template matMenuContent let-menuWidth="menuWidth"> <ng-template matMenuContent let-menuWidth="menuWidth">
@ -76,7 +76,7 @@
</div> </div>
</ng-template> </ng-template>
</mat-menu> </mat-menu>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-button <button mat-button
color="primary" color="primary"
type="button" type="button"

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

@ -37,7 +37,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
{{ 'widgets.count.label' | translate }} {{ 'widgets.count.label' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-1 flex-row items-center justify-start gap-2">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
@ -52,11 +52,11 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
{{ 'widgets.count.icon' | translate }} {{ 'widgets.count.icon' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-1 flex-row items-center justify-start gap-2">
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
<tb-material-icon-select asBoxInput <tb-material-icon-select asBoxInput
iconClearButton iconClearButton
[color]="countWidgetConfigForm.get('iconColor').value?.color" [color]="countWidgetConfigForm.get('iconColor').value?.color"
@ -73,18 +73,18 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIconBackground"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIconBackground">
{{ 'widgets.count.icon-background' | translate }} {{ 'widgets.count.icon-background' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-1 flex-row items-center justify-start gap-2">
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select> <tb-css-unit-select class="flex-1" formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
<tb-color-settings formControlName="iconBackgroundColor" settingsKey="{{'widgets.count.icon-background' | translate }}"> <tb-color-settings formControlName="iconBackgroundColor" settingsKey="{{'widgets.count.icon-background' | translate }}">
</tb-color-settings> </tb-color-settings>
</div> </div>
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.count.value</div> <div translate>widgets.count.value</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-row items-center justify-start gap-2">
<tb-font-settings formControlName="valueFont" <tb-font-settings formControlName="valueFont"
previewText="10"> previewText="10">
</tb-font-settings> </tb-font-settings>
@ -96,11 +96,11 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChevron"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChevron">
{{ 'widgets.count.chevron' | translate }} {{ 'widgets.count.chevron' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-1 flex-row items-center justify-start gap-2">
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<tb-css-unit-select fxFlex formControlName="chevronSizeUnit"></tb-css-unit-select> <tb-css-unit-select class="flex-1" formControlName="chevronSizeUnit"></tb-css-unit-select>
<tb-color-input asBoxInput <tb-color-input asBoxInput
colorClearButton colorClearButton
formControlName="chevronColor"> formControlName="chevronColor">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<div [formGroup]="cssSizeFormGroup" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div [formGroup]="cssSizeFormGroup" class="flex flex-row items-center justify-start gap-2">
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number" [class.flex]="flex"> <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number" [class.flex]="flex">
<input matInput [required]="required" <input matInput [required]="required"
type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}"> type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
View File

@ -21,7 +21,7 @@
<mat-chip-row class="tb-datakey-chip" *ngIf="modelValue?.type" <mat-chip-row class="tb-datakey-chip" *ngIf="modelValue?.type"
[removable]="removable" [removable]="removable"
(removed)="removeKey()"> (removed)="removeKey()">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip"> <div class="tb-attribute-chip flex flex-row items-center justify-start gap-1">
<div class="tb-chip-labels"> <div class="tb-chip-labels">
<div class="tb-chip-label tb-chip-text tb-chip-icon"> <div class="tb-chip-label tb-chip-text tb-chip-icon">
<ng-container *ngIf="isEntityDatasource"> <ng-container *ngIf="isEntityDatasource">
@ -65,7 +65,7 @@
[required]="required" [required]="required"
[formControl]="keyFormControl" [formControl]="keyFormControl"
matAutocompleteOrigin matAutocompleteOrigin
[fxHide]="!!modelValue?.type" [class.!hidden]="!!modelValue?.type"
[readonly]="!!modelValue?.type" [readonly]="!!modelValue?.type"
#origin="matAutocompleteOrigin" #origin="matAutocompleteOrigin"
[matAutocompleteConnectedTo]="origin" [matAutocompleteConnectedTo]="origin"

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
View File

@ -19,7 +19,7 @@
<div class="tb-date-format-settings-title" translate>date.custom-date</div> <div class="tb-date-format-settings-title" translate>date.custom-date</div>
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="fixed-title-width" translate>date.format</div> <div class="fixed-title-width" translate>date.format</div>
<mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="tb-date-format-input flex-1" required appearance="outline" subscriptSizing="dynamic">
<input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}">
<div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div> <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
</mat-form-field> </mat-form-field>
@ -27,7 +27,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div class="tb-form-row no-border no-padding date-format-preview"> <div class="tb-form-row no-border no-padding date-format-preview">
<div class="fixed-title-width" translate>date.preview</div> <div class="fixed-title-width" translate>date.preview</div>
<div class="preview-text" fxFlex>{{ previewText }}</div> <div class="preview-text flex-1">{{ previewText }}</div>
</div> </div>
<div class="tb-date-format-settings-panel-buttons"> <div class="tb-date-format-settings-panel-buttons">
<button mat-button <button mat-button

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

@ -19,17 +19,17 @@
<div class="tb-font-settings-title" translate>widgets.widget-font.font-settings</div> <div class="tb-font-settings-title" translate>widgets.widget-font.font-settings</div>
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="fixed-title-width" translate>widgets.widget-font.size</div> <div class="fixed-title-width" translate>widgets.widget-font.size</div>
<div *ngIf="!autoScale" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> <div *ngIf="!autoScale" class="flex flex-1 flex-row items-center justify-start gap-3">
<mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number flex-1" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<tb-css-unit-select fxFlex formControlName="sizeUnit"></tb-css-unit-select> <tb-css-unit-select class="flex-1" formControlName="sizeUnit"></tb-css-unit-select>
</div> </div>
<div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div> <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
</div> </div>
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="fixed-title-width" translate>widgets.widget-font.font-family</div> <div class="fixed-title-width" translate>widgets.widget-font.font-family</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<input matInput #familyInput <input matInput #familyInput
formControlName="family" placeholder="{{ 'widget-config.set' | translate }}" formControlName="family" placeholder="{{ 'widget-config.set' | translate }}"
[matAutocomplete]="familyAutocomplete"> [matAutocomplete]="familyAutocomplete">
@ -51,7 +51,7 @@
</div> </div>
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="fixed-title-width" translate>widgets.widget-font.font-weight</div> <div class="fixed-title-width" translate>widgets.widget-font.font-weight</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}"> <mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option [value]="null"> <mat-option [value]="null">
</mat-option> </mat-option>
@ -63,7 +63,7 @@
</div> </div>
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="fixed-title-width" translate>widgets.widget-font.font-style</div> <div class="fixed-title-width" translate>widgets.widget-font.font-style</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}"> <mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option [value]="null"> <mat-option [value]="null">
</mat-option> </mat-option>
@ -75,7 +75,7 @@
</div> </div>
<div class="tb-form-row no-border no-padding" *ngIf="!disabledLineHeight"> <div class="tb-form-row no-border no-padding" *ngIf="!disabledLineHeight">
<div class="fixed-title-width" translate>widgets.widget-font.line-height</div> <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
<mat-form-field *ngIf="!autoScale" fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field *ngIf="!autoScale" class="flex-1" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div> <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
@ -83,7 +83,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div class="tb-form-row no-border no-padding font-preview"> <div class="tb-form-row no-border no-padding font-preview">
<div class="fixed-title-width" translate>widgets.widget-font.preview</div> <div class="fixed-title-width" translate>widgets.widget-font.preview</div>
<div class="preview-text" fxFlex [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div> <div class="preview-text flex-1" [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
</div> </div>
<div class="tb-font-settings-panel-buttons"> <div class="tb-font-settings-panel-buttons">
<button *ngIf="clearButton" <button *ngIf="clearButton"
@ -93,7 +93,7 @@
[disabled]="clearDisabled()"> [disabled]="clearDisabled()">
{{ 'action.clear' | translate }} {{ 'action.clear' | translate }}
</button> </button>
<span *ngIf="clearButton" fxFlex></span> <span *ngIf="clearButton" class="flex-1"></span>
<button mat-button <button mat-button
color="primary" color="primary"
type="button" type="button"

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

@ -17,9 +17,9 @@
--> -->
<ng-container [formGroup]="gradientFormGroup"> <ng-container [formGroup]="gradientFormGroup">
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode"> <div class="flex flex-row items-center justify-start" *ngIf="advancedMode">
<div fxFlex class="tb-form-panel-title" fxHide.xs translate>widgets.color.gradient-type</div> <div class="tb-form-panel-title flex-1 xs:!hidden" translate>widgets.color.gradient-type</div>
<tb-toggle-select formControlName="advancedMode" fxFlex> <tb-toggle-select formControlName="advancedMode" class="flex-1">
<tb-toggle-option [value]="false"> <tb-toggle-option [value]="false">
{{ 'widgets.color.basic-mode' | translate }} {{ 'widgets.color.basic-mode' | translate }}
</tb-toggle-option> </tb-toggle-option>
@ -41,7 +41,7 @@
<div translate>widgets.color.gradient-start</div> <div translate>widgets.color.gradient-start</div>
<div class="start-gradient-container"> <div class="start-gradient-container">
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="gradient-text" fxHide.xs translate>widgets.color.start-value</div> <div class="gradient-text xs:!hidden" translate>widgets.color.start-value</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
@ -61,7 +61,7 @@
<div cdkDrag class="tb-form-row no-padding no-border tb-draggable" <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
[formGroup]="gradientFormGroup" [formGroup]="gradientFormGroup"
*ngFor="let gradientFormGroup of gradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;" *ngFor="let gradientFormGroup of gradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
[ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> [class.pb-2]="!isLast">
<div class="gradient"> <div class="gradient">
<div class="gradient-container"> <div class="gradient-container">
<div translate>widgets.color.gradient-color</div> <div translate>widgets.color.gradient-color</div>
@ -77,8 +77,7 @@
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
<button class="tb-box-button" <button class="tb-box-button lt-lg:!hidden"
fxHide.lt-lg
mat-icon-button mat-icon-button
type="button" type="button"
cdkDragHandle cdkDragHandle
@ -101,7 +100,7 @@
<div translate>widgets.color.gradient-end</div> <div translate>widgets.color.gradient-end</div>
<div class="end-gradient-container"> <div class="end-gradient-container">
<div class="tb-form-row no-border no-padding"> <div class="tb-form-row no-border no-padding">
<div class="gradient-text" fxHide.xs translate>widgets.color.end-value</div> <div class="gradient-text xs:!hidden" translate>widgets.color.end-value</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
@ -119,11 +118,11 @@
<div class="gradient" formGroupName="gradientAdvanced"> <div class="gradient" formGroupName="gradientAdvanced">
<div class="gradient-container gradient-container-start" formGroupName="start"> <div class="gradient-container gradient-container-start" formGroupName="start">
<div class="tb-gradient-text"> <div class="tb-gradient-text">
<span fxHide.xs translate>widgets.color.gradient-start</span> <span class="xs:!hidden" translate>widgets.color.gradient-start</span>
<span fxHide fxShow.xs translate>widgets.color.gradient-start-min</span> <span class="gt-xs:!hidden" translate>widgets.color.gradient-start-min</span>
</div> </div>
<div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced"> <div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced">
<tb-value-source-data-key fxFlex <tb-value-source-data-key class="flex-1"
formControlName="source" formControlName="source"
[aliasController]="aliasController" [aliasController]="aliasController"
[dataKeyCallbacks]="dataKeyCallbacks" [dataKeyCallbacks]="dataKeyCallbacks"
@ -142,15 +141,15 @@
<div cdkDrag class="tb-form-row no-padding no-border tb-draggable" <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
[formGroup]="gradientFormGroup" [formGroup]="gradientFormGroup"
*ngFor="let gradientFormGroup of advancedGradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;" *ngFor="let gradientFormGroup of advancedGradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
[ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> [class.pb-2]="!isLast">
<div class="gradient"> <div class="gradient">
<div class="gradient-container"> <div class="gradient-container">
<div class="tb-gradient-text"> <div class="tb-gradient-text">
<span fxHide.xs translate>widgets.color.gradient-color</span> <span class="xs:!hidden" translate>widgets.color.gradient-color</span>
<span fxHide fxShow.xs translate>widgets.color.gradient-color-min</span> <span class="gt-xs:!hidden" translate>widgets.color.gradient-color-min</span>
</div> </div>
<div class="list-gradient-container list-gradient-container-advanced"> <div class="list-gradient-container list-gradient-container-advanced">
<tb-value-source-data-key fxFlex <tb-value-source-data-key class="flex-1"
formControlName="source" formControlName="source"
[aliasController]="aliasController" [aliasController]="aliasController"
[dataKeyCallbacks]="dataKeyCallbacks" [dataKeyCallbacks]="dataKeyCallbacks"
@ -169,8 +168,7 @@
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
<button class="tb-box-button" <button class="tb-box-button lt-lg:!hidden"
fxHide.lt-lg
mat-icon-button mat-icon-button
type="button" type="button"
cdkDragHandle cdkDragHandle
@ -191,11 +189,11 @@
<div class="gradient" formGroupName="gradientAdvanced"> <div class="gradient" formGroupName="gradientAdvanced">
<div class="gradient-container gradient-container-end" formGroupName="end"> <div class="gradient-container gradient-container-end" formGroupName="end">
<div class="tb-gradient-text"> <div class="tb-gradient-text">
<span fxHide.xs translate>widgets.color.gradient-end</span> <span class="xs:!hidden" translate>widgets.color.gradient-end</span>
<span fxHide fxShow.xs translate>widgets.color.gradient-end-min</span> <span class="gt-xs:!hidden" translate>widgets.color.gradient-end-min</span>
</div> </div>
<div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced"> <div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced">
<tb-value-source-data-key fxFlex <tb-value-source-data-key class="flex-1"
formControlName="source" formControlName="source"
[aliasController]="aliasController" [aliasController]="aliasController"
[dataKeyCallbacks]="dataKeyCallbacks" [dataKeyCallbacks]="dataKeyCallbacks"

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

@ -17,10 +17,10 @@
--> -->
<div class="tb-image-cards-select tb-form-panel stroked no-padding"> <div class="tb-image-cards-select tb-form-panel stroked no-padding">
<mat-expansion-panel class="tb-settings" [expanded]="expanded" disabled> <mat-expansion-panel class="tb-settings" [expanded]="expanded" disabled>
<mat-expansion-panel-header fxLayout="row wrap"> <mat-expansion-panel-header class="flex flex-row flex-wrap">
<div fxFlex class="tb-form-row no-border" [class.expanded]="expanded"> <div class="tb-form-row no-border flex-1" [class.expanded]="expanded">
<div class="fixed-title-width">{{ label }}</div> <div class="fixed-title-width">{{ label }}</div>
<mat-form-field class="tb-image-cards-value-field" fxFlex appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)"> <mat-form-field class="tb-image-cards-value-field flex-1" appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
<input readonly matInput [formControl]="valueFormControl" placeholder="{{ 'widget-config.set' | translate }}"> <input readonly matInput [formControl]="valueFormControl" placeholder="{{ 'widget-config.set' | translate }}">
<mat-icon matSuffix>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon> <mat-icon matSuffix>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
</mat-form-field> </mat-form-field>

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
View File

@ -17,7 +17,7 @@
--> -->
<div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup"> <div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup">
<mat-form-field fxFlex="33" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="max-w-33% flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="valueSource"> <mat-select formControlName="valueSource">
<mat-option [value]="'predefinedValue'"> <mat-option [value]="'predefinedValue'">
{{ 'widgets.value-source.predefined-value' | translate }} {{ 'widgets.value-source.predefined-value' | translate }}
@ -27,13 +27,13 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'predefinedValue'" <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'predefinedValue'"
appearance="outline" appearance="outline"
class="number flex" class="number flex"
subscriptSizing="dynamic"> subscriptSizing="dynamic">
<input matInput formControlName="value" type="number" placeholder="{{ 'widgets.value-source.value' | translate }}"> <input matInput formControlName="value" type="number" placeholder="{{ 'widgets.value-source.value' | translate }}">
</mat-form-field> </mat-form-field>
<mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'"
appearance="outline" appearance="outline"
class="flex" class="flex"
subscriptSizing="dynamic"> subscriptSizing="dynamic">
@ -53,7 +53,7 @@
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'"> <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'">
<input matInput type="text" placeholder="{{ entityAttributePlaceholder | translate }}" <input matInput type="text" placeholder="{{ entityAttributePlaceholder | translate }}"
#keyInput #keyInput
formControlName="attribute" formControlName="attribute"

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

@ -15,19 +15,19 @@
limitations under the License. limitations under the License.
--> -->
<section [formGroup]="widgetFontFormGroup" fxLayout="column"> <section [formGroup]="widgetFontFormGroup" class="flex flex-col">
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<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">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>{{ sizeTitle }}</mat-label> <mat-label translate>{{ sizeTitle }}</mat-label>
<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" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<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">
<mat-option [value]="'normal'"> <mat-option [value]="'normal'">
@ -41,7 +41,7 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>widgets.widget-font.font-weight</mat-label> <mat-label translate>widgets.widget-font.font-weight</mat-label>
<mat-select formControlName="weight"> <mat-select formControlName="weight">
<mat-option [value]="'normal'"> <mat-option [value]="'normal'">
@ -68,16 +68,16 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <section class="flex flex-row xs:flex-col gt-xs:gap-2">
<tb-color-input <tb-color-input
fxFlex class="flex-1"
formControlName="color" formControlName="color"
icon="format_color_fill" icon="format_color_fill"
label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
<tb-color-input <tb-color-input
*ngIf="hasShadowColor" *ngIf="hasShadowColor"
fxFlex class="flex-1"
formControlName="shadowColor" formControlName="shadowColor"
icon="format_color_fill" icon="format_color_fill"
label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton> label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>

Write Preview
Loading…
Cancel
Save