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">
-            {{ 'timewindow.hide' | translate }}
+            <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">
-          {{ 'timewindow.hide' | translate }}
+          <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">
-            {{ 'timewindow.hide' | translate }}
+            <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">
-          {{ 'timewindow.hide' | translate }}
+          <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">
-            {{ 'timewindow.hide' | translate }}
+            <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">
-            {{ 'timewindow.hide' | translate }}
+            <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">
-            {{ 'timewindow.hide' | translate }}
+            <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">
-            {{ 'timewindow.hide' | translate }}
+            <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">
-          {{ 'timewindow.hide' | translate }}
+          <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

@@ -1251,7 +1251,7 @@
         "display-dashboards-selection": "Display dashboards selection",
         "display-entities-selection": "Display entities selection",
         "display-filters": "Display filters",
-        "display-dashboard-timewindow": "Display timewindow",
+        "display-dashboard-timewindow": "Display time window",
         "display-dashboard-export": "Display export",
         "display-update-dashboard-image": "Display update dashboard image",
         "dashboard-logo-settings": "Dashboard logo settings",
@@ -4740,10 +4740,10 @@
         "queue-singleton-hint": "Select a queue for message forwarding in multi-instance environments. 'Main' queue is used by default."
     },
     "timezone": {
-      "timezone": "Timezone",
-      "select-timezone": "Select timezone",
-      "no-timezones-matching": "No timezones matching '{{timezone}}' were found.",
-      "timezone-required": "Timezone is required.",
+      "timezone": "Time zone",
+      "select-timezone": "Select time zone",
+      "no-timezones-matching": "No time zones matching '{{timezone}}' were found.",
+      "timezone-required": "Time zone is required.",
       "browser-time": "Browser Time"
     },
     "queue": {
@@ -5158,8 +5158,8 @@
         "days": "Days"
     },
     "timewindow": {
-        "timewindow": "Timewindow",
-        "timewindow-settings": "Timewindow settings",
+        "timewindow": "Time window",
+        "timewindow-settings": "Time window settings",
         "years": "{ years, plural, =1 { year } other {# years } }",
         "years-short": "{{ years }}y",
         "months": "{ months, plural, =1 { month } other {# months } }",
@@ -5187,7 +5187,7 @@
         "history": "History",
         "last-prefix": "last",
         "period": "from {{ startTime }} to {{ endTime }}",
-        "edit": "Edit timewindow",
+        "edit": "Edit time window",
         "date-range": "Date range",
         "for-all-time": "For all time",
         "last": "Last",
@@ -5197,7 +5197,7 @@
         "just-now": "Just now",
         "just-now-lower": "just now",
         "ago": "ago",
-        "style": "Timewindow style",
+        "style": "Time window style",
         "icon": "Icon",
         "icon-position": "Icon position",
         "icon-position-left": "Left",
@@ -5208,7 +5208,14 @@
         "preview": "Preview",
         "relative": "Relative",
         "range": "Range",
-        "hide-timewindow-section": "Hide timewindow section from end-users",
+        "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": {
@@ -6034,10 +6041,10 @@
         "units-short": "Units",
         "decimals-short": "Decimals",
         "decimals-suffix": "decimals",
-        "timewindow": "Timewindow",
-        "use-dashboard-timewindow": "Use dashboard timewindow",
-        "use-widget-timewindow": "Use widget timewindow",
-        "display-timewindow": "Display timewindow",
+        "timewindow": "Time window",
+        "use-dashboard-timewindow": "Use dashboard time window",
+        "use-widget-timewindow": "Use widget time window",
+        "display-timewindow": "Display time window",
         "legend": "Legend",
         "display-legend": "Display legend",
         "datasources": "Datasources",