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,28 +45,26 @@
         </div>
 
         <ng-container formGroupName="realtime">
-          <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
-            <tb-timeinterval
-              formControlName="timewindowMs"
-              subscriptSizing="dynamic"
-              appearance="outline"
-              [disabledAdvanced]="timewindow.realtime.disableCustomInterval"
-              [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
-                                timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
-            </tb-timeinterval>
-          </ng-container>
+          <tb-timeinterval
+            *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
+            formControlName="timewindowMs"
+            subscriptSizing="dynamic"
+            appearance="outline"
+            [disabledAdvanced]="timewindow.realtime.disableCustomInterval"
+            [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+                              timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
+          </tb-timeinterval>
 
-          <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
-            <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>
-          </ng-container>
+          <tb-quick-time-interval
+            *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.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>
         </ng-container>
       </section>
     </ng-container>
@@ -89,38 +87,35 @@
 
         <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
-              formControlName="timewindowMs"
-              subscriptSizing="dynamic"
-              appearance="outline"
-              [disabledAdvanced]="timewindow.history.disableCustomInterval"
-              [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
-              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>
-          </ng-container>
+          <tb-timeinterval
+            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
+            formControlName="timewindowMs"
+            subscriptSizing="dynamic"
+            appearance="outline"
+            [disabledAdvanced]="timewindow.history.disableCustomInterval"
+            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                            timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
+          </tb-timeinterval>
 
-          <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
-            <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>
-          </ng-container>
+          <tb-datetime-period
+            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
+            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-quick-time-interval
+            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.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>
         </ng-container>
       </section>
     </ng-container>
@@ -195,12 +190,11 @@
     </section>
   </ng-template>
   <ng-template #timezoneSelection>
-    <ng-container *ngIf="timezone && (isEdit || !timewindow.hideTimezone)">
-      <tb-timezone asButton strokedButton noMargin
-                   localBrowserTimezonePlaceholderOnEmpty="true"
-                   formControlName="timezone">
-      </tb-timezone>
-    </ng-container>
+    <tb-timezone *ngIf="timezone && (isEdit || !timewindow.hideTimezone)"
+                 asButton strokedButton noMargin
+                 localBrowserTimezonePlaceholderOnEmpty="true"
+                 formControlName="timezone">
+    </tb-timezone>
   </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 {