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

Data key config style update

Browse Source 
- Settings tab. Aggregation section: fixed mat-expansion-panel height
This commit is contained in:
Artem Babak 2022-09-26 15:57:41 +03:00 committed by Vladyslav_Prykhodko
parent c10e491de7
commit 21a6ed6be7
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,20 +63,20 @@
</mat-form-field> </mat-form-field>
</div> </div>
<section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column"> <section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column">
<mat-form-field style="padding-bottom: 46px;"> <mat-form-field>
<mat-label translate>datakey.aggregation</mat-label> <mat-label translate>datakey.aggregation</mat-label>
<mat-select formControlName="aggregationType" style="min-width: 150px;"> <mat-select formControlName="aggregationType" style="min-width: 150px;">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-hint style="line-height: 15px;"> </mat-form-field>
<div class="tb-hint after-fields">
{{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }} {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
<section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE"> <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
{{ 'datakey.aggregation-type-hint-common' | translate }} {{ 'datakey.aggregation-type-hint-common' | translate }}
</section> </section>
</mat-hint> </div>
</mat-form-field>
<fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider"> <fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider">
<legend class="group-title" translate>datakey.delta-calculation</legend> <legend class="group-title" translate>datakey.delta-calculation</legend>
<mat-expansion-panel class="tb-settings comparison" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> <mat-expansion-panel class="tb-settings comparison" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">

8
ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
View File

@ -58,6 +58,12 @@
} }
} }
} }
.tb-hint.after-fields {
margin-top: -1.25em;
max-width: fit-content;
line-height: 15px;
}
} }
} }
@ -95,7 +101,7 @@
&.comparison { &.comparison {
.mat-expansion-panel-header { .mat-expansion-panel-header {
height: 140px; height: 100%;
} }
} }