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

Optimize stiles

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-09-06 14:57:41 +03:00
parent 460c80a252
commit ac27bc6592
6 changed files with 109 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
View File

@ -13,51 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../../../scss/constants";
:host {
display: flex;
flex-direction: column;
max-height: 100%;
max-width: 100%;
background-color: #fff;
.tb-timewindow-form {
width: 600px;
.tb-flex {
gap: 16px;
}
&.mat-mdc-dialog-content {
overflow: hidden;
padding: 0;
}
&-content {
overflow: auto;
}
}
.limit-slider-container {
.limit-slider-value {
margin-left: 16px;
min-width: 25px;
max-width: 100px;
}
mat-form-field input[type=number] {
text-align: center;
}
}
@media #{$mat-gt-sm} {
.limit-slider-container {
> label {
margin-right: 16px;
width: min-content;
max-width: 40%;
}
}
}
}

2
ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
View File

@ -48,7 +48,7 @@ export interface TimewindowConfigDialogData {
@Component({
selector: 'tb-timewindow-config-dialog',
templateUrl: './timewindow-config-dialog.component.html',
styleUrls: ['./timewindow-config-dialog.component.scss']
styleUrls: ['./timewindow-config-dialog.component.scss', './timewindow-form.scss']
})
export class TimewindowConfigDialogComponent extends PageComponent implements OnInit, OnDestroy {

56
ui-ngx/src/app/shared/components/time/timewindow-form.scss Normal file
View File

@ -0,0 +1,56 @@
/**
* Copyright © 2016-2024 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../../../scss/constants";
:host {
display: flex;
flex-direction: column;
max-height: 100%;
max-width: 100%;
background-color: #fff;
.tb-timewindow-form {
.tb-flex {
gap: 16px;
}
&-content {
overflow: auto;
}
}
.limit-slider-container {
.limit-slider-value {
margin-left: 16px;
min-width: 25px;
max-width: 100px;
}
mat-form-field input[type=number] {
text-align: center;
}
}
@media #{$mat-gt-sm} {
.limit-slider-container {
> label {
margin-right: 16px;
width: min-content;
max-width: 40%;
}
}
}
}

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

@ -45,8 +45,8 @@
</div>
<ng-container formGroupName="realtime">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<tb-timeinterval
*ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
@ -54,10 +54,9 @@
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<tb-quick-time-interval
*ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
displayLabel="false"
formControlName="quickInterval"
onlyCurrentInterval="true"
@ -67,7 +66,6 @@
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</ng-container>
</section>
</ng-container>
@ -89,8 +87,8 @@
<ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<tb-timeinterval
*ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
@ -98,10 +96,9 @@
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<tb-datetime-period
*ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
formControlName="fixedTimewindow"
subscriptSizing="dynamic"
appearance="outline"
@ -109,10 +106,9 @@
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<tb-quick-time-interval
*ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
displayLabel="false"
formControlName="quickInterval"
subscriptSizing="dynamic"
@ -121,7 +117,6 @@
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</ng-container>
</section>
</ng-container>
@ -195,12 +190,11 @@
</section>
</ng-template>
<ng-template #timezoneSelection>
<ng-container *ngIf="timezone && (isEdit || !timewindow.hideTimezone)">
<tb-timezone asButton strokedButton noMargin
<tb-timezone *ngIf="timezone && (isEdit || !timewindow.hideTimezone)"
asButton strokedButton noMargin
localBrowserTimezonePlaceholderOnEmpty="true"
formControlName="timezone">
</tb-timezone>
</ng-container>
</ng-template>
</form>
<mat-divider></mat-divider>

36
ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
View File

@ -13,25 +13,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../../../scss/constants";
:host {
display: flex;
flex-direction: column;
width: 500px;
max-height: 100%;
max-width: 100%;
background-color: #fff;
.tb-timewindow-form {
display: flex;
flex-direction: column;
overflow: hidden;
.tb-flex {
gap: 16px;
}
&-header {
flex-direction: row;
align-items: center;
@ -40,31 +30,5 @@
&-type-options {
flex: 1;
}
&-content {
overflow: auto;
}
}
.limit-slider-container {
.limit-slider-value {
margin-left: 16px;
min-width: 25px;
max-width: 100px;
}
mat-form-field input[type=number] {
text-align: center;
}
}
@media #{$mat-gt-sm} {
.limit-slider-container {
> label {
margin-right: 16px;
width: min-content;
max-width: 40%;
}
}
}
}

2
ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
View File

@ -59,7 +59,7 @@ export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelDat
@Component({
selector: 'tb-timewindow-panel',
templateUrl: './timewindow-panel.component.html',
styleUrls: ['./timewindow-panel.component.scss']
styleUrls: ['./timewindow-panel.component.scss', './timewindow-form.scss']
})
export class TimewindowPanelComponent extends PageComponent implements OnInit, OnDestroy {