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

UI: Refactor widget padding change default value for backward compatibility

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-09-10 12:38:06 +03:00
parent 5ef5c92b82
commit fb1d993290
8 changed files with 46 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -15,12 +15,12 @@
limitations under the License. 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-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
<div class="tb-status-widget-title-panel"> <div class="tb-status-widget-title-panel">
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
</div> </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"> <div class="tb-status-widget-icon-container">
<tb-icon [style]="iconStyle">{{ icon }}</tb-icon> <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
</div> </div>

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

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

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

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

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

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

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

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

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