UI: Timewindow - interval options style change

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

@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-form-panel no-border no-padding" [formGroup]="timeintervalFormGroup">
-  <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+  <mat-form-field fxFlex class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
     <mat-select formControlName="interval">
       <mat-option *ngFor="let interval of intervals" [value]="interval.value">

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

@@ -37,7 +37,7 @@
     .limit-slider-value {
       margin-left: 16px;
       min-width: 25px;
-      max-width: 100px;
+      max-width: 106px;
     }
     mat-form-field input[type=number] {
       text-align: center;

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

@@ -20,7 +20,7 @@
     <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
                       [options]="timewindowTypeOptions" formControlName="selectedTab">
     </tb-toggle-select>
-    <button mat-icon-button type="button" class="tb-box-button"
+    <button mat-icon-button type="button" class="tb-timewindow-form-settings-btn tb-mat-24"
             *ngIf="isEdit"
             (click)="openTimewindowConfig()">
       <mat-icon>settings</mat-icon>
@@ -44,7 +44,7 @@
           </ng-container>
         </div>
 
-        <ng-container formGroupName="realtime">
+        <div class="tb-form-row no-border no-padding" formGroupName="realtime">
           <tb-timeinterval
             *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
             formControlName="timewindowMs"
@@ -65,7 +65,7 @@
             [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
           </tb-quick-time-interval>
-        </ng-container>
+        </div>
       </section>
     </ng-container>
 
@@ -85,7 +85,8 @@
           </ng-container>
         </div>
 
-        <ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
+        <div class="tb-form-row no-border no-padding"
+             formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
                                   timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
           <tb-timeinterval
             *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
@@ -116,14 +117,14 @@
             [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                           timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
           </tb-quick-time-interval>
-        </ng-container>
+        </div>
       </section>
     </ng-container>
 
     <ng-container *ngIf="aggregationOptionsAvailable">
       <ng-container formGroupName="aggregation">
         <section class="tb-form-row column-xs space-between same-padding" *ngIf="isEdit || !timewindow.hideAggregation">
-          <div class="fixed-title-width">{{ 'aggregation.aggregation' | translate }}</div>
+          <div>{{ 'aggregation.aggregation' | translate }}</div>
           <mat-form-field subscriptSizing="dynamic" appearance="outline">
             <mat-select formControlName="type">
               <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
@@ -152,9 +153,9 @@
         </section>
       </ng-container>
 
-      <section class="tb-form-row column-xs space-between same-padding" [fxShow]="(isEdit || !timewindow.hideAggInterval)
+      <section class="tb-form-row column same-padding" [fxShow]="(isEdit || !timewindow.hideAggInterval)
        && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
-        <div class="fixed-title-width">{{ 'aggregation.group-interval' | translate }}</div>
+        <div>{{ 'aggregation.group-interval' | translate }}</div>
         <ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
           <tb-timeinterval
             formControlName="interval"

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

@@ -27,8 +27,14 @@
       align-items: center;
     }
 
-    &-type-options {
+    &-type-options,
+    tb-quick-time-interval,
+    tb-timeinterval{
       flex: 1;
     }
+
+    &-settings-btn {
+      color: rgba(0, 0, 0, 0.54);
+    }
   }
 }

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

@@ -16,17 +16,17 @@
 
 -->
 <form [formGroup]="timezoneForm">
-  <section class="tb-form-panel no-border">
+  <section class="tb-form-row column-xs space-between">
-    <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
+    <div>{{ 'timezone.timezone' | translate }}</div>
     <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="localBrowserTimezonePlaceholderOnEmpty"
                         formControlName="timezone"
                         subscriptSizing="dynamic"
                         appearance="outline"
-                        displayLabel="false">
+                        displayLabel="false" class="flex">
     </tb-timezone-select>
   </section>
 </form>
-<div class="tb-panel-actions tb-flex flex-end no-gap">
+<div class="tb-timezone-panel-actions tb-flex flex-end no-gap">
   <button type="button"
           mat-button
           [disabled]="(isLoading$ | async)"

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

@@ -22,9 +22,12 @@
   max-width: 100%;
   background-color: #fff;
 
-  .tb-form-panel {
+  tb-timezone-select {
-    padding: 12px;
+    flex: 1;
-    gap: 24px;
+  }
+
+  .tb-timezone-panel-actions {
+    padding-top: 12px;
   }
 
 }

ui-ngx/src/app/shared/components/time/timezone-select.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="mat-block"
+<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="flex mat-block"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance">
   <mat-label *ngIf="displayLabel" translate>timezone.timezone</mat-label>
   <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"

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

@@ -174,7 +174,7 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit {
           }
         },
         {},
-        {}, {}, true);
+        {}, {}, false);
       timezoneSelectionPopover.tbComponentRef.instance.popoverComponent = timezoneSelectionPopover;
     }
     this.cd.detectChanges();

ui-ngx/src/form.scss

@@ -371,10 +371,19 @@
     .mat-mdc-text-field-wrapper {
       &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) {
         &:not(.mdc-text-field--focused):not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(:hover) {
-          .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
+          .mdc-notched-outline__leading, .mdc-notched-outline__trailing, .mdc-notched-outline__notch {
             border-color: rgba(0, 0, 0, 0.12);
           }
         }
+        .mdc-floating-label {
+          top: 20px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          &--float-above {
+            --mat-mdc-form-field-label-transform: translateY(-27px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+          }
+        }
         .mat-mdc-form-field-infix {
           padding-top: 8px;
           padding-bottom: 8px;
@@ -386,7 +395,8 @@
             line-height: 20px;
           }
         }
-        .mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix {
+        .mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix,
+        .mat-datetimepicker-toggle {
           height: 40px;
           font-size: 14px;
           line-height: 40px;
@@ -400,6 +410,10 @@
               width: 20px;
               height: 20px;
               font-size: 20px;
+              svg {
+                width: 20px;
+                height: 20px;
+              }
             }
             .mat-mdc-button-touch-target {
               width: 40px;