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

2021-03-30 18:15:37 +03:00 · 2021-03-30 18:15:37 +03:00 · fa02d7629e
commit fa02d7629e
parent 5bb252b418
6 changed files with 49 additions and 47 deletions
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.html
+++ b/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>
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
+++ b/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;
-}
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts
+++ b/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,
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/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>
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
+++ b/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 {
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/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: [