dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flex layout replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-11 18:26:03 +03:00
parent 408327b8da
commit 54941bbaf3
26 changed files with 141 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
View File

@ -15,12 +15,12 @@
limitations under the License.
-->
<div *ngIf="show()" fxLayout="row" fxLayoutAlign="end end" style="height: 100%; padding: 0 16px;">
<button fxHide.lt-md mat-flat-button color="primary" (click)="sendNotification($event)">
<div *ngIf="show()" class="flex flex-row justify-end items-end" style="height: 100%; padding: 0 16px;">
<button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
<mat-icon>send</mat-icon>
<span translate>notification.send-notification</span>
</button>
<button class="mat-elevation-z0" fxHide.gt-sm mat-mini-fab color="primary" (click)="sendNotification($event)">
<button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
<mat-icon>send</mat-icon>
</button>
</div>

6
ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<section fxLayout="row" fxLayoutAlign="space-between center" style="margin: 0 10px 4px; min-height: 36px">
<section class="flex flex-row justify-between items-center" style="margin: 0 10px 4px; min-height: 36px">
<div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
<button mat-button color="primary"
*ngIf="(notifications$ | async).length"
@ -37,8 +37,8 @@
</section>
</div>
<mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
<section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
<button fxFlex mat-button color="primary" (click)="viewAll($event)">
<section class="flex justify-center items-center" *ngIf="(notifications$ | async).length">
<button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
{{ 'notification.view-all' | translate }}
</button>
</section>

14
ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
View File

@ -17,7 +17,7 @@
-->
<mat-toolbar color="primary">
<h2 translate>device-profile.add</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<div [tb-help]="'deviceProfiles'"></div>
<button mat-icon-button
(click)="cancel()"
@ -27,7 +27,7 @@
</mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
<div mat-dialog-content>
<mat-horizontal-stepper [linear]="true"
#addDeviceProfileStepper
@ -67,7 +67,7 @@
[ruleChainType]="edgeRuleChainType">
<span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
</tb-rule-chain-autocomplete>
<mat-form-field fxHide class="mat-block">
<mat-form-field class="mat-block !hidden">
<mat-label translate>device-profile.type</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@ -78,7 +78,7 @@
{{ 'device-profile.type-required' | translate }}
</mat-error>
</mat-form-field>
<tb-gallery-image-input fxFlex
<tb-gallery-image-input class="flex-1"
label="{{'device-profile.image' | translate}}"
formControlName="image">
</tb-gallery-image-input>
@ -134,11 +134,11 @@
</mat-horizontal-stepper>
</div>
<div mat-dialog-actions style="padding: 0">
<div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
<div class="dialog-actions-row flex-1 flex flex-row justify-end items-center">
<button mat-stroked-button *ngIf="selectedIndex > 0"
[disabled]="(isLoading$ | async)"
(click)="previousStep()">{{ 'action.back' | translate }}</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-stroked-button
color="primary"
*ngIf="showNext"
@ -146,7 +146,7 @@
(click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
</div>
<mat-divider style="width: 100%"></mat-divider>
<div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
<div class="dialog-actions-row flex-1 flex flex-row justify-end items-center gap-2">
<button mat-button
[disabled]="(isLoading$ | async)"
(click)="cancel()">{{ 'action.cancel' | translate }}</button>

14
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
View File

@ -15,8 +15,8 @@
limitations under the License.
-->
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup">
<div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
<div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode">
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<input required type="number" matInput
step="1" min="1" max="2147483647"
@ -36,9 +36,9 @@
</mat-error>
</mat-form-field>
</div>
<div fxFlex fxLayout="column" [fxShow]="dynamicMode">
<div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxFlex="40" fxLayout="column">
<div class="flex-1 flex flex-col" [class.!hidden]="!dynamicMode">
<div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
<div class="flex-full max-w-40% flex flex-col">
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
<mat-option [value]="null">
@ -50,13 +50,13 @@
</mat-select>
</mat-form-field>
</div>
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
<input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
</mat-form-field>
</div>
<div *ngIf="inheritMode"
fxLayout="column"
class="flex flex-col"
style="padding-top: 6px">
<mat-checkbox formControlName="inherit">
{{ 'filter.inherit-owner' | translate}}

16
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
View File

@ -15,21 +15,21 @@
limitations under the License.
-->
<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex>
<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
{{'filter.dynamic-value' | translate}}
</div>
</mat-panel-title>
<span fxFlex></span>
<span class="flex-1"></span>
</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxFlex="40" fxLayout="column">
<div class="flex-1 flex flex-col">
<div class="flex flex-row justify-start items-center gap-2">
<div class="flex-full max-w-40% flex flex-col">
<mat-form-field class="mat-block">
<mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
<mat-option [value]="null">
@ -41,7 +41,7 @@
</mat-select>
</mat-form-field>
</div>
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<mat-form-field class="mat-block source-attribute">
<input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
</mat-form-field>

13
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
<mat-toolbar color="primary">
<h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -29,7 +29,7 @@
</mat-progress-bar>
<div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<tb-key-filter-list
[displayUserParameters]="false"
[allowUserDynamicSource]="false"
@ -49,13 +49,14 @@
{{ 'device-profile.condition-type-required' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
<div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
<tb-alarm-duration-predicate-value
fxLayout="row" fxFlex formControlName="predicate"
class="flex-1 flex flex-row"
formControlName="predicate"
[alarmConditionType]="conditionFormGroup.get('spec.type').value"
>
</tb-alarm-duration-predicate-value>
<div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
<div class="flex-full max-w-23%" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-select formControlName="unit" required
placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
@ -73,7 +74,7 @@
</div>
</fieldset>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

6
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
View File

@ -15,15 +15,15 @@
limitations under the License.
-->
<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
<div class="flex flex-row justify-start items-center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
<span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
<div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center">
<div class="tb-alarm-rule-condition flex-1 flex flex-col justify-center items-stretch">
<tb-filter-text formControlName="condition"
[nowrap]="true"
required
addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}">
</tb-filter-text>
<span *ngIf="specText" class="tb-alarm-rule-condition-spec" [ngClass]="{disabled: this.disabled}" [innerHTML]="specText">
<span *ngIf="specText" class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
</span>
</div>
<button mat-icon-button

7
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
View File

@ -15,12 +15,12 @@
limitations under the License.
-->
<div fxLayout="column" [formGroup]="alarmRuleFormGroup">
<div class="flex flex-col" [formGroup]="alarmRuleFormGroup">
<tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId">
</tb-alarm-rule-condition>
<tb-alarm-schedule-info formControlName="schedule">
</tb-alarm-schedule-info>
<div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" fxLayout="row" fxLayoutAlign="start center">
<div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row justify-start items-center">
<span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
{{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
</span>
@ -35,8 +35,7 @@
<mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
</button>
</div>
<div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" fxLayout="column" fxLayoutAlign="start start"
fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center">
<div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col justify-start items-start gt-sm:flex-row gt-sm:items-center">
<span class="tb-alarm-rule-dashboard title">
{{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
</span>

4
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
<mat-toolbar color="primary">
<h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -32,7 +32,7 @@
formControlName="alarmSchedule">
</tb-alarm-schedule>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

2
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div fxLayout="row" fxLayoutAlign="start center" style="min-width: 0;">
<div class="flex flex-row justify-start items-center" style="min-width: 0;">
<span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span>
<span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)"
[innerHTML]="scheduleText">

32
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<section [formGroup]="alarmScheduleForm" fxLayout="column">
<section [formGroup]="alarmScheduleForm" class="flex flex-col">
<mat-form-field class="mat-block">
<mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
<mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
@ -35,13 +35,13 @@
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
<tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
<div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutGap="8px">
<div class="flex flex-col gt-md:flex-row gap-2">
<div class="flex flex-row gap-2">
<mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
{{ dayOfWeekTranslationsArray[day] | translate }}
</mat-checkbox>
</div>
<div fxLayout="row" fxLayoutGap="8px">
<div class="flex flex-row gap-2">
<mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
{{ dayOfWeekTranslationsArray[day] | translate }}
</mat-checkbox>
@ -50,22 +50,22 @@
<tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks')
? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<div fxLayout="row" fxLayoutGap="8px" fxFlex.gt-md>
<mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<div class="flex flex-row gap-2 gt-md:flex-1">
<mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
<mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
</mat-form-field>
<mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
<mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
<mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
</mat-form-field>
</div>
<div fxFlex fxLayoutAlign="center center" style="margin: auto">
<div class="flex-1 flex justify-center items-center" style="margin: auto">
<div style="text-align: center"
[innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
</div>
@ -75,26 +75,26 @@
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
<tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
<div *ngFor="let day of allDays" fxLayout="column" formArrayName="items" fxLayoutGap="1em">
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" [formGroupName]="''+day" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, day)">
<div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
<div class="flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start gap-2" [formGroupName]="''+day">
<mat-checkbox formControlName="enabled" class="flex-full max-w-17%" (change)="changeCustomScheduler($event, day)">
{{ dayOfWeekTranslationsArray[day] | translate }}
</mat-checkbox>
<div fxLayout="row" fxLayoutGap="8px" fxFlex>
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<div class="flex-1 flex flex-row gap-2">
<mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
<mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
</mat-form-field>
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
<mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
</mat-form-field>
</div>
<div fxFlex fxLayoutAlign="center center"
<div class="flex-1 flex justify-center items-center"
style="text-align: center"
[innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
</div>

12
ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
View File

@ -15,11 +15,11 @@
limitations under the License.
-->
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
last as isLast;" fxLayout="row" fxLayoutAlign="start center"
fxLayoutGap="8px" style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
<div class="create-alarm-rule" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
last as isLast;" class="flex flex-row justify-start items-center gap-2"
style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
<div class="create-alarm-rule flex-1 flex flex-row justify-start items-stretch gap-2">
<mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
<mat-label translate>alarm.severity</mat-label>
<mat-select formControlName="severity"
@ -35,7 +35,7 @@
</mat-error>
</mat-form-field>
<mat-divider vertical></mat-divider>
<tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required fxFlex>
<tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
</tb-alarm-rule>
</div>
<button *ngIf="!disabled"
@ -48,7 +48,7 @@
</button>
</div>
<div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
<span translate fxLayoutAlign="center center" style="margin: 16px 0"
<span translate class="flex justify-center items-center" style="margin: 16px 0"
class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
</div>
<div *ngIf="!disabled">

30
ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
View File

@ -15,15 +15,15 @@
limitations under the License.
-->
<mat-expansion-panel class="device-profile-alarm" fxFlex [formGroup]="alarmFormGroup" [(expanded)]="expanded">
<mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
{{ alarmTypeTitle }}
</div>
</mat-panel-title>
<span fxFlex></span>
<span class="flex-1"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeAlarm.emit()"
@ -34,9 +34,9 @@
</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="column" fxLayoutGap="0.5em">
<div class="flex flex-col gap-2">
<mat-divider></mat-divider>
<mat-form-field fxFlex floatLabel="always">
<mat-form-field class="flex-1" floatLabel="always">
<mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
<input required matInput formControlName="alarmType" placeholder="Enter alarm type">
<mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
@ -53,7 +53,7 @@
<mat-expansion-panel class="advanced-settings" [expanded]="false">
<mat-expansion-panel-header>
<mat-panel-title>
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
<div class="flex-1 flex flex-row justify-end items-center">
<div class="tb-small" translate>device-profile.advanced-settings</div>
</div>
</mat-panel-title>
@ -89,18 +89,18 @@
</mat-checkbox>
</ng-template>
</mat-expansion-panel>
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
<tb-create-alarm-rules formControlName="createRules"
style="padding-bottom: 16px;"
[deviceProfileId]="deviceProfileId">
</tb-create-alarm-rules>
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
<div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
[fxShow]="alarmFormGroup.get('clearRule').value"
<div class="flex flex-row justify-start items-center gap-2"
[class.!hidden]="!alarmFormGroup.get('clearRule').value"
style="padding-bottom: 8px;">
<div class="clear-alarm-rule" fxFlex fxLayout="row">
<tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
<div class="clear-alarm-rule flex-1 flex flex-row">
<tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
</tb-alarm-rule>
</div>
<button *ngIf="!disabled"
@ -113,10 +113,10 @@
</button>
</div>
<div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
<span translate fxLayoutAlign="center center" style="margin: 16px 0"
class="tb-prompt">device-profile.no-clear-alarm-rule</span>
<span translate style="margin: 16px 0"
class="tb-prompt flex justify-center items-center">device-profile.no-clear-alarm-rule</span>
</div>
<div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
<div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
<button mat-stroked-button color="primary"
type="button"
(click)="addClearAlarmRule()"

8
ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
View File

@ -15,11 +15,11 @@
limitations under the License.
-->
<div fxLayout="column">
<div class="flex flex-col">
<div class="tb-device-profile-alarms">
<div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
let $index = index; last as isLast;"
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
class="flex flex-col" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<tb-device-profile-alarm [formControl]="alarmControl"
[expanded]="$index === 0"
[deviceProfileId]="deviceProfileId"
@ -28,8 +28,8 @@
</div>
</div>
<div *ngIf="!alarmsFormArray.controls.length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">device-profile.no-alarm-rules</span>
<span translate
class="tb-prompt flex justify-center items-center">device-profile.no-alarm-rules</span>
</div>
<div *ngIf="!disabled" style="padding-top: 16px;">
<button mat-raised-button color="primary"

6
ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
<mat-toolbar color="primary">
<h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -29,7 +29,7 @@
</mat-progress-bar>
<div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<mat-form-field class="mat-block">
<textarea matInput formControlName="alarmDetails" rows="5"
placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
@ -38,7 +38,7 @@
</div>
</fieldset>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

2
ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
View File

@ -25,7 +25,7 @@
(keydown)="assetProfileEnter($event)"
(keypress)="assetProfileEnter($event)"
[matAutocomplete]="assetProfileAutocomplete"
[fxShow]="!showDetailsPageLink || !useAssetProfileLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value">
[class.!hidden]="showDetailsPageLink && useAssetProfileLink && disabled && selectAssetProfileFormGroup.get('assetProfile').value">
<a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
aria-label="Open asset profile" [routerLink]=assetProfileURL>
{{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}

4
ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
View File

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 600px;">
<mat-toolbar color="primary">
<h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -36,7 +36,7 @@
[isEdit]="true">
</tb-asset-profile>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
cdkFocusInitial

18
ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
View File

@ -15,43 +15,43 @@
limitations under the License.
-->
<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage">
[class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'export')"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
{{'asset-profile.export' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'setDefault')"
[fxShow]="!isEdit && !entity?.default">
[class.!hidden]="isEdit || entity?.default">
{{'asset-profile.set-default' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
[class.!hidden]="hideDelete() || isEdit">
{{'asset-profile.delete' | translate }}
</button>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onAssetProfileIdCopied($event)"
[cbContent]="entity?.id?.id"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>asset-profile.copyId</span>
</button>
</div>
</div>
<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
<div [class.mat-padding]="!standalone" class="flex flex-col">
<form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
<mat-form-field class="mat-block">
@ -83,7 +83,7 @@
[ruleChainType]="edgeRuleChainType">
<span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span>
</tb-rule-chain-autocomplete>
<tb-gallery-image-input fxFlex
<tb-gallery-image-input class="flex-1"
label="{{'asset-profile.image' | translate}}"
formControlName="image">
</tb-gallery-image-input>

2
ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
View File

@ -25,7 +25,7 @@
(keydown)="deviceProfileEnter($event)"
(keypress)="deviceProfileEnter($event)"
[matAutocomplete]="deviceProfileAutocomplete"
[fxShow]="!showDetailsPageLink || !useDeviceProfileLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value">
[class.!hidden]="showDetailsPageLink && useDeviceProfileLink && disabled && selectDeviceProfileFormGroup.get('deviceProfile').value">
<a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
aria-label="Open device profile" [routerLink]=deviceProfileURL>
{{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}

4
ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
View File

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 1000px;">
<mat-toolbar color="primary">
<h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -36,7 +36,7 @@
[isEdit]="true">
</tb-device-profile>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
cdkFocusInitial

8
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
View File

@ -35,7 +35,7 @@
<ng-container *ngTemplateOutlet="default"></ng-container>
</ng-template>
<ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
<div fxFlex fxLayoutAlign="start center" class="tb-hint">
<div class="tb-hint flex-1 flex justify-start items-center">
<span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
<span tb-help-popup="device-profile/x509-chain-hint"
tb-help-popup-placement="top"
@ -69,8 +69,8 @@
</mat-form-field>
</ng-template>
<ng-template #default>
<section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
<mat-form-field fxFlex class="mat-block">
<section class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>device-profile.provision-device-key</mat-label>
<input matInput formControlName="provisionDeviceKey" required/>
<button matSuffix mat-icon-button
@ -85,7 +85,7 @@
{{ 'device-profile.provision-device-key-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>device-profile.provision-device-secret</mat-label>
<input matInput formControlName="provisionDeviceSecret" required/>
<button matSuffix mat-icon-button

20
ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
View File

@ -15,43 +15,43 @@
limitations under the License.
-->
<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage">
[class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'export')"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
{{'device-profile.export' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'setDefault')"
[fxShow]="!isEdit && !entity?.default">
[class.!hidden]="isEdit || entity?.default">
{{'device-profile.set-default' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
[class.!hidden]="hideDelete() || isEdit">
{{'device-profile.delete' | translate }}
</button>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onDeviceProfileIdCopied($event)"
[cbContent]="entity?.id?.id"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>device-profile.copyId</span>
</button>
</div>
</div>
<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
<div [class.mat-padding]="!standalone" class="flex flex-col">
<form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
<mat-form-field class="mat-block">
@ -97,7 +97,7 @@
[deviceProfileId]="deviceProfileId?.id"
formControlName="softwareId">
</tb-ota-package-autocomplete>
<mat-form-field fxHide class="mat-block">
<mat-form-field class="mat-block !hidden">
<mat-label translate>device-profile.type</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@ -108,7 +108,7 @@
{{ 'device-profile.type-required' | translate }}
</mat-error>
</mat-form-field>
<tb-gallery-image-input fxFlex
<tb-gallery-image-input class="flex-1"
label="{{'device-profile.image' | translate}}"
formControlName="image">
</tb-gallery-image-input>

2
ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
View File

@ -25,7 +25,7 @@
(keydown)="tenantProfileEnter($event)"
(keypress)="tenantProfileEnter($event)"
[matAutocomplete]="tenantProfileAutocomplete"
[fxShow]="!showDetailsPageLink || !disabled || !selectTenantProfileFormGroup.get('tenantProfile').value">
[class.!hidden]="showDetailsPageLink && disabled && selectTenantProfileFormGroup.get('tenantProfile').value">
<a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
{{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
</a>

4
ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
View File

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 650px;">
<mat-toolbar color="primary">
<h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -36,7 +36,7 @@
[isEdit]="true">
</tb-tenant-profile>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
cdkFocusInitial

16
ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
View File

@ -15,37 +15,37 @@
limitations under the License.
-->
<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage">
[class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'setDefault')"
[fxShow]="!isEdit && !entity?.default">
[class.!hidden]="isEdit || entity?.default">
{{'tenant-profile.set-default' | translate }}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
[class.!hidden]="hideDelete() || isEdit">
{{'tenant-profile.delete' | translate }}
</button>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onTenantProfileIdCopied($event)"
[cbContent]="entity?.id?.id"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>tenant-profile.copyId</span>
</button>
</div>
</div>
<div class="mat-padding" fxLayout="column">
<div class="mat-padding flex flex-col">
<form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit">
<mat-form-field class="mat-block" appearance="fill">
@ -58,7 +58,7 @@
{{ 'tenant-profile.name-max-length' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="column">
<div class="flex flex-col">
<mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine">
<div>{{ 'tenant.isolated-tb-rule-engine' | translate }}</div>
<div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>

14
ui-ngx/tailwind.config.js
View File

@ -61,18 +61,28 @@ module.exports = {
}
},
extend: {
flexBasis: {
'25': '6.25rem',
'37.5': '9.375rem'
},
flex: {
full: '1 1 100%'
},
gap: {
'0.75': '0.1875rem'
},
minWidth: {
'25': '6.25rem',
'37.5': '9.375rem'
},
maxWidth: {
'5%': '5%',
'8%': '8%',
'10%': '10%',
'15%': '15%',
'17%': '17%',
'20%': '20%',
'23%': '23%',
'25%': '25%',
'30%': '30%',
'35%': '35%',
@ -103,7 +113,9 @@ module.exports = {
'7/12': '58.333333%',
'8/12': '66.666667%',
'10/12': '83.333333%',
'11/12': '91.666667%'
'11/12': '91.666667%',
'25': '6.25rem',
'37.5': '9.375rem'
}
},
},