UI: date-time period component redesign

2024-08-02 17:54:56 +03:00 · 2024-08-02 17:54:56 +03:00 · a9b350ff76
commit a9b350ff76
parent c8d48521fb
7 changed files with 35 additions and 68 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,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>
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
+++ b/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;
  }
 }
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.ts
+++ b/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;
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/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>
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
+++ b/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%;
  }
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",
--- a/ui-ngx/src/form.scss
+++ b/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;