From 078c5be6d436ac36c6397f6cc344de4e434e3dd5 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 15 Jul 2024 10:51:45 +0300 Subject: [PATCH] UI: power layouts for power button widget --- .../lib/rpc/power-button-widget.models.ts | 164 +++++++++++++++--- .../assets/locale/locale.constant-en_US.json | 3 + .../power-button/default-power-layout.svg | 51 ++++++ .../power-button/outlined-power-layout.svg | 38 ++++ .../power-button/simplified-power-layout.svg | 34 ++++ 5 files changed, 267 insertions(+), 23 deletions(-) create mode 100644 ui-ngx/src/assets/widget/power-button/default-power-layout.svg create mode 100644 ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg create mode 100644 ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts index 00cc3f24f9..ee94f5f05f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts @@ -24,7 +24,7 @@ import { SetValueSettings, ValueToDataType } from '@shared/models/action-widget-settings.models'; -import { Circle, Effect, Element, G, Gradient, Runner, Svg, Text, Timeline } from '@svgdotjs/svg.js'; +import { Circle, Effect, Element, G, Gradient, Path, Runner, Svg, Text, Timeline } from '@svgdotjs/svg.js'; import '@svgdotjs/svg.filter.js'; import tinycolor from 'tinycolor2'; import { WidgetContext } from '@home/models/widget-component.models'; @@ -35,7 +35,10 @@ export enum PowerButtonLayout { outlined = 'outlined', default_volume = 'default_volume', simplified_volume = 'simplified_volume', - outlined_volume = 'outlined_volume' + outlined_volume = 'outlined_volume', + default_power = 'default_power', + simplified_power = 'simplified_power', + outlined_power = 'outlined_power' } export const powerButtonLayouts = Object.keys(PowerButtonLayout) as PowerButtonLayout[]; @@ -47,7 +50,10 @@ export const powerButtonLayoutTranslations = new Map( [PowerButtonLayout.outlined, 'widgets.power-button.layout-outlined'], [PowerButtonLayout.default_volume, 'widgets.power-button.layout-default-volume'], [PowerButtonLayout.simplified_volume, 'widgets.power-button.layout-simplified-volume'], - [PowerButtonLayout.outlined_volume, 'widgets.power-button.layout-outlined-volume'] + [PowerButtonLayout.outlined_volume, 'widgets.power-button.layout-outlined-volume'], + [PowerButtonLayout.default_power, 'widgets.power-button.layout-default-power'], + [PowerButtonLayout.simplified_power, 'widgets.power-button.layout-simplified-power'], + [PowerButtonLayout.outlined_power, 'widgets.power-button.layout-outlined-power'] ] ); @@ -58,7 +64,10 @@ export const powerButtonLayoutImages = new Map( [PowerButtonLayout.outlined, 'assets/widget/power-button/outlined-layout.svg'], [PowerButtonLayout.default_volume, 'assets/widget/power-button/default-volume-layout.svg'], [PowerButtonLayout.simplified_volume, 'assets/widget/power-button/simplified-volume-layout.svg'], - [PowerButtonLayout.outlined_volume, 'assets/widget/power-button/outlined-volume-layout.svg'] + [PowerButtonLayout.outlined_volume, 'assets/widget/power-button/outlined-volume-layout.svg'], + [PowerButtonLayout.default_power, 'assets/widget/power-button/default-power-layout.svg'], + [PowerButtonLayout.simplified_power, 'assets/widget/power-button/simplified-power-layout.svg'], + [PowerButtonLayout.outlined_power, 'assets/widget/power-button/outlined-power-layout.svg'] ] ); @@ -242,6 +251,12 @@ export abstract class PowerButtonShape { return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); case PowerButtonLayout.outlined_volume: return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); + case PowerButtonLayout.default_power: + return new DefaultVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true); + case PowerButtonLayout.simplified_power: + return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true); + case PowerButtonLayout.outlined_power: + return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true); } } @@ -249,6 +264,13 @@ export abstract class PowerButtonShape { protected readonly onLabel: string; protected readonly offLabel: string; + protected powerCircle = 'M13 4.67063C13 3.65748 12.0377 2.91866 11.0946 3.28889C4.59815 5.83928 0 12.1545 0 19.5412C0 29.1835 ' + + '7.83502 37.0001 17.5 37.0001C27.165 37.0001 35 29.1835 35 19.5412C35 12.1545 30.4019 5.83928 23.9054 3.28889C22.9623 2.91866 22 ' + + '3.65748 22 4.67063C22 5.33931 22.434 5.92434 23.0519 6.17991C28.3077 8.35375 32 13.5209 32 19.5412C32 27.52 25.5148 34.0001 17.5 ' + + '34.0001C9.48521 34.0001 3 27.52 3 19.5412C3 13.5209 6.69234 8.35374 11.9481 6.17991C12.566 5.92434 13 5.33931 13 4.67063Z'; + protected powerLine = 'M16.5 1C16.5 0.447716 16.9477 0 17.5 0C18.0523 0 18.5 0.447715 18.5 1V17C18.5 ' + + '17.5523 18.0523 18 17.5 18C16.9477 18 16.5 17.5523 16.5 17V1Z'; + protected backgroundShape: Circle; protected hoverShape: Circle; protected hovered = false; @@ -260,7 +282,8 @@ export abstract class PowerButtonShape { protected settings: PowerButtonWidgetSettings, protected value: boolean, protected disabled: boolean, - protected onClick: () => void) { + protected onClick: () => void, + protected iconMode: boolean = false) { this.colors = createPowerButtonShapeColors(this.settings); this.onLabel = this.widgetContext.translate.instant('widgets.power-button.on-label').toUpperCase(); this.offLabel = this.widgetContext.translate.instant('widgets.power-button.off-label').toUpperCase(); @@ -702,6 +725,10 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { private offLabelShape: Text; private onCircleShape: Circle; private onLabelShape: Text; + private offPowerSymbolCircle: Path; + private offPowerSymbolLine: Path; + private onPowerSymbolCircle: Path; + private onPowerSymbolLine: Path; private pressedTimeline: Timeline; private centerGroup: G; @@ -723,15 +750,30 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { add.stop(1, '#FFFFFF', 1); }).from(0.832, 0.1188).to(0.268, 0.92); this.centerGroup = this.svgShape.group(); - this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup); + if (this.iconMode) { + this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup); + this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup); + } else { + this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup); + } this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy); - this.onLabelShape = this.createOnLabel('400'); - this.createMask(this.onCircleShape, [this.onLabelShape]); + if (this.iconMode) { + this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy); + this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12); + } else { + this.onLabelShape = this.createOnLabel('400'); + } + this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]); this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3); this.pressedTimeline = new Timeline(); this.centerGroup.timeline(this.pressedTimeline); - this.onLabelShape.timeline(this.pressedTimeline); + if (this.iconMode) { + this.onPowerSymbolCircle.timeline(this.pressedTimeline); + this.onPowerSymbolLine.timeline(this.pressedTimeline); + } else { + this.onLabelShape.timeline(this.pressedTimeline); + } this.innerShadow.timeline(this.pressedTimeline); } @@ -751,7 +793,12 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.innerBorder.fill(this.innerBorderGradient); this.innerBorder.attr({ 'fill-opacity': 1 }); } - this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + if (this.iconMode) { + this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } else { + this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } @@ -776,14 +823,24 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.innerShadow.show(); const pressedScale = 0.75; powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); - powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale, origin: {x: cx, y: cy}}); + if (this.iconMode) { + powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale, origin: {x: cx, y: cy}}); + powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale, origin: {x: cx, y: cy}}); + } else { + powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale, origin: {x: cx, y: cy}}); + } this.innerShadow.animate(6, 0.6); } protected onPressEnd() { this.pressedTimeline.finish(); powerButtonAnimation(this.centerGroup).transform({scale: 1}); - powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}}); + if (this.iconMode) { + powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}}); + powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}}); + } else { + powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}}); + } this.innerShadow.animateRestore().after(() => { if (this.disabled) { this.innerShadow.hide(); @@ -799,6 +856,10 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { private outerBorderMask: Circle; private offLabelShape: Text; private onLabelShape: Text; + private offPowerSymbolCircle: Path; + private offPowerSymbolLine: Path; + private onPowerSymbolCircle: Path; + private onPowerSymbolLine: Path; private innerShadow: InnerShadowCircle; private pressedShadow: InnerShadowCircle; private pressedTimeline: Timeline; @@ -812,9 +873,17 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 4).center(cx, cy); this.createMask(this.outerBorder, [this.outerBorderMask]); this.centerGroup = this.svgShape.group(); - this.offLabelShape = this.createOffLabel().addTo(this.centerGroup); this.onCenterGroup = this.svgShape.group(); - this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup); + + if (this.iconMode) { + this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup); + this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup); + this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.onCenterGroup); + this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.onCenterGroup); + } else { + this.offLabelShape = this.createOffLabel().addTo(this.centerGroup); + this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup); + } this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 3, 0.3); this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 0, 0); this.pressedTimeline = new Timeline(); @@ -824,8 +893,15 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { } protected drawColorState(mainColor: PowerButtonColor){ - this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); - this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + if (this.iconMode) { + this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.onPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.onPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } else { + this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } } protected drawOff() { @@ -876,6 +952,10 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { private offLabelShape: Text; private onCircleShape: Circle; private onLabelShape: Text; + private offPowerSymbolCircle: Path; + private offPowerSymbolLine: Path; + private onPowerSymbolCircle: Path; + private onPowerSymbolLine: Path; private pressedShadow: InnerShadowCircle; private pressedTimeline: Timeline; private centerGroup: G; @@ -895,19 +975,42 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy); this.createMask(this.innerBorder, [this.innerBorderMask]); this.centerGroup = this.svgShape.group(); - this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup); + if (this.iconMode) { + this.powerCircle = 'M12 2.95698C12 1.45236 10.4775 0.438524 9.19424 1.22416C3.68417 4.59764 0 10.7283 0 17.7316C0 ' + + '28.3732 8.50659 37 19 37C29.4934 37 38 28.3732 38 17.7316C38 10.7283 34.3158 4.59764 28.8058 1.22416C27.5225 ' + + '0.438524 26 1.45236 26 2.95698C26 3.73878 26.4365 4.44718 27.0911 4.87461C31.2354 7.58066 34 12.3083 34 ' + + '17.7316C34 26.2172 27.2316 33 19 33C10.7684 33 4 26.2172 4 17.7316C4 12.3084 6.76462 7.58066 10.9089 ' + + '4.87461C11.5635 4.44718 12 3.73878 12 2.95698Z'; + this.powerLine = 'M0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5V15.5C5 16.8807 3.88071 18 ' + + '2.5 18C1.11929 18 0 16.8807 0 15.5V2.5Z'; + + this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup); + this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup); + } else { + this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup); + } this.onCenterGroup = this.svgShape.group(); this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy) .addTo(this.onCenterGroup); - this.onLabelShape = this.createOnLabel('800'); - this.createMask(this.onCircleShape, [this.onLabelShape]); + if (this.iconMode) { + this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy); + this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12); + } else { + this.onLabelShape = this.createOnLabel('800'); + } + this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]); this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 30, cx, cy, 0, 0); this.backgroundShape.addClass('tb-small-shadow'); this.pressedTimeline = new Timeline(); this.centerGroup.timeline(this.pressedTimeline); this.onCenterGroup.timeline(this.pressedTimeline); - this.onLabelShape.timeline(this.pressedTimeline); + if (this.iconMode) { + this.onPowerSymbolCircle.timeline(this.pressedTimeline); + this.onPowerSymbolLine.timeline(this.pressedTimeline); + } else { + this.onLabelShape.timeline(this.pressedTimeline); + } this.pressedShadow.timeline(this.pressedTimeline); } @@ -919,7 +1022,12 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.outerBorder.attr({ 'fill-opacity': 1 }); } this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); - this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + if (this.iconMode) { + this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } else { + this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } @@ -940,7 +1048,12 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { const pressedScale = 0.75; powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98}); - powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}}); + if (this.iconMode) { + powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}}); + powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}}); + } else { + powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}}); + } this.pressedShadow.animate(6, 0.6); } @@ -948,7 +1061,12 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.pressedTimeline.finish(); powerButtonAnimation(this.centerGroup).transform({scale: 1}); powerButtonAnimation(this.onCenterGroup).transform({scale: 1}); - powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}}); + if (this.iconMode) { + powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}}); + powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}}); + } else { + powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}}); + } this.pressedShadow.animateRestore(); } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index b1b17ca3aa..f4a0286aa5 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5621,6 +5621,9 @@ "layout-default-volume": "Default.Volume", "layout-simplified-volume": "Simplified.Volume", "layout-outlined-volume": "Outlined.Volume", + "layout-default-power": "Default.Power", + "layout-simplified-power": "Simplified.Power", + "layout-outlined-power": "Outlined.Power", "main": "Main", "background": "Background", "power-on-colors": "Power 'On' colors", diff --git a/ui-ngx/src/assets/widget/power-button/default-power-layout.svg b/ui-ngx/src/assets/widget/power-button/default-power-layout.svg new file mode 100644 index 0000000000..9da9ba8535 --- /dev/null +++ b/ui-ngx/src/assets/widget/power-button/default-power-layout.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg b/ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg new file mode 100644 index 0000000000..b884cd06b0 --- /dev/null +++ b/ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg b/ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg new file mode 100644 index 0000000000..be3596da29 --- /dev/null +++ b/ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +