Clear styles and delete unused

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

@@ -25,7 +25,7 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<form [formGroup]="timewindowForm" mat-dialog-content  class="timewindow-settings-form mat-content">
+<form [formGroup]="timewindowForm" mat-dialog-content  class="timewindow-settings-form">
   <mat-tab-group (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
     <mat-tab label="{{ 'timewindow.realtime' | translate }}">
       <div class="tb-flex column">

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="timewindowForm" class="mat-content">
+<form [formGroup]="timewindowForm" class="tb-timewindow-panel-form">
   <mat-tab-group [class.tb-headless]="historyOnly"
                  (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
     <mat-tab label="{{ 'timewindow.realtime' | translate }}">
@@ -121,8 +121,7 @@
         </ng-container>
       </div>
     </mat-tab>
-    <mat-tab disabled labelClass="timewindow-config-btn">
-<!--    <mat-tab *ngIf="isEdit" disabled>-->
+    <mat-tab *ngIf="isEdit" disabled labelClass="timewindow-config-btn">
       <ng-template mat-tab-label>
         <button mat-icon-button (click)="openTimewindowConfig()">
           <mat-icon>settings</mat-icon>

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

@@ -28,7 +28,7 @@
     gap: 12px;
   }
 
-  .mat-content {
+  .tb-timewindow-panel-form {
     overflow: hidden;
 
     .tb-flex {

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

@@ -1,5 +1,22 @@
-<form [formGroup]="timezoneForm" class="mat-content">
-  <section class="tb-form-panel">
+<!--
+
+    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.
+
+-->
+<form [formGroup]="timezoneForm">
+  <section class="tb-form-panel no-border">
     <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
     <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="localBrowserTimezonePlaceholderOnEmpty"
                         formControlName="timezone"
@@ -9,7 +26,7 @@
     </tb-timezone-select>
   </section>
 </form>
-<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+<div class="tb-panel-actions tb-flex flex-end no-gap">
   <button type="button"
           mat-button
           [disabled]="(isLoading$ | async)"

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

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "../../../../scss/constants";
 
 :host {
   display: flex;
@@ -28,21 +27,4 @@
     gap: 24px;
   }
 
-  .tb-flex {
-    gap: 16px;
-  }
-
-  .mat-content {
-    overflow: hidden;
-  }
-
-  .mat-padding {
-    padding: 0 16px;
-  }
-
-  .hide-label {
-    margin-bottom: 5px;
-    margin-right: 5px;
-  }
-
 }

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

@@ -22,7 +22,6 @@
         type="button"
         mat-raised-button color="primary"
         (click)="toggleTimezone($event)">
-<!--  <mat-icon class="material-icons">query_builder</mat-icon>-->
   <span>{{displayValue()}}</span>
 </button>
 <button *ngIf="asButton && strokedButton"
@@ -32,7 +31,6 @@
         type="button"
         mat-stroked-button color="primary"
         (click)="toggleTimezone($event)">
-<!--  <mat-icon class="material-icons">query_builder</mat-icon>-->
   <span>{{displayValue()}}</span>
 </button>
 <button *ngIf="asButton && flatButton"
@@ -42,7 +40,6 @@
         type="button"
         mat-button
         (click)="toggleTimezone($event)">
-<!--  <mat-icon class="material-icons">query_builder</mat-icon>-->
   <span>{{displayValue()}}</span>
 </button>
 <section *ngIf="!asButton"
@@ -50,13 +47,8 @@
          [class]="{'no-padding': noPadding}"
          [matTooltip]="tooltipValue()"
          [matTooltipPosition]="tooltipPosition"
-         [style]="timezoneComponentStyle"
          (click)="toggleTimezone($event)">
-  <tb-icon *ngIf="computedTimezoneStyle.showIcon && computedTimezoneStyle.iconPosition === 'left'"
-           [style]="timezoneIconStyle">{{ computedTimezoneStyle.icon }}</tb-icon>
   <div class="tb-timezone-label" [fxHide]="hideLabel">
-    {{timezoneInfo}}
+    {{displayValue()}}
   </div>
-  <tb-icon *ngIf="computedTimezoneStyle.showIcon && computedTimezoneStyle.iconPosition === 'right'"
-           [style]="timezoneIconStyle">{{ computedTimezoneStyle.icon }}</tb-icon>
 </section>

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

@@ -20,10 +20,8 @@ import {
   forwardRef,
   HostBinding,
   Input,
-  OnChanges,
   OnInit,
   Renderer2,
-  SimpleChanges,
   ViewContainerRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -31,13 +29,6 @@ import { TranslateService } from '@ngx-translate/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import {
-  ComponentStyle,
-  defaultTimezoneStyle,
-  iconStyle,
-  textStyle,
-  TimezoneStyle
-} from '@shared/models/widget-settings.models';
 import { TimezonePanelComponent, TimezoneSelectionResult } from '@shared/components/time/timezone-panel.component';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { getTimezoneInfo, TimezoneInfo } from '@shared/models/time/time.models';
@@ -56,7 +47,7 @@ import { TimeService } from '@core/services/time.service';
     }
   ]
 })
-export class TimezoneComponent implements ControlValueAccessor, OnInit, OnChanges {
+export class TimezoneComponent implements ControlValueAccessor, OnInit {
 
   @HostBinding('class.no-margin')
   @Input()
@@ -91,24 +82,9 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit, OnChange
   @coerceBoolean()
   hideLabel = false;
 
-  isEditValue = false;
-
-  @Input()
-  set isEdit(val) {
-    this.isEditValue = coerceBooleanProperty(val);
-    this.timezoneDisabled = this.isTimezoneDisabled();
-  }
-
-  get isEdit() {
-    return this.isEditValue;
-  }
-
   @Input()
   tooltipPosition: TooltipPosition = 'above';
 
-  @Input()
-  timezoneStyle: TimezoneStyle;
-
   @Input()
   @coerceBoolean()
   disabled: boolean;
@@ -155,10 +131,6 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit, OnChange
 
   timezoneDisabled: boolean;
 
-  computedTimezoneStyle: TimezoneStyle;
-  timezoneComponentStyle: ComponentStyle;
-  timezoneIconStyle: ComponentStyle;
-
   private propagateChange = (_: any) => {};
 
   constructor(private translate: TranslateService,
@@ -170,19 +142,6 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit, OnChange
   }
 
   ngOnInit() {
-    this.updateTimezoneStyle();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    for (const propName of Object.keys(changes)) {
-      const change = changes[propName];
-      if (!change.firstChange && change.currentValue !== change.previousValue) {
-        if (propName === 'timezoneStyle') {
-          this.updateTimezoneStyle();
-          this.updateDisplayValue();
-        }
-      }
-    }
   }
 
   toggleTimezone($event: Event) {
@@ -221,17 +180,6 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit, OnChange
     this.cd.detectChanges();
   }
 
-  private updateTimezoneStyle() {
-    if (!this.asButton) {
-      this.computedTimezoneStyle = {...defaultTimezoneStyle, ...(this.timezoneStyle || {})};
-      this.timezoneComponentStyle = textStyle(this.computedTimezoneStyle.font);
-      if (this.computedTimezoneStyle.color) {
-        this.timezoneComponentStyle.color = this.computedTimezoneStyle.color;
-      }
-      this.timezoneIconStyle = this.computedTimezoneStyle.iconSize ? iconStyle(this.computedTimezoneStyle.iconSize) : {};
-    }
-  }
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }

ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -262,19 +262,6 @@ export const defaultTimewindowStyle: TimewindowStyle = {
   displayTypePrefix: true
 };
 
-export interface TimezoneStyle {
-  showIcon: boolean;
-  icon?: string;
-  iconSize?: string;
-  iconPosition?: 'left' | 'right';
-  font?: Font;
-  color?: string;
-}
-
-export const defaultTimezoneStyle: TimezoneStyle = {
-  showIcon: false
-};
-
 export const constantColor = (color: string): ColorSettings => ({
   type: ColorType.constant,
   color,