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 class="tb-form-table">
<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"
(click)="$event.stopPropagation()"
[indeterminate]="getIndeterminate()"
@ -33,22 +33,21 @@
{{ "timewindow.interval" | translate }}
</div>
<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">{{"timewindow.default-agg-interval" | 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" tbTruncateWithTooltip>{{"timewindow.default-agg-interval" | translate }}</div>
</ng-container>
</div>
<div class="tb-form-table-body" formArrayName="intervals">
<ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
<div [formGroupName]="i" class="tb-form-table-row">
<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-checkbox>
</div>
<ng-container *ngIf="aggregation">
<div class="tb-form-table-row-cell tb-agg-interval">
<tb-grouping-interval-options
class="tb-inline-field"
formControlName="aggIntervalsConfig"
[min]="minAggInterval(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
* limitations under the License.
*/
@import '../../../../scss/constants';
:host {
.tb-interval-options-form {
height: 100%;
@ -27,12 +29,18 @@
.tb-form-table-header-cell, .tb-form-table-row-cell {
&.tb-interval {
flex: 1 1 30%;
width: 30%;
flex: 1 1 100%;
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 {
flex: 1 1 70%;
width: 70%;
flex: 1 1 100%;
min-width: 70%;
max-width: 70%;
}
}
@ -44,6 +52,22 @@
.tb-form-hint {
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;
}
}
}
}
}