dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11320 from d2eight/card-padding

Browse Source 
[Widgets] - Adding card-padding setting
This commit is contained in:
Igor Kulikov 2024-09-10 15:38:38 +03:00 committed by GitHub
commit bbc3e904c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 151 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
View File

@ -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">

2
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
View File

@ -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;

6
ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
View File

@ -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">

2
ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
View File

@ -79,6 +79,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
cardButtons: [this.getCardButtons(configData.config), []],
borderRadius: [configData.config.borderRadius, []],
padding: [settings.padding, []],
actions: [configData.config.actions || {}, []]
});
@ -99,6 +100,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;

6
ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
View File

@ -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">

2
ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
View File

@ -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;

6
ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
View File

@ -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">

2
ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
View File

@ -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;

2
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
View File

@ -15,7 +15,7 @@
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>

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

@ -38,6 +38,7 @@ import {
getSingleTsValue,
iconStyle,
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({
@ -96,6 +96,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
padding: string;
private panelResize$: ResizeObserver;
@ -148,6 +149,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 +201,13 @@ 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 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);

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

@ -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 {
@ -80,6 +82,7 @@ export interface ValueCardWidgetSettings {
dateFont: Font;
dateColor: ColorSettings;
background: BackgroundSettings;
padding: string;
}
export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSettings => ({
@ -128,5 +131,6 @@ export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSe
color: 'rgba(255,255,255,0.72)',
blur: 3
}
}
},
padding: ''
});

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

@ -20,7 +20,7 @@
<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>

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

@ -21,14 +21,16 @@ 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 {
@ -36,12 +38,12 @@ import {
ComponentStyle,
iconStyle,
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;
@ -65,6 +67,7 @@ export class StatusWidgetComponent extends
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
padding: string;
overlayInset = '12px';
borderRadius = '';
@ -101,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);
}
@ -191,8 +192,13 @@ export class StatusWidgetComponent extends
}
private onResize() {
const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width;
const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height;
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;
@ -220,6 +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;
const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;

4
ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
View File

@ -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: ''
};

2
ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
View File

@ -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>

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

@ -36,6 +36,7 @@ import {
ComponentStyle,
iconStyle,
overlayStyle,
resolveCssSize,
textStyle
} from '@shared/models/widget-settings.models';
import { Observable } from 'rxjs';
@ -74,6 +75,7 @@ export class SingleSwitchWidgetComponent extends
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
padding: string;
overlayInset = '12px';
value = false;
@ -123,6 +125,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;
@ -231,11 +234,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 panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (horizontalLayoutPadding * paddingScale);
const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (verticalLayoutPadding * paddingScale);
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) || horizontalLayoutPadding * paddingScale);
const panelHeight = widgetBoundingClientRect.height - ((pTop + pBottom) || verticalLayoutPadding * paddingScale);
this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'transform', `scale(1)`);
this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'width', 'auto');
let contentWidth = this.singleSwitchToggleRow.nativeElement.getBoundingClientRect().width;

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

@ -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: ''
};

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
View File

@ -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>

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

@ -110,7 +110,8 @@ export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
dateFont: [settings.dateFont, []],
dateColor: [settings.dateColor, []],
background: [settings.background, []]
background: [settings.background, []],
padding: [settings.padding, []]
});
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
View File

@ -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>

3
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
View File

@ -102,7 +102,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
offLabelFont: [settings.offLabelFont, []],
offLabelColor: [settings.offLabelColor, []],
background: [settings.background, []]
background: [settings.background, []],
padding: [settings.padding, []]
});
}

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

@ -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>

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

@ -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, []]
});
}
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
View File

@ -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>

3
ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
View File

@ -91,7 +91,8 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
arrowColor: [settings.arrowColor, []],
background: [settings.background, []]
background: [settings.background, []],
padding: [settings.padding, []]
});
}

2
ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
View File

@ -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">

6
ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
View File

@ -42,7 +42,6 @@ import {
getSingleTsValueByDataKey,
overlayStyle
} from '@shared/models/widget-settings.models';
import { WidgetComponent } from '@home/components/widget/widget.component';
import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
import { ResizeObserver } from '@juggle/resize-observer';
import { Path, Svg, SVG, Text } from '@svgdotjs/svg.js';
@ -92,6 +91,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
padding: string;
shapeResize$: ResizeObserver;
@ -111,8 +111,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
private windDirection = 0;
private centerValueText = 'N/A';
constructor(private widgetComponent: WidgetComponent,
private imagePipe: ImagePipe,
constructor(private imagePipe: ImagePipe,
private sanitizer: DomSanitizer,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
@ -142,6 +141,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;
}

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

@ -14,7 +14,6 @@
/// limitations under the License.
///
import { BatteryLevelLayout } from '@home/components/widget/lib/indicator/battery-level-widget.models';
import {
BackgroundSettings,
BackgroundType,
@ -59,6 +58,7 @@ export interface WindSpeedDirectionWidgetSettings {
minorTicksColor: string;
minorTicksFont: Font;
background: BackgroundSettings;
padding: string
}
export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings = {
@ -101,5 +101,6 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
color: 'rgba(255,255,255,0.72)',
blur: 3
}
}
},
padding: ''
};