UI: Refactor widget padding change default value for backward compatibility

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts

@@ -37,7 +37,8 @@ import {
   getLabel,
   getSingleTsValue,
   iconStyle,
-  overlayStyle, resolveCssSize,
+  overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
@@ -48,7 +49,6 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 
 const squareLayoutSize = 160;
-const squareLayoutPadding = 48;
 const horizontalLayoutHeight = 80;
 
 @Component({
@@ -201,16 +201,13 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   private onResize() {
-    const paddingLeft = getComputedStyle(this.valueCardPanel.nativeElement).paddingLeft;
-    const paddingRight = getComputedStyle(this.valueCardPanel.nativeElement).paddingRight;
-    const paddingTop = getComputedStyle(this.valueCardPanel.nativeElement).paddingTop;
-    const paddingBottom = getComputedStyle(this.valueCardPanel.nativeElement).paddingBottom;
-    const pLeft = resolveCssSize(paddingLeft)[0];
-    const pRight = resolveCssSize(paddingRight)[0];
-    const pTop = resolveCssSize(paddingTop)[0];
-    const pBottom = resolveCssSize(paddingBottom)[0];
-    const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight);
-    const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom);
+    const computedStyle = getComputedStyle(this.valueCardPanel.nativeElement);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+
+    const widgetBoundingClientRect = this.valueCardPanel.nativeElement.getBoundingClientRect();
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     let scale: number;
     if (!this.horizontal) {
       const size = Math.min(panelWidth, panelHeight);

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts

@@ -19,8 +19,10 @@ import {
   BackgroundType,
   ColorSettings,
   constantColor,
-  cssUnit, DateFormatSettings,
-  Font, lastUpdateAgoDateFormat
+  cssUnit,
+  DateFormatSettings,
+  Font,
+  lastUpdateAgoDateFormat
 } from '@shared/models/widget-settings.models';
 
 export enum ValueCardLayout {
@@ -130,5 +132,5 @@ export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSe
       blur: 3
     }
   },
-  padding: '12px'
+  padding: '24px'
 });

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div #statusWidgetPanel class="tb-status-widget-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div #statusWidgetPanel class="tb-status-widget-panel" [style]="backgroundStyle$ | async">
   <div class="tb-status-widget-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
   <div class="tb-status-widget-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout">
+  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout" [style.padding]="padding">
     <div class="tb-status-widget-icon-container">
       <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss

@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
+  padding: 0;
   > div:not(.tb-status-widget-overlay), > tb-icon {
     z-index: 1;
   }
@@ -38,6 +38,7 @@
   .tb-status-widget-content {
     width: 100%;
     height: 100%;
+    padding: 16px;
     position: relative;
     display: flex;
     flex-direction: column;

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts

@@ -21,27 +21,29 @@ import {
   ElementRef,
   OnDestroy,
   OnInit,
-  Renderer2, ViewChild,
+  Renderer2,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { BasicActionWidgetComponent } from '@home/components/widget/lib/action/action-widget.models';
 import {
   statusWidgetDefaultSettings,
   StatusWidgetLayout,
-  StatusWidgetSettings, StatusWidgetStateSettings
+  StatusWidgetSettings,
+  StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 import { Observable } from 'rxjs';
 import {
   backgroundStyle,
   ComponentStyle,
   iconStyle,
-  overlayStyle, resolveCssSize,
+  overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
-import { UtilsService } from '@core/services/utils.service';
 import { ValueType } from '@shared/models/constants';
 
 const initialStatusWidgetSize = 147;
@@ -102,9 +104,7 @@ export class StatusWidgetComponent extends
   constructor(protected imagePipe: ImagePipe,
               protected sanitizer: DomSanitizer,
               private renderer: Renderer2,
-              private utils: UtilsService,
-              protected cd: ChangeDetectorRef,
-              private elementRef: ElementRef) {
+              protected cd: ChangeDetectorRef) {
     super(cd);
   }
 
@@ -192,16 +192,13 @@ export class StatusWidgetComponent extends
   }
 
   private onResize() {
-    const paddingLeft = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingLeft;
-    const paddingRight = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingRight;
-    const paddingTop = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingTop;
-    const paddingBottom = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingBottom;
-    const pLeft = resolveCssSize(paddingLeft)[0];
-    const pRight = resolveCssSize(paddingRight)[0];
-    const pTop = resolveCssSize(paddingTop)[0];
-    const pBottom = resolveCssSize(paddingBottom)[0];
-    const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight);
-    const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom);
+    const computedStyle = getComputedStyle(this.statusWidgetPanel.nativeElement);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+
+    const widgetBoundingClientRect = this.statusWidgetPanel.nativeElement.getBoundingClientRect();
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     const targetSize = Math.min(panelWidth, panelHeight);
     const scale = targetSize / initialStatusWidgetSize;
     const width = initialStatusWidgetSize;
@@ -229,7 +226,9 @@ export class StatusWidgetComponent extends
     this.showLabel = stateSettings.showLabel && this.layout !== StatusWidgetLayout.icon;
     this.showStatus = stateSettings.showStatus && this.layout !== StatusWidgetLayout.icon;
     this.icon = stateSettings.icon;
-    this.padding = stateSettings.backgroundDisabled.overlay.enabled || stateSettings.background.overlay.enabled  ? undefined : this.settings.padding;
+    this.padding = stateSettings.backgroundDisabled.overlay.enabled || stateSettings.background.overlay.enabled
+      ? undefined
+      : this.settings.padding;
 
     const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
     const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;

ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts

@@ -35,7 +35,8 @@ import {
   backgroundStyle,
   ComponentStyle,
   iconStyle,
-  overlayStyle, resolveCssSize,
+  overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
@@ -46,8 +47,6 @@ import { ValueType } from '@shared/models/constants';
 import { UtilsService } from '@core/services/utils.service';
 
 const initialSwitchHeight = 60;
-const horizontalLayoutPadding = 48;
-const verticalLayoutPadding = 36;
 
 @Component({
   selector: 'tb-single-switch-widget',
@@ -233,19 +232,15 @@ export class SingleSwitchWidgetComponent extends
   }
 
   private onResize() {
-    const height = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height;
+    const widgetBoundingClientRect = this.singleSwitchPanel.nativeElement.getBoundingClientRect();
+    const height = widgetBoundingClientRect.height;
     const switchScale = height / initialSwitchHeight;
     const paddingScale = Math.min(switchScale, 1);
-    const paddingLeft = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingLeft;
-    const paddingRight = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingRight;
-    const paddingTop = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingTop;
-    const paddingBottom = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingBottom;
-    const pLeft = resolveCssSize(paddingLeft)[0];
-    const pRight = resolveCssSize(paddingRight)[0];
-    const pTop = resolveCssSize(paddingTop)[0];
-    const pBottom = resolveCssSize(paddingBottom)[0];
-    const panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight);
-    const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom);
+    const computedStyle = getComputedStyle(this.singleSwitchPanel.nativeElement);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'transform', `scale(1)`);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'width', 'auto');
     let contentWidth = this.singleSwitchToggleRow.nativeElement.getBoundingClientRect().width;

ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts

@@ -219,5 +219,5 @@ export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
       blur: 3
     }
   },
-  padding: '12px'
+  padding: '18px 24px'
 };

ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts

@@ -14,7 +14,6 @@
 /// limitations under the License.
 ///
 
-import { BatteryLevelLayout } from '@home/components/widget/lib/indicator/battery-level-widget.models';
 import {
   BackgroundSettings,
   BackgroundType,
@@ -103,5 +102,5 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
       blur: 3
     }
   },
-  padding: '12px'
+  padding: '20px 24px 24px'
 };