From 769d110c0aadedf9fb3a4e819f2b02480b1a5cee Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Mon, 9 Sep 2024 19:02:00 +0300
Subject: [PATCH] UI: Timewindow settings style change

---
 .../timewindow-config-dialog.component.html   | 241 ++++++++++--------
 .../timewindow-config-dialog.component.scss   |   6 +
 2 files changed, 145 insertions(+), 102 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 7be74360b7..0f3b2467ed 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -33,7 +33,7 @@
   </div>
   <div class="tb-timewindow-form-content tb-form-panel no-border">
     <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
-      <section formGroupName="realtime" class="tb-form-panel stroked">
+      <section formGroupName="realtime" class="tb-form-panel">
         <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
           {{ 'timewindow.hide-timewindow-section' | translate }}
@@ -44,43 +44,54 @@
         </tb-toggle-select>
 
         <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
-          <mat-slide-toggle *ngIf="!quickIntervalOnly"
-                            class="mat-slide fixed-title-width" formControlName="hideLastInterval">
-            {{ 'timewindow.hide-last-interval' | translate }}
-          </mat-slide-toggle>
+<!--          <mat-slide-toggle *ngIf="!quickIntervalOnly"-->
+<!--                            class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
+<!--            {{ 'timewindow.hide-last-interval' | translate }}-->
+<!--          </mat-slide-toggle>-->
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
             {{ 'timewindow.disable-custom-interval' | translate }}
           </mat-slide-toggle>
-          <tb-timeinterval
-            formControlName="timewindowMs"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
-            [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+          <div class="tb-form-row">
+            <mat-slide-toggle *ngIf="!quickIntervalOnly"
+                              class="mat-slide" formControlName="hideLastInterval">
+              {{ 'timewindow.hide' | translate }}
+            </mat-slide-toggle>
+            <tb-timeinterval
+              formControlName="timewindowMs"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
+              [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
-          </tb-timeinterval>
+            </tb-timeinterval>
+          </div>
         </ng-container>
 
         <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
-          <mat-slide-toggle *ngIf="!quickIntervalOnly"
-                            class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
-            {{ 'timewindow.hide-relative-interval' | translate }}
-          </mat-slide-toggle>
-          <tb-quick-time-interval
-            displayLabel="false"
-            formControlName="quickInterval"
-            onlyCurrentInterval="true"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+          <div class="tb-form-row">
+<!--            <mat-slide-toggle *ngIf="!quickIntervalOnly"-->
+<!--                              class="mat-slide fixed-title-width" formControlName="hideQuickInterval">-->
+            <mat-slide-toggle *ngIf="!quickIntervalOnly"
+                              class="mat-slide" formControlName="hideQuickInterval">
+              {{ 'timewindow.hide' | translate }}
+<!--              {{ 'timewindow.hide-relative-interval' | translate }}-->
+            </mat-slide-toggle>
+            <tb-quick-time-interval
+              displayLabel="false"
+              formControlName="quickInterval"
+              onlyCurrentInterval="true"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
-          </tb-quick-time-interval>
+            </tb-quick-time-interval>
+          </div>
         </ng-container>
       </section>
     </ng-container>
 
     <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
-      <section formGroupName="history" class="tb-form-panel stroked">
+      <section formGroupName="history" class="tb-form-panel">
         <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
           {{ 'timewindow.hide-timewindow-section' | translate }}
@@ -90,78 +101,96 @@
         </tb-toggle-select>
 
         <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideLastInterval">
-            {{ 'timewindow.hide-last-interval' | translate }}
-          </mat-slide-toggle>
+<!--          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
+<!--            {{ 'timewindow.hide-last-interval' | translate }}-->
+<!--          </mat-slide-toggle>-->
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
             {{ 'timewindow.disable-custom-interval' | translate }}
           </mat-slide-toggle>
-          <tb-timeinterval
-            formControlName="timewindowMs"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+          <div class="tb-form-row">
+            <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
+              {{ 'timewindow.hide' | translate }}
+            </mat-slide-toggle>
+            <tb-timeinterval
+              formControlName="timewindowMs"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
+              [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
-          </tb-timeinterval>
+            </tb-timeinterval>
+          </div>
         </ng-container>
 
         <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideFixedInterval">
-            {{ 'timewindow.hide-fixed-interval' | translate }}
-          </mat-slide-toggle>
-          <tb-datetime-period
-            formControlName="fixedTimewindow"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            class="history-time-input"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+          <div class="tb-form-row">
+<!--            <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">-->
+            <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
+              {{ 'timewindow.hide' | translate }}
+<!--              {{ 'timewindow.hide-fixed-interval' | translate }}-->
+            </mat-slide-toggle>
+            <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">
-          </tb-datetime-period>
+            </tb-datetime-period>
+          </div>
         </ng-container>
 
         <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
-            {{ 'timewindow.hide-relative-interval' | translate }}
-          </mat-slide-toggle>
-          <tb-quick-time-interval
-            displayLabel="false"
-            formControlName="quickInterval"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+          <div class="tb-form-row">
+<!--            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">-->
+            <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
+              {{ 'timewindow.hide' | translate }}
+<!--              {{ 'timewindow.hide-relative-interval' | translate }}-->
+            </mat-slide-toggle>
+            <tb-quick-time-interval
+              displayLabel="false"
+              formControlName="quickInterval"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                           timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
-          </tb-quick-time-interval>
+            </tb-quick-time-interval>
+          </div>
         </ng-container>
       </section>
     </ng-container>
 
     <ng-container *ngIf="aggregation">
-      <section class="tb-form-panel stroked">
+      <section class="tb-form-panel">
         <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggregation">
-          {{ 'timewindow.hide-aggregation' | translate }}
-        </mat-slide-toggle>
-        <ng-container formGroupName="aggregation">
-          <mat-form-field subscriptSizing="dynamic" appearance="outline">
-            <mat-select formControlName="type">
-              <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
-                {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </ng-container>
+        <div class="tb-form-row column-xs">
+          <!--        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggregation">-->
+          <mat-slide-toggle class="mat-slide" formControlName="hideAggregation">
+            <!--          {{ 'timewindow.hide-aggregation' | translate }}-->
+            {{ 'timewindow.hide' | translate }}
+          </mat-slide-toggle>
+          <ng-container formGroupName="aggregation">
+            <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
+              <mat-select formControlName="type">
+                <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
+                  {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </ng-container>
+        </div>
       </section>
 
-      <section class="tb-form-panel stroked"
+      <section class="tb-form-panel"
                *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
         <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
-          {{ 'timewindow.hide-max-values' | translate }}
-        </mat-slide-toggle>
-        <div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
-             fxLayout.xs="column" fxLayoutAlign.xs="stretch">
-          <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+        <div class="tb-form-row column-xs">
+          <!--        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">-->
+          <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
+            <!--          {{ 'timewindow.hide-max-values' | translate }}-->
+            {{ 'timewindow.hide' | translate }}
+          </mat-slide-toggle>
+          <div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center">
             <mat-slider fxFlex
                         min="{{minDatapointsLimit()}}"
                         max="{{maxDatapointsLimit()}}">
@@ -177,7 +206,7 @@
         </div>
       </section>
 
-      <section class="tb-form-panel stroked" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
+      <section class="tb-form-panel" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
         <div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div>
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
           {{ 'timewindow.hide-group-interval' | translate }}
@@ -186,42 +215,50 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
             {{ 'timewindow.disable-custom-interval' | translate }}
           </mat-slide-toggle>
-          <tb-timeinterval
-            formControlName="interval"
-            [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
-            useCalendarIntervals
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value">
-          </tb-timeinterval>
+          <div class="tb-form-row">
+            <tb-timeinterval
+              formControlName="interval"
+              [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
+              useCalendarIntervals
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value">
+            </tb-timeinterval>
+          </div>
         </ng-container>
         <ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
             {{ 'timewindow.disable-custom-interval' | translate }}
           </mat-slide-toggle>
-          <tb-timeinterval
-            formControlName="interval"
-            [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
-            useCalendarIntervals
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
-          </tb-timeinterval>
+          <div class="tb-form-row">
+            <tb-timeinterval
+              formControlName="interval"
+              [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
+              useCalendarIntervals
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
+            </tb-timeinterval>
+          </div>
         </ng-container>
       </section>
     </ng-container>
 
-    <section class="tb-form-panel stroked tb-flex">
+    <section class="tb-form-panel">
       <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone">
-        {{ 'timewindow.hide-timezone' | translate }}
-      </mat-slide-toggle>
-      <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
-                          formControlName="timezone"
-                          subscriptSizing="dynamic"
-                          appearance="outline"
-                          displayLabel="false">
-      </tb-timezone-select>
+      <div class="tb-form-row column-xs">
+<!--        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone">-->
+        <mat-slide-toggle class="mat-slide" formControlName="hideTimezone">
+          {{ 'timewindow.hide' | translate }}
+<!--          {{ 'timewindow.hide-timezone' | translate }}-->
+        </mat-slide-toggle>
+        <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
+                            formControlName="timezone"
+                            subscriptSizing="dynamic"
+                            appearance="outline"
+                            displayLabel="false">
+        </tb-timezone-select>
+      </div>
     </section>
   </div>
 </form>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
index ccf1814728..4632861ec6 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
@@ -22,5 +22,11 @@
       overflow: hidden;
       padding: 0;
     }
+
+    tb-timezone-select,
+    tb-quick-time-interval,
+    tb-datetime-period {
+      flex: 1;
+    }
   }
 }