Card-padding for some widgets

2 years ago · 864ba221ea
29 changed files with 151 additions and 50 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@ -126,6 +126,12 @@
        <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
      </mat-form-field>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
  <tb-widget-actions-panel
    formControlName="actions">
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
@ -144,6 +144,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {

      cardButtons: [this.getCardButtons(configData.config), []],
      borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],

      actions: [configData.config.actions || {}, []]
    });
@ -183,6 +184,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {

    this.setCardButtons(config.cardButtons, this.widgetConfig.config);
    this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;

    this.widgetConfig.config.actions = config.actions;
    return this.widgetConfig;
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@ -94,6 +94,12 @@
        <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
      </mat-form-field>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
  <tb-widget-actions-panel
      formControlName="actions">
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
@ -29,7 +29,7 @@ import {
  statusWidgetLayoutImages,
  statusWidgetLayouts,
  statusWidgetLayoutTranslations,
-  StatusWidgetSettings
+  StatusWidgetSettings, StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';

@Component({
@ -66,6 +66,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent

  protected onConfigSet(configData: WidgetConfigComponentData) {
    const settings: StatusWidgetSettings = {...statusWidgetDefaultSettings, ...(configData.config.settings || {})};
+
    this.statusWidgetConfigForm = this.fb.group({
      targetDevice: [configData.config.targetDevice, []],

@ -79,6 +80,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent

      cardButtons: [this.getCardButtons(configData.config), []],
      borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],

      actions: [configData.config.actions || {}, []]
    });
@ -99,6 +101,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent

    this.setCardButtons(config.cardButtons, this.widgetConfig.config);
    this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;

    this.widgetConfig.config.actions = config.actions;
    return this.widgetConfig;
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@ -211,6 +211,12 @@
      <tb-background-settings formControlName="background">
      </tb-background-settings>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
    <div class="tb-form-row space-between column-lt-md">
      <div translate>widget-config.show-card-buttons</div>
      <mat-chip-listbox multiple formControlName="cardButtons">
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
@ -108,6 +108,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent

      cardButtons: [this.getCardButtons(configData.config), []],
      borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],

      actions: [configData.config.actions || {}, []]
    });
@ -159,6 +160,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent

    this.setCardButtons(config.cardButtons, this.widgetConfig.config);
    this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;

    this.widgetConfig.config.actions = config.actions;
    return this.widgetConfig;
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@ -208,6 +208,12 @@
        <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
      </mat-form-field>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
  <tb-widget-actions-panel
    formControlName="actions">
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
@ -147,6 +147,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom

      cardButtons: [this.getCardButtons(configData.config), []],
      borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],

      actions: [configData.config.actions || {}, []]
    });
@ -198,6 +199,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom

    this.setCardButtons(config.cardButtons, this.widgetConfig.config);
    this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;

    this.widgetConfig.config.actions = config.actions;
    return this.widgetConfig;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@ -15,41 +15,41 @@
    limitations under the License.

 -->
-<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style]="backgroundStyle$ | async">
+<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
  <div class="tb-value-card-overlay" [style]="overlayStyle"></div>
  <div class="tb-value-card-title-panel">
    <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
  </div>
  <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
-    <ng-container [ngSwitch]="layout">
-    <ng-template [ngSwitchCase]="valueCardLayout.square">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.vertical">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.centered">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <div class="tb-value-card-icon-row">
+    <ng-container class="aboba" [ngSwitch]="layout">
+      <ng-template class="aboba" [ngSwitchCase]="valueCardLayout.square">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.vertical">
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
        <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.centered">
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+        <div class="tb-value-card-icon-row">
+          <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+          <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        </div>
+        <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.simplified">
        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      </div>
-      <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.simplified">
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
-                                 layout === valueCardLayout.horizontal_reversed ? layout : ''">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <div fxFlex></div>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-  </ng-container>
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
+                                   layout === valueCardLayout.horizontal_reversed ? layout : ''">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <div fxFlex></div>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+      </ng-template>
+    </ng-container>
  </div>
 </div>
 <ng-template #iconWithLabelTpl>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
@ -37,7 +37,7 @@ import {
  getLabel,
  getSingleTsValue,
  iconStyle,
-  overlayStyle,
+  overlayStyle, resolveCssSize,
  textStyle
 } from '@shared/models/widget-settings.models';
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
@ -96,6 +96,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro

  backgroundStyle$: Observable<ComponentStyle>;
  overlayStyle: ComponentStyle = {};
+  padding: string;

  private panelResize$: ResizeObserver;

@ -139,6 +140,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
    this.labelStyle = textStyle(this.settings.labelFont);
    this.labelColor =  ColorProcessor.fromSettings(this.settings.labelColor);
    this.valueStyle = textStyle(this.settings.valueFont);
+    console.log(this.valueStyle);
    this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);

    this.showDate = this.settings.showDate;
@ -148,6 +150,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro

    this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
    this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
  }

  public ngAfterViewInit() {
@ -199,8 +202,16 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
  }

  private onResize() {
-    const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - squareLayoutPadding;
-    const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (this.horizontal ? 0 : squareLayoutPadding);
+    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);
    let scale: number;
    if (!this.horizontal) {
      const size = Math.min(panelWidth, panelHeight);
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
@ -80,6 +80,7 @@ export interface ValueCardWidgetSettings {
  dateFont: Font;
  dateColor: ColorSettings;
  background: BackgroundSettings;
+  padding: string;
 }

 export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSettings => ({
@ -128,5 +129,6 @@ export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSe
      color: 'rgba(255,255,255,0.72)',
      blur: 3
    }
-  }
+  },
+  padding: '12px'
 });
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div #statusWidgetPanel class="tb-status-widget-panel" [style]="backgroundStyle$ | async">
+<div #statusWidgetPanel class="tb-status-widget-panel" [style.padding]="padding" [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>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
@ -38,7 +38,6 @@
  .tb-status-widget-content {
    width: 100%;
    height: 100%;
-    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
@ -35,7 +35,7 @@ import {
  backgroundStyle,
  ComponentStyle,
  iconStyle,
-  overlayStyle,
+  overlayStyle, resolveCssSize,
  textStyle
 } from '@shared/models/widget-settings.models';
 import { ResizeObserver } from '@juggle/resize-observer';
@ -65,6 +65,7 @@ export class StatusWidgetComponent extends

  backgroundStyle$: Observable<ComponentStyle>;
  overlayStyle: ComponentStyle = {};
+  padding: string;

  overlayInset = '12px';
  borderRadius = '';
@ -191,8 +192,16 @@ export class StatusWidgetComponent extends
  }

  private onResize() {
-    const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width;
-    const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height;
+    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 targetSize = Math.min(panelWidth, panelHeight);
    const scale = targetSize / initialStatusWidgetSize;
    const width = initialStatusWidgetSize;
@ -220,6 +229,7 @@ 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.background.overlay.enabled ? undefined : this.settings.padding;

    const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
    const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
@ -65,6 +65,7 @@ export interface StatusWidgetSettings {
  layout: StatusWidgetLayout;
  onState: StatusWidgetStateSettings;
  offState: StatusWidgetStateSettings;
+  padding: string
 }

 export const statusWidgetDefaultSettings: StatusWidgetSettings = {
@ -200,5 +201,6 @@ export const statusWidgetDefaultSettings: StatusWidgetSettings = {
        blur: 3
      }
    }
-  }
+  },
+  padding: '12px'
 };
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style]="backgroundStyle$ | async">
+<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
  <div class="tb-single-switch-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
  <div class="tb-single-switch-title-panel">
    <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
@ -35,7 +35,7 @@ import {
  backgroundStyle,
  ComponentStyle,
  iconStyle,
-  overlayStyle,
+  overlayStyle, resolveCssSize,
  textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
@ -74,6 +74,7 @@ export class SingleSwitchWidgetComponent extends

  backgroundStyle$: Observable<ComponentStyle>;
  overlayStyle: ComponentStyle = {};
+  padding: string;
  overlayInset = '12px';

  value = false;
@ -123,6 +124,7 @@ export class SingleSwitchWidgetComponent extends

    this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
    this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;

    this.layout = this.settings.layout;

@ -234,8 +236,16 @@ export class SingleSwitchWidgetComponent extends
    const height = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height;
    const switchScale = height / initialSwitchHeight;
    const paddingScale = Math.min(switchScale, 1);
-    const panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (horizontalLayoutPadding * paddingScale);
-    const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (verticalLayoutPadding * paddingScale);
+    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);
    this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'transform', `scale(1)`);
    this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'width', 'auto');
    let contentWidth = this.singleSwitchToggleRow.nativeElement.getBoundingClientRect().width;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
@ -80,6 +80,7 @@ export interface SingleSwitchWidgetSettings {
  offLabelFont: Font;
  offLabelColor: string;
  background: BackgroundSettings;
+  padding: string;
 }

 export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
@ -217,5 +218,6 @@ export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
      color: 'rgba(255,255,255,0.72)',
      blur: 3
    }
-  }
+  },
+  padding: '12px'
 };
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@ -93,5 +93,11 @@
      <tb-background-settings formControlName="background">
      </tb-background-settings>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
 </ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
@ -110,7 +110,8 @@ export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
      dateFont: [settings.dateFont, []],
      dateColor: [settings.dateColor, []],

-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
    });
  }

--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@ -123,6 +123,12 @@
      <tb-background-settings formControlName="background">
      </tb-background-settings>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
  <div class="tb-form-panel">
    <div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
@ -102,7 +102,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
      offLabelFont: [settings.offLabelFont, []],
      offLabelColor: [settings.offLabelColor, []],

-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
    });
  }

--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@ -78,5 +78,11 @@
        [layout]="statusWidgetSettingsForm.get('layout').value"
        formControlName="offState">
    </tb-status-widget-state-settings>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
 </ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
@ -73,7 +73,8 @@ export class StatusWidgetSettingsComponent extends WidgetSettingsComponent {
      disabledState: [settings.disabledState, []],
      layout: [settings.layout, []],
      onState: [settings.onState, []],
-      offState: [settings.offState, []]
+      offState: [settings.offState, []],
+      padding: [settings.padding, []]
    });
  }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@ -100,5 +100,11 @@
      <tb-background-settings formControlName="background">
      </tb-background-settings>
    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
  </div>
 </ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
@ -91,7 +91,8 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom

      arrowColor: [settings.arrowColor, []],

-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
    });
  }

--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-wind-speed-direction-panel" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-wind-speed-direction-panel" [style.padding]="padding" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
  <div class="tb-wind-speed-direction-overlay" [style]="overlayStyle"></div>
  <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
  <div class="tb-wind-speed-direction-content">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
@ -92,6 +92,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft

  backgroundStyle$: Observable<ComponentStyle>;
  overlayStyle: ComponentStyle = {};
+  padding: string;

  shapeResize$: ResizeObserver;

@ -142,6 +143,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft

    this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
    this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;

    this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
  }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
@ -59,6 +59,7 @@ export interface WindSpeedDirectionWidgetSettings {
  minorTicksColor: string;
  minorTicksFont: Font;
  background: BackgroundSettings;
+  padding: string
 }

 export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings = {
@ -101,5 +102,6 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
      color: 'rgba(255,255,255,0.72)',
      blur: 3
    }
-  }
+  },
+  padding: '12px'
 };