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

Timewindow: fix styles for interval options configuration on mobile

Browse Source
This commit is contained in:
Ekaterina Chantsova 2024-12-02 13:51:22 +02:00
parent fc40266428
commit d13afd61f6
2 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
View File

@ -23,7 +23,7 @@
</div> </div>
<div class="tb-form-table"> <div class="tb-form-table">
<div class="tb-form-table-header"> <div class="tb-form-table-header">
<div class="tb-form-table-header-cell tb-interval"> <div class="tb-form-table-header-cell tb-interval" tbTruncateWithTooltip>
<mat-checkbox color="warn" <mat-checkbox color="warn"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
[indeterminate]="getIndeterminate()" [indeterminate]="getIndeterminate()"
@ -33,22 +33,21 @@
{{ "timewindow.interval" | translate }} {{ "timewindow.interval" | translate }}
</div> </div>
<ng-container *ngIf="aggregation"> <ng-container *ngIf="aggregation">
<div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.allowed-agg-intervals" | translate }}</div> <div class="tb-form-table-header-cell tb-agg-interval-header" tbTruncateWithTooltip>{{"timewindow.allowed-agg-intervals" | translate }}</div>
<div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.default-agg-interval" | translate }}</div> <div class="tb-form-table-header-cell tb-agg-interval-header" tbTruncateWithTooltip>{{"timewindow.default-agg-interval" | translate }}</div>
</ng-container> </ng-container>
</div> </div>
<div class="tb-form-table-body" formArrayName="intervals"> <div class="tb-form-table-body" formArrayName="intervals">
<ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement"> <ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
<div [formGroupName]="i" class="tb-form-table-row"> <div [formGroupName]="i" class="tb-form-table-row">
<div class="tb-form-table-row-cell tb-interval"> <div class="tb-form-table-row-cell tb-interval">
<mat-checkbox formControlName="enabled" color="primary"> <mat-checkbox class="tb-interval-option" formControlName="enabled" color="primary">
<mat-label>{{ interval.get('name').value }}</mat-label> <mat-label>{{ interval.get('name').value }}</mat-label>
</mat-checkbox> </mat-checkbox>
</div> </div>
<ng-container *ngIf="aggregation"> <ng-container *ngIf="aggregation">
<div class="tb-form-table-row-cell tb-agg-interval"> <div class="tb-form-table-row-cell tb-agg-interval">
<tb-grouping-interval-options <tb-grouping-interval-options
class="tb-inline-field"
formControlName="aggIntervalsConfig" formControlName="aggIntervalsConfig"
[min]="minAggInterval(interval.get('value').value)" [min]="minAggInterval(interval.get('value').value)"
[max]="maxAggInterval(interval.get('value').value)" [max]="maxAggInterval(interval.get('value').value)"

32
ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
View File

@ -13,6 +13,8 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import '../../../../scss/constants';
:host { :host {
.tb-interval-options-form { .tb-interval-options-form {
height: 100%; height: 100%;
@ -27,12 +29,18 @@
.tb-form-table-header-cell, .tb-form-table-row-cell { .tb-form-table-header-cell, .tb-form-table-row-cell {
&.tb-interval { &.tb-interval {
flex: 1 1 30%; flex: 1 1 100%;
width: 30%; min-width: calc(30% - 8px);
max-width: calc(30% - 8px);
@media #{$mat-gt-md} {
min-width: calc(30% - 12px);
max-width: calc(30% - 12px);
}
} }
&.tb-agg-interval { &.tb-agg-interval {
flex: 1 1 70%; flex: 1 1 100%;
width: 70%; min-width: 70%;
max-width: 70%;
} }
} }
@ -44,6 +52,22 @@
.tb-form-hint { .tb-form-hint {
flex-shrink: 0; flex-shrink: 0;
} }
::ng-deep {
.tb-interval-option {
display: block;
.mdc-form-field {
width: 100%;
}
.mdc-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
} }
} }