简柏林 / thingskit · Commits

Commit fa02d7629e7294daba71d7cba62db3812b3839bb

Authored by Vladyslav_Prykhodko
1 parent 5bb252b4

UI: Improvement mobile view timeWindow; Add show time in 24 format

Inline Side-by-side
Showing 6 changed files with 49 additions and 47 deletions
@@ -15,8 +15,9 @@ @@ -15,8 +15,9 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<section fxLayout="column" fxLayoutAlign="start start">  
19 - <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px"> 18 +<section fxLayout="column" fxLayoutAlign="start stretch">
  19 + <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
  20 + fxLayout.xs="column" fxLayoutAlign.xs="start stretch" fxLayoutGap.xs="0">
20 <mat-form-field> 21 <mat-form-field>
21 <mat-placeholder translate>datetime.date-from</mat-placeholder> 22 <mat-placeholder translate>datetime.date-from</mat-placeholder>
22 <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle> 23 <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle>
@@ -30,7 +31,8 @@ @@ -30,7 +31,8 @@
30 <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()"> 31 <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()">
31 </mat-form-field> 32 </mat-form-field>
32 </section> 33 </section>
33 - <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px"> 34 + <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
  35 + fxLayout.xs="column" fxLayoutAlign.xs="start stretch" fxLayoutGap.xs="0">
34 <mat-form-field> 36 <mat-form-field>
35 <mat-placeholder translate>datetime.date-to</mat-placeholder> 37 <mat-placeholder translate>datetime.date-to</mat-placeholder>
36 <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle> 38 <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
1 -/**  
2 - * Copyright © 2016-2021 The Thingsboard Authors  
3 - *  
4 - * Licensed under the Apache License, Version 2.0 (the "License");  
5 - * you may not use this file except in compliance with the License.  
6 - * You may obtain a copy of the License at  
7 - *  
8 - * http://www.apache.org/licenses/LICENSE-2.0  
9 - *  
10 - * Unless required by applicable law or agreed to in writing, software  
11 - * distributed under the License is distributed on an "AS IS" BASIS,  
12 - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
13 - * See the License for the specific language governing permissions and  
14 - * limitations under the License.  
15 - */  
16 -  
17 -:host {  
18 - min-width: 364px;  
19 -}  
@@ -21,7 +21,6 @@ import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/mode @@ -21,7 +21,6 @@ import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/mode
21 @Component({ 21 @Component({
22 selector: 'tb-quick-time-interval', 22 selector: 'tb-quick-time-interval',
23 templateUrl: './quick-time-interval.component.html', 23 templateUrl: './quick-time-interval.component.html',
24 - styleUrls: ['./quick-time-interval.component.scss'],  
25 providers: [ 24 providers: [
26 { 25 {
27 provide: NG_VALUE_ACCESSOR, 26 provide: NG_VALUE_ACCESSOR,
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL" 51 [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
52 [required]="timewindow.selectedTab === timewindowTypes.REALTIME && 52 [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
53 timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL" 53 timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
54 - style="padding-top: 8px; min-width: 364px"></tb-quick-time-interval> 54 + style="padding-top: 8px"></tb-quick-time-interval>
55 </section> 55 </section>
56 </mat-radio-button> 56 </mat-radio-button>
57 </mat-radio-group> 57 </mat-radio-group>
@@ -75,6 +75,7 @@ @@ -75,6 +75,7 @@
75 <tb-timeinterval 75 <tb-timeinterval
76 formControlName="timewindowMs" 76 formControlName="timewindowMs"
77 predefinedName="timewindow.last" 77 predefinedName="timewindow.last"
  78 + class="history-time-input"
78 [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL" 79 [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
79 [required]="timewindow.selectedTab === timewindowTypes.HISTORY && 80 [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
80 timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL" 81 timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
@@ -86,6 +87,7 @@ @@ -86,6 +87,7 @@
86 <span translate>timewindow.time-period</span> 87 <span translate>timewindow.time-period</span>
87 <tb-datetime-period 88 <tb-datetime-period
88 formControlName="fixedTimewindow" 89 formControlName="fixedTimewindow"
  90 + class="history-time-input"
89 [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED" 91 [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
90 [required]="timewindow.selectedTab === timewindowTypes.HISTORY && 92 [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
91 timewindowForm.get('history.historyType').value === historyTypes.FIXED" 93 timewindowForm.get('history.historyType').value === historyTypes.FIXED"
@@ -97,10 +99,11 @@ @@ -97,10 +99,11 @@
97 <span translate>timewindow.interval</span> 99 <span translate>timewindow.interval</span>
98 <tb-quick-time-interval 100 <tb-quick-time-interval
99 formControlName="quickInterval" 101 formControlName="quickInterval"
  102 + class="history-time-input"
100 [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" 103 [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
101 [required]="timewindow.selectedTab === timewindowTypes.HISTORY && 104 [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
102 timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" 105 timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
103 - style="padding-top: 8px; min-width: 364px"></tb-quick-time-interval> 106 + style="padding-top: 8px"></tb-quick-time-interval>
104 </section> 107 </section>
105 </mat-radio-button> 108 </mat-radio-button>
106 </mat-radio-group> 109 </mat-radio-group>
@@ -134,21 +137,23 @@ @@ -134,21 +137,23 @@
134 (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox> 137 (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
135 </section> 138 </section>
136 <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval"> 139 <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval">
137 - <div class="limit-slider-container"  
138 - fxLayout="row" fxLayoutAlign="start center">  
139 - <span translate>aggregation.limit</span>  
140 - <mat-slider fxFlex formControlName="limit"  
141 - thumbLabel  
142 - [value]="timewindowForm.get('aggregation.limit').value"  
143 - min="{{minDatapointsLimit()}}"  
144 - max="{{maxDatapointsLimit()}}">  
145 - </mat-slider>  
146 - <mat-form-field style="max-width: 80px;">  
147 - <input matInput formControlName="limit" type="number" step="1"  
148 - [value]="timewindowForm.get('aggregation.limit').value"  
149 - min="{{minDatapointsLimit()}}"  
150 - max="{{maxDatapointsLimit()}}"/>  
151 - </mat-form-field> 140 + <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
  141 + fxLayout.xs="column" fxLayoutAlign.xs="stretch">
  142 + <label translate>aggregation.limit</label>
  143 + <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
  144 + <mat-slider fxFlex formControlName="limit"
  145 + thumbLabel
  146 + [value]="timewindowForm.get('aggregation.limit').value"
  147 + min="{{minDatapointsLimit()}}"
  148 + max="{{maxDatapointsLimit()}}">
  149 + </mat-slider>
  150 + <mat-form-field class="limit-slider-value">
  151 + <input matInput formControlName="limit" type="number" step="1"
  152 + [value]="timewindowForm.get('aggregation.limit').value"
  153 + min="{{minDatapointsLimit()}}"
  154 + max="{{maxDatapointsLimit()}}"/>
  155 + </mat-form-field>
  156 + </div>
152 </div> 157 </div>
153 </section> 158 </section>
154 </section> 159 </section>
@@ -13,6 +13,8 @@ @@ -13,6 +13,8 @@
13 * See the License for the specific language governing permissions and 13 * See the License for the specific language governing permissions and
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
  16 +@import "../../../../scss/constants";
  17 +
16 :host { 18 :host {
17 width: 100%; 19 width: 100%;
18 height: 100%; 20 height: 100%;
@@ -40,21 +42,29 @@ @@ -40,21 +42,29 @@
40 } 42 }
41 43
42 .limit-slider-container { 44 .limit-slider-container {
43 - >:first-child {  
44 - margin-right: 16px;  
45 - }  
46 - >:last-child { 45 + .limit-slider-value {
47 margin-left: 16px; 46 margin-left: 16px;
48 - }  
49 - >:first-child, >:last-child {  
50 min-width: 25px; 47 min-width: 25px;
51 - max-width: 42px; 48 + max-width: 80px;
52 } 49 }
53 mat-form-field input[type=number] { 50 mat-form-field input[type=number] {
54 text-align: center; 51 text-align: center;
55 } 52 }
56 } 53 }
57 54
  55 + @media #{$mat-gt-sm} {
  56 + .history-time-input {
  57 + min-width: 364px;
  58 + }
  59 + .limit-slider-container {
  60 + > label {
  61 + margin-right: 16px;
  62 + width: min-content;
  63 + max-width: 40%;
  64 + }
  65 + }
  66 + }
  67 +
58 } 68 }
59 69
60 :host ::ng-deep { 70 :host ::ng-deep {
@@ -141,6 +141,7 @@ import { FileSizePipe } from '@shared/pipe/file-size.pipe'; @@ -141,6 +141,7 @@ import { FileSizePipe } from '@shared/pipe/file-size.pipe';
141 import { WidgetsBundleSearchComponent } from '@shared/components/widgets-bundle-search.component'; 141 import { WidgetsBundleSearchComponent } from '@shared/components/widgets-bundle-search.component';
142 import { SelectableColumnsPipe } from '@shared/pipe/selectable-columns.pipe'; 142 import { SelectableColumnsPipe } from '@shared/pipe/selectable-columns.pipe';
143 import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-interval.component'; 143 import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-interval.component';
  144 +import { MAT_DATE_LOCALE } from '@angular/material/core';
144 145
145 @NgModule({ 146 @NgModule({
146 providers: [ 147 providers: [
@@ -154,6 +155,10 @@ import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-i @@ -154,6 +155,10 @@ import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-i
154 { 155 {
155 provide: FlowInjectionToken, 156 provide: FlowInjectionToken,
156 useValue: Flow 157 useValue: Flow
  158 + },
  159 + {
  160 + provide: MAT_DATE_LOCALE,
  161 + useValue: 'en-GB'
157 } 162 }
158 ], 163 ],
159 declarations: [ 164 declarations: [