Optimize stiles

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

@@ -13,51 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../scss/constants";
 
 :host {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
-  background-color: #fff;
-
   .tb-timewindow-form {
     width: 600px;
 
-    .tb-flex {
-      gap: 16px;
-    }
-
     &.mat-mdc-dialog-content {
       overflow: hidden;
       padding: 0;
     }
-
-    &-content {
-      overflow: auto;
   }
 }
-
-  .limit-slider-container {
-    .limit-slider-value {
-      margin-left: 16px;
-      min-width: 25px;
-      max-width: 100px;
-    }
-    mat-form-field input[type=number] {
-      text-align: center;
-    }
-  }
-
-  @media #{$mat-gt-sm} {
-    .limit-slider-container {
-      > label {
-        margin-right: 16px;
-        width: min-content;
-        max-width: 40%;
-      }
-    }
-  }
-
-}

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

@@ -48,7 +48,7 @@ export interface TimewindowConfigDialogData {
 @Component({
   selector: 'tb-timewindow-config-dialog',
   templateUrl: './timewindow-config-dialog.component.html',
-  styleUrls: ['./timewindow-config-dialog.component.scss']
+  styleUrls: ['./timewindow-config-dialog.component.scss', './timewindow-form.scss']
 })
 export class TimewindowConfigDialogComponent extends PageComponent implements OnInit, OnDestroy {
 

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "../../../../scss/constants";
+
+:host {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  background-color: #fff;
+
+  .tb-timewindow-form {
+    .tb-flex {
+      gap: 16px;
+    }
+
+    &-content {
+      overflow: auto;
+    }
+  }
+
+  .limit-slider-container {
+    .limit-slider-value {
+      margin-left: 16px;
+      min-width: 25px;
+      max-width: 100px;
+    }
+    mat-form-field input[type=number] {
+      text-align: center;
+    }
+  }
+
+  @media #{$mat-gt-sm} {
+    .limit-slider-container {
+      > label {
+        margin-right: 16px;
+        width: min-content;
+        max-width: 40%;
+      }
+    }
+  }
+
+}

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

@@ -45,8 +45,8 @@
         </div>
 
         <ng-container formGroupName="realtime">
-          <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
           <tb-timeinterval
+            *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
             formControlName="timewindowMs"
             subscriptSizing="dynamic"
             appearance="outline"
@@ -54,10 +54,9 @@
             [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
           </tb-timeinterval>
-          </ng-container>
 
-          <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
           <tb-quick-time-interval
+            *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
             displayLabel="false"
             formControlName="quickInterval"
             onlyCurrentInterval="true"
@@ -67,7 +66,6 @@
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
           </tb-quick-time-interval>
         </ng-container>
-        </ng-container>
       </section>
     </ng-container>
 
@@ -89,8 +87,8 @@
 
         <ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
                                   timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
-          <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
           <tb-timeinterval
+            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
             formControlName="timewindowMs"
             subscriptSizing="dynamic"
             appearance="outline"
@@ -98,10 +96,9 @@
             [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
           </tb-timeinterval>
-          </ng-container>
 
-          <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
           <tb-datetime-period
+            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
             formControlName="fixedTimewindow"
             subscriptSizing="dynamic"
             appearance="outline"
@@ -109,10 +106,9 @@
             [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.FIXED">
           </tb-datetime-period>
-          </ng-container>
 
-          <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
           <tb-quick-time-interval
+            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
             displayLabel="false"
             formControlName="quickInterval"
             subscriptSizing="dynamic"
@@ -121,7 +117,6 @@
                           timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
           </tb-quick-time-interval>
         </ng-container>
-        </ng-container>
       </section>
     </ng-container>
 
@@ -195,12 +190,11 @@
     </section>
   </ng-template>
   <ng-template #timezoneSelection>
-    <ng-container *ngIf="timezone && (isEdit || !timewindow.hideTimezone)">
+    <tb-timezone *ngIf="timezone && (isEdit || !timewindow.hideTimezone)"
-      <tb-timezone asButton strokedButton noMargin
+                 asButton strokedButton noMargin
                  localBrowserTimezonePlaceholderOnEmpty="true"
                  formControlName="timezone">
     </tb-timezone>
-    </ng-container>
   </ng-template>
 </form>
 <mat-divider></mat-divider>

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

@@ -13,25 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../scss/constants";
 
 :host {
-  display: flex;
-  flex-direction: column;
   width: 500px;
-  max-height: 100%;
-  max-width: 100%;
-  background-color: #fff;
 
   .tb-timewindow-form {
     display: flex;
     flex-direction: column;
     overflow: hidden;
 
-    .tb-flex {
-      gap: 16px;
-    }
-
     &-header {
       flex-direction: row;
       align-items: center;
@@ -40,31 +30,5 @@
     &-type-options {
       flex: 1;
     }
-
-    &-content {
-      overflow: auto;
   }
 }
-
-  .limit-slider-container {
-    .limit-slider-value {
-      margin-left: 16px;
-      min-width: 25px;
-      max-width: 100px;
-    }
-    mat-form-field input[type=number] {
-      text-align: center;
-    }
-  }
-
-  @media #{$mat-gt-sm} {
-    .limit-slider-container {
-      > label {
-        margin-right: 16px;
-        width: min-content;
-        max-width: 40%;
-      }
-    }
-  }
-
-}

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

@@ -59,7 +59,7 @@ export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelDat
 @Component({
   selector: 'tb-timewindow-panel',
   templateUrl: './timewindow-panel.component.html',
-  styleUrls: ['./timewindow-panel.component.scss']
+  styleUrls: ['./timewindow-panel.component.scss', './timewindow-form.scss']
 })
 export class TimewindowPanelComponent extends PageComponent implements OnInit, OnDestroy {