UI: date-time period component redesign

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

@@ -15,35 +15,17 @@
     limitations under the License.
 
 -->
-<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-label translate>datetime.date-from</mat-label>
-      <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle>
-      <mat-datetimepicker #startDatePicker type="date" openOnFocus="true"></mat-datetimepicker>
+<section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
+    <mat-form-field class="medium-width flex-xs" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+      <mat-label translate>datetime.from</mat-label>
+      <mat-datetimepicker-toggle [for]="startDatePicker" matSuffix></mat-datetimepicker-toggle>
+      <mat-datetimepicker #startDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
       <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startDatePicker" (ngModelChange)="onStartDateChange()">
     </mat-form-field>
-    <mat-form-field>
-      <mat-label translate>datetime.time-from</mat-label>
-      <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
-      <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-      <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()">
-    </mat-form-field>
-  </section>
-  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
-           fxLayout.xs="column" fxLayoutAlign.xs="start stretch"  fxLayoutGap.xs="0">
-    <mat-form-field>
-      <mat-label translate>datetime.date-to</mat-label>
-      <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
-      <mat-datetimepicker #endDatePicker type="date" openOnFocus="true"></mat-datetimepicker>
+    <mat-form-field class="medium-width flex-xs" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+      <mat-label translate>datetime.to</mat-label>
+      <mat-datetimepicker-toggle [for]="endDatePicker" matSuffix></mat-datetimepicker-toggle>
+      <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
       <input matInput [disabled]="disabled" [(ngModel)]="endDate" [matDatetimepicker]="endDatePicker" (ngModelChange)="onEndDateChange()">
     </mat-form-field>
-    <mat-form-field>
-      <mat-label translate>datetime.time-to</mat-label>
-      <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
-      <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-      <input matInput [disabled]="disabled" [(ngModel)]="endDate" [matDatetimepicker]="endTimePicker" (ngModelChange)="onEndDateChange()">
-    </mat-form-field>
-  </section>
 </section>

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

@@ -13,14 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../../../scss/constants';
 
-:host ::ng-deep {
-  .mat-mdc-form-field-infix {
-    width: 100px;
-
-    @media #{$mat-xs} {
-      width: 100%;
-    }
+:host {
+  .tb-form-row {
+    gap: 8px;
   }
 }

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

@@ -17,6 +17,7 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FixedWindow } from '@shared/models/time/time.models';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-datetime-period',
@@ -34,6 +35,12 @@ export class DatetimePeriodComponent implements OnInit, ControlValueAccessor {
 
   @Input() disabled: boolean;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   modelValue: FixedWindow;
 
   startDate: Date;

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

@@ -23,11 +23,10 @@
         <section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
           <div class="tb-flex space-between"
                [ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }">
-            <div class="tb-flex column">
+            <div class="tb-flex column no-flex flex-xs">
               <div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
               <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
-                <tb-toggle-select appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType"
-                                  style="max-width: 100%">
+                <tb-toggle-select appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
                 </tb-toggle-select>
               </ng-container>
             </div>
@@ -69,11 +68,10 @@
         <section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
           <div class="tb-flex space-between"
                [ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
-            <div class="tb-flex column">
+            <div class="tb-flex column no-flex flex-xs">
               <div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
               <ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
-                <tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType"
-                                  style="max-width: 100%">
+                <tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType">
                 </tb-toggle-select>
               </ng-container>
             </div>
@@ -97,6 +95,8 @@
             <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
               <tb-datetime-period
                 formControlName="fixedTimewindow"
+                subscriptSizing="dynamic"
+                appearance="outline"
                 class="history-time-input"
                 [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                               timewindowForm.get('history.historyType').value === historyTypes.FIXED">
@@ -126,7 +126,7 @@
         <section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideAggregation">
           <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
           <mat-form-field subscriptSizing="dynamic" appearance="outline">
-            <mat-select formControlName="type" style="min-width: 150px;">
+            <mat-select formControlName="type">
               <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
                 {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
               </mat-option>

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

@@ -35,19 +35,6 @@
     overflow: hidden;
   }
 
-  .mat-padding {
-    padding: 0 16px;
-  }
-
-  .hide-label {
-    margin-bottom: 5px;
-    margin-right: 5px;
-  }
-
-  tb-timeinterval[ng-reflect-fxe-show="true"] {
-    margin-bottom: -16px;
-  }
-
   .limit-slider-container {
     .limit-slider-value {
       margin-left: 16px;
@@ -60,9 +47,6 @@
   }
 
   @media #{$mat-gt-sm} {
-    .history-time-input {
-      min-width: 364px;
-    }
     .limit-slider-container {
       > label {
         margin-right: 16px;
@@ -75,15 +59,6 @@
 }
 
 :host ::ng-deep {
-  .mat-mdc-radio-button {
-    display: block;
-    .mdc-form-field {
-      align-items: start;
-      > label {
-        padding-top: 10px;
-      }
-    }
-  }
   .mat-mdc-tab-group:not(.tb-headless) {
     height: 100%;
   }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1078,7 +1078,9 @@
         "date-from": "Date from",
         "time-from": "Time from",
         "date-to": "Date to",
-        "time-to": "Time to"
+        "time-to": "Time to",
+        "from": "From",
+        "to": "To"
     },
     "dashboard": {
         "dashboard": "Dashboard",

ui-ngx/src/form.scss

@@ -265,6 +265,12 @@
     gap: 8px;
     &.no-flex {
       flex: none;
+      &.flex-xs {
+        @media #{$mat-xs} {
+          width: auto;
+          flex: 1;
+        }
+      }
     }
     &.row {
       flex-direction: row;