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

ui-ngx/src/app/shared/components/time/datetime-period.component.html

@@ -15,8 +15,9 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" fxLayoutAlign="start start">
-  <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px">
+<section fxLayout="column" fxLayoutAlign="start stretch">
+  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
+           fxLayout.xs="column" fxLayoutAlign.xs="start stretch"  fxLayoutGap.xs="0">
     <mat-form-field>
       <mat-placeholder translate>datetime.date-from</mat-placeholder>
       <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle>
@@ -30,7 +31,8 @@
       <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px">
+  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
+           fxLayout.xs="column" fxLayoutAlign.xs="start stretch"  fxLayoutGap.xs="0">
     <mat-form-field>
       <mat-placeholder translate>datetime.date-to</mat-placeholder>
       <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>

ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss

@@ -1,19 +0,0 @@
-/**
- * Copyright © 2016-2021 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.
- */
-
-:host {
-  min-width: 364px;
-}

ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts

@@ -21,7 +21,6 @@ import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/mode
 @Component({
   selector: 'tb-quick-time-interval',
   templateUrl: './quick-time-interval.component.html',
-  styleUrls: ['./quick-time-interval.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

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

@@ -51,7 +51,7 @@
                         [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
                         [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
                                 timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-                        style="padding-top: 8px; min-width: 364px"></tb-quick-time-interval>
+                        style="padding-top: 8px"></tb-quick-time-interval>
                     </section>
                   </mat-radio-button>
                 </mat-radio-group>
@@ -75,6 +75,7 @@
                       <tb-timeinterval
                         formControlName="timewindowMs"
                         predefinedName="timewindow.last"
+                        class="history-time-input"
                         [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
                         [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                                 timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
@@ -86,6 +87,7 @@
                       <span translate>timewindow.time-period</span>
                       <tb-datetime-period
                         formControlName="fixedTimewindow"
+                        class="history-time-input"
                         [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
                         [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                                 timewindowForm.get('history.historyType').value === historyTypes.FIXED"
@@ -97,10 +99,11 @@
                       <span translate>timewindow.interval</span>
                       <tb-quick-time-interval
                         formControlName="quickInterval"
+                        class="history-time-input"
                         [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
                         [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                               timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
-                        style="padding-top: 8px; min-width: 364px"></tb-quick-time-interval>
+                        style="padding-top: 8px"></tb-quick-time-interval>
                     </section>
                   </mat-radio-button>
                 </mat-radio-group>
@@ -134,21 +137,23 @@
                           (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
           </section>
           <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval">
-            <div class="limit-slider-container"
-                 fxLayout="row" fxLayoutAlign="start center">
-              <span translate>aggregation.limit</span>
-              <mat-slider fxFlex formControlName="limit"
-                          thumbLabel
-                          [value]="timewindowForm.get('aggregation.limit').value"
-                          min="{{minDatapointsLimit()}}"
-                          max="{{maxDatapointsLimit()}}">
-              </mat-slider>
-              <mat-form-field style="max-width: 80px;">
-                <input matInput formControlName="limit" type="number" step="1"
-                       [value]="timewindowForm.get('aggregation.limit').value"
-                       min="{{minDatapointsLimit()}}"
-                       max="{{maxDatapointsLimit()}}"/>
-              </mat-form-field>
+            <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
+                                                fxLayout.xs="column"  fxLayoutAlign.xs="stretch">
+              <label translate>aggregation.limit</label>
+              <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+                <mat-slider fxFlex formControlName="limit"
+                            thumbLabel
+                            [value]="timewindowForm.get('aggregation.limit').value"
+                            min="{{minDatapointsLimit()}}"
+                            max="{{maxDatapointsLimit()}}">
+                </mat-slider>
+                <mat-form-field class="limit-slider-value">
+                  <input matInput formControlName="limit" type="number" step="1"
+                         [value]="timewindowForm.get('aggregation.limit').value"
+                         min="{{minDatapointsLimit()}}"
+                         max="{{maxDatapointsLimit()}}"/>
+                </mat-form-field>
+              </div>
             </div>
           </section>
         </section>

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

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../scss/constants";
+
 :host {
   width: 100%;
   height: 100%;
@@ -40,21 +42,29 @@
   }
 
   .limit-slider-container {
-    >:first-child {
-      margin-right: 16px;
-    }
-    >:last-child {
+    .limit-slider-value {
       margin-left: 16px;
-    }
-    >:first-child, >:last-child {
       min-width: 25px;
-      max-width: 42px;
+      max-width: 80px;
     }
     mat-form-field input[type=number] {
       text-align: center;
     }
   }
 
+  @media #{$mat-gt-sm} {
+    .history-time-input {
+      min-width: 364px;
+    }
+    .limit-slider-container {
+      > label {
+        margin-right: 16px;
+        width: min-content;
+        max-width: 40%;
+      }
+    }
+  }
+
 }
 
 :host ::ng-deep {

ui-ngx/src/app/shared/shared.module.ts

@@ -141,6 +141,7 @@ import { FileSizePipe } from '@shared/pipe/file-size.pipe';
 import { WidgetsBundleSearchComponent } from '@shared/components/widgets-bundle-search.component';
 import { SelectableColumnsPipe } from '@shared/pipe/selectable-columns.pipe';
 import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-interval.component';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
 
 @NgModule({
   providers: [
@@ -154,6 +155,10 @@ import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-i
     {
       provide: FlowInjectionToken,
       useValue: Flow
+    },
+    {
+      provide: MAT_DATE_LOCALE,
+      useValue: 'en-GB'
     }
   ],
   declarations: [