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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "../../../../scss/constants";
:host { :host {
display: flex;
flex-direction: column;
max-height: 100%;
max-width: 100%;
background-color: #fff;
.tb-timewindow-form { .tb-timewindow-form {
width: 600px; width: 600px;
.tb-flex {
gap: 16px;
}
&.mat-mdc-dialog-content { &.mat-mdc-dialog-content {
overflow: hidden; overflow: hidden;
padding: 0; 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({ @Component({
selector: 'tb-timewindow-config-dialog', selector: 'tb-timewindow-config-dialog',
templateUrl: './timewindow-config-dialog.component.html', 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 { 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%;
}
}
}
}

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

@ -45,28 +45,26 @@
</div> </div>
<ng-container formGroupName="realtime"> <ng-container formGroupName="realtime">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> <tb-timeinterval
<tb-timeinterval *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
formControlName="timewindowMs" formControlName="timewindowMs"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
[disabledAdvanced]="timewindow.realtime.disableCustomInterval" [disabledAdvanced]="timewindow.realtime.disableCustomInterval"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval> </tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> <tb-quick-time-interval
<tb-quick-time-interval *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
displayLabel="false" displayLabel="false"
formControlName="quickInterval" formControlName="quickInterval"
onlyCurrentInterval="true" onlyCurrentInterval="true"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval> </tb-quick-time-interval>
</ng-container>
</ng-container> </ng-container>
</section> </section>
</ng-container> </ng-container>
@ -89,38 +87,35 @@
<ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable && <ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME"> timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> <tb-timeinterval
<tb-timeinterval *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
formControlName="timewindowMs" formControlName="timewindowMs"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
[disabledAdvanced]="timewindow.history.disableCustomInterval" [disabledAdvanced]="timewindow.history.disableCustomInterval"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval> </tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"> <tb-datetime-period
<tb-datetime-period *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
formControlName="fixedTimewindow" formControlName="fixedTimewindow"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
class="history-time-input" class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED"> timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period> </tb-datetime-period>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> <tb-quick-time-interval
<tb-quick-time-interval *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
displayLabel="false" displayLabel="false"
formControlName="quickInterval" formControlName="quickInterval"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval> </tb-quick-time-interval>
</ng-container>
</ng-container> </ng-container>
</section> </section>
</ng-container> </ng-container>
@ -195,12 +190,11 @@
</section> </section>
</ng-template> </ng-template>
<ng-template #timezoneSelection> <ng-template #timezoneSelection>
<ng-container *ngIf="timezone && (isEdit || !timewindow.hideTimezone)"> <tb-timezone *ngIf="timezone && (isEdit || !timewindow.hideTimezone)"
<tb-timezone asButton strokedButton noMargin asButton strokedButton noMargin
localBrowserTimezonePlaceholderOnEmpty="true" localBrowserTimezonePlaceholderOnEmpty="true"
formControlName="timezone"> formControlName="timezone">
</tb-timezone> </tb-timezone>
</ng-container>
</ng-template> </ng-template>
</form> </form>
<mat-divider></mat-divider> <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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "../../../../scss/constants";
:host { :host {
display: flex;
flex-direction: column;
width: 500px; width: 500px;
max-height: 100%;
max-width: 100%;
background-color: #fff;
.tb-timewindow-form { .tb-timewindow-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
.tb-flex {
gap: 16px;
}
&-header { &-header {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -40,31 +30,5 @@
&-type-options { &-type-options {
flex: 1; 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({ @Component({
selector: 'tb-timewindow-panel', selector: 'tb-timewindow-panel',
templateUrl: './timewindow-panel.component.html', 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 { export class TimewindowPanelComponent extends PageComponent implements OnInit, OnDestroy {