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

UI: change timewindow aggregation options style

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-09-06 19:02:25 +03:00
parent ac27bc6592
commit 2bfb99edbb
4 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/shared/components/time/timeinterval.component.scss
View File

@ -16,12 +16,6 @@
@import '../../../../scss/constants'; @import '../../../../scss/constants';
:host { :host {
min-width: 355px;
.tb-form-panel {
gap: 12px;
}
.advanced-input { .advanced-input {
gap: 8px; gap: 8px;
} }

1
ui-ngx/src/app/shared/components/time/timewindow-form.scss
View File

@ -33,6 +33,7 @@
} }
.limit-slider-container { .limit-slider-container {
width: 100%;
.limit-slider-value { .limit-slider-value {
margin-left: 16px; margin-left: 16px;
min-width: 25px; min-width: 25px;

17
ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
View File

@ -122,8 +122,8 @@
<ng-container *ngIf="aggregationOptionsAvailable"> <ng-container *ngIf="aggregationOptionsAvailable">
<ng-container formGroupName="aggregation"> <ng-container formGroupName="aggregation">
<section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideAggregation"> <section class="tb-form-row column-xs space-between same-padding" *ngIf="isEdit || !timewindow.hideAggregation">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div> <div class="fixed-title-width">{{ 'aggregation.aggregation' | translate }}</div>
<mat-form-field subscriptSizing="dynamic" appearance="outline"> <mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-select formControlName="type"> <mat-select formControlName="type">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
@ -133,12 +133,10 @@
</mat-form-field> </mat-form-field>
</section> </section>
<section class="tb-form-panel stroked" <section class="tb-form-row column-xs space-between same-padding"
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)"> *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)">
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div> <div>{{ 'aggregation.limit' | translate }}</div>
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center" <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center">
fxLayout.xs="column" fxLayoutAlign.xs="stretch">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<mat-slider fxFlex <mat-slider fxFlex
min="{{minDatapointsLimit()}}" min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"> max="{{maxDatapointsLimit()}}">
@ -151,13 +149,12 @@
max="{{maxDatapointsLimit()}}"/> max="{{maxDatapointsLimit()}}"/>
</mat-form-field> </mat-form-field>
</div> </div>
</div>
</section> </section>
</ng-container> </ng-container>
<section class="tb-form-panel stroked" [fxShow]="(isEdit || !timewindow.hideAggInterval) <section class="tb-form-row column-xs space-between same-padding" [fxShow]="(isEdit || !timewindow.hideAggInterval)
&& timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE"> && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
<div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div> <div class="fixed-title-width">{{ 'aggregation.group-interval' | translate }}</div>
<ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME"> <ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
<tb-timeinterval <tb-timeinterval
formControlName="interval" formControlName="interval"

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

@ -293,9 +293,6 @@
&.space-between { &.space-between {
justify-content: space-between; justify-content: space-between;
} }
&.center {
justify-content: center;
}
&.align-center { &.align-center {
align-items: center; align-items: center;
} }