Merge pull request #11772 from ChantsovaEkaterina/improvement/timewindow-style-fixes

Timewindow redesign fixes

ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss

@@ -25,6 +25,27 @@
   mat-form-field input[type=number] {
     text-align: center;
   }
+
+  .mdc-slider {
+    height: 40px;
+
+    ::ng-deep {
+      .mdc-slider__thumb {
+        left: -20px;
+        height: 40px;
+        width: 40px;
+
+        .mat-ripple-element.mat-mdc-slider-focus-ripple,
+        .mat-ripple-element.mat-mdc-slider-active-ripple,
+        .mat-ripple-element.mat-mdc-slider-hover-ripple {
+          left: 0 !important;
+          top: 0 !important;
+          height: 40px !important;
+          width: 40px !important;
+        }
+      }
+    }
+  }
 }
 
 @media #{$mat-gt-sm} {

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

@@ -54,7 +54,9 @@
         <div class="tb-form-row">
           <mat-slide-toggle *ngIf="!quickIntervalOnly"
                             class="mat-slide" formControlName="hideLastInterval">
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
               {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-timeinterval
             formControlName="timewindowMs"
@@ -71,7 +73,9 @@
            class="tb-form-row">
         <mat-slide-toggle *ngIf="!quickIntervalOnly"
                           class="mat-slide" formControlName="hideQuickInterval">
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
             {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-quick-time-interval
           displayLabel="false"
@@ -105,7 +109,9 @@
         </div>
         <div class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
               {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-timeinterval
             formControlName="timewindowMs"
@@ -120,7 +126,9 @@
 
       <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED" class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-fixed-interval' | translate}}">
             {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-datetime-period
           formControlName="fixedTimewindow"
@@ -134,7 +142,9 @@
 
       <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
               {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-quick-time-interval
             displayLabel="false"
@@ -152,7 +162,9 @@
         <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
         <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide" formControlName="hideAggregation">
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-aggregation' | translate}}">
               {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <ng-container formGroupName="aggregation">
             <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
@@ -171,7 +183,9 @@
         <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
         <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-max-values' | translate}}">
               {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <ng-container formGroupName="aggregation">
             <tb-datapoints-limit formControlName="limit"
@@ -229,7 +243,9 @@
 
         <ng-template #hideAggInterval>
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-group-interval' | translate}}">
               {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
         </ng-template>
       </section>
@@ -239,7 +255,9 @@
       <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
       <div class="tb-form-row column-xs">
         <mat-slide-toggle class="mat-slide" formControlName="hideTimezone">
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-timezone' | translate}}">
             {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
                             formControlName="timezone"

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

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="timewindowForm" class="tb-timewindow-form">
-  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom no-gap" *ngIf="!historyOnly">
+  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom" *ngIf="!historyOnly">
     <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
                       [options]="timewindowTypeOptions" formControlName="selectedTab">
     </tb-toggle-select>

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

@@ -5209,6 +5209,13 @@
         "relative": "Relative",
         "range": "Range",
         "hide-timewindow-section": "Hide time window section from end-users",
+        "hide-last-interval": "Hide last interval from end-users",
+        "hide-relative-interval": "Hide relative interval from end-users",
+        "hide-fixed-interval": "Hide fixed interval from end-users",
+        "hide-aggregation": "Hide aggregation from end-users",
+        "hide-group-interval": "Hide grouping interval from end-users",
+        "hide-max-values": "Hide max values from end-users",
+        "hide-timezone": "Hide time zone from end-users",
         "disable-custom-interval": "Disable custom interval selection"
     },
     "tooltip": {