From 078c5be6d436ac36c6397f6cc344de4e434e3dd5 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 15 Jul 2024 10:51:45 +0300 Subject: [PATCH 1/4] 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From c044d8ea5da758a14335b3e73d46ea1722c0c7f9 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 15 Jul 2024 12:56:18 +0300 Subject: [PATCH 2/4] UI: Refactroing --- .../lib/rpc/power-button-widget.models.ts | 309 +++++++++++------- 1 file changed, 183 insertions(+), 126 deletions(-) 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 ee94f5f05f..d24c92ff16 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 @@ -228,6 +228,21 @@ export const powerButtonShapeSize = 110; const cx = powerButtonShapeSize / 2; const cy = powerButtonShapeSize / 2; +const 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'; +const 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'; + +const powerCircleStroke = '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'; +const powerLineStroke = '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'; + const powerButtonAnimation = (element: Element): Runner => element.animate(200, 0, 'now'); export abstract class PowerButtonShape { @@ -252,11 +267,11 @@ export abstract class PowerButtonShape { 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); + return new DefaultPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); case PowerButtonLayout.simplified_power: - return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true); + return new SimplifiedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); case PowerButtonLayout.outlined_power: - return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true); + return new OutlinedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); } } @@ -264,13 +279,6 @@ 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; @@ -282,8 +290,7 @@ export abstract class PowerButtonShape { protected settings: PowerButtonWidgetSettings, protected value: boolean, protected disabled: boolean, - protected onClick: () => void, - protected iconMode: boolean = false) { + protected onClick: () => void) { 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(); @@ -725,13 +732,34 @@ 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; + + protected drawOffCenter(centerGroup: G) { + this.offLabelShape = this.createOffLabel('400').addTo(centerGroup); + } + + protected drawOnCenter() { + this.onLabelShape = this.createOnLabel('400'); + } + + protected addMask(onCircleShape: Circle) { + this.createMask(onCircleShape,[this.onLabelShape]); + } + + protected addTimeLine(pressedTimeline: Timeline) { + this.onLabelShape.timeline(pressedTimeline); + } + + protected drawColor(mainColor: PowerButtonColor) { + this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } + + protected animation(scale: number) { + powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}}); + } + protected drawShape() { this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) .fill({opacity: 0}).stroke({width: 0}); @@ -750,30 +778,15 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { add.stop(1, '#FFFFFF', 1); }).from(0.832, 0.1188).to(0.268, 0.92); this.centerGroup = this.svgShape.group(); - 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.drawOffCenter(this.centerGroup); this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy); - 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.drawOnCenter(); + this.addMask(this.onCircleShape); this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3); this.pressedTimeline = new Timeline(); this.centerGroup.timeline(this.pressedTimeline); - if (this.iconMode) { - this.onPowerSymbolCircle.timeline(this.pressedTimeline); - this.onPowerSymbolLine.timeline(this.pressedTimeline); - } else { - this.onLabelShape.timeline(this.pressedTimeline); - } + this.addTimeLine(this.pressedTimeline); this.innerShadow.timeline(this.pressedTimeline); } @@ -793,12 +806,7 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.innerBorder.fill(this.innerBorderGradient); this.innerBorder.attr({ 'fill-opacity': 1 }); } - 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.drawColor(mainColor); this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } @@ -823,24 +831,14 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.innerShadow.show(); const pressedScale = 0.75; powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); - 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.animation(pressedScale); this.innerShadow.animate(6, 0.6); } protected onPressEnd() { this.pressedTimeline.finish(); powerButtonAnimation(this.centerGroup).transform({scale: 1}); - 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.animation(1); this.innerShadow.animateRestore().after(() => { if (this.disabled) { this.innerShadow.hide(); @@ -850,22 +848,58 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { } +class DefaultPowerPowerButtonShape extends DefaultVolumePowerButtonShape { + private offPowerSymbolCircle: Path; + private offPowerSymbolLine: Path; + private onPowerSymbolCircle: Path; + private onPowerSymbolLine: Path; + + protected drawOffCenter(centerGroup: G) { + this.offPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(centerGroup); + this.offPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(centerGroup); + } + + protected drawOnCenter() { + this.onPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy); + this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12); + } + + protected addMask(onCircleShape: Circle) { + this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]); + } + + protected addTimeLine(pressedTimeline: Timeline) { + this.onPowerSymbolCircle.timeline(pressedTimeline); + this.onPowerSymbolLine.timeline(pressedTimeline); + } + + protected drawColor(mainColor: PowerButtonColor) { + this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } + + protected animation(scale: number) { + powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}}); + powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}}); + } +} + class SimplifiedVolumePowerButtonShape extends PowerButtonShape { private outerBorder: Circle; 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; private centerGroup: G; private onCenterGroup: G; + protected drawCenterGroup(centerGroup: G, onCenterGroup: G) { + this.offLabelShape = this.createOffLabel().addTo(centerGroup); + this.onLabelShape = this.createOnLabel().addTo(onCenterGroup); + } protected drawShape() { this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) @@ -874,16 +908,7 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { this.createMask(this.outerBorder, [this.outerBorderMask]); this.centerGroup = this.svgShape.group(); this.onCenterGroup = this.svgShape.group(); - - 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.drawCenterGroup(this.centerGroup, 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(); @@ -893,15 +918,8 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { } protected drawColorState(mainColor: PowerButtonColor){ - 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}); - } + this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } protected drawOff() { @@ -943,7 +961,28 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { } } -class OutlinedVolumePowerButtonShape extends PowerButtonShape { +class SimplifiedPowerPowerButtonShape extends SimplifiedVolumePowerButtonShape { + private offPowerSymbolCircle: Path; + private offPowerSymbolLine: Path; + private onPowerSymbolCircle: Path; + private onPowerSymbolLine: Path; + + protected drawCenterGroup(centerGroup: G, onCenterGroup: G) { + this.offPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(centerGroup); + this.offPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(centerGroup); + this.onPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(onCenterGroup); + this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(onCenterGroup); + } + + protected drawColorState(mainColor: PowerButtonColor) { + 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}); + } +} + + class OutlinedVolumePowerButtonShape extends PowerButtonShape { private outerBorder: Circle; private outerBorderMask: Circle; private outerBorderGradient: Gradient; @@ -952,15 +991,35 @@ 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; private onCenterGroup: G; + protected drawOffCenter(centerGroup: G) { + this.offLabelShape = this.createOffLabel('800').addTo(centerGroup); + } + + protected drawOnCenter() { + this.onLabelShape = this.createOnLabel('800'); + } + + protected addMask(onCircleShape: Circle) { + this.createMask(onCircleShape,[this.onLabelShape]); + } + + protected addTimeLine(pressedTimeline: Timeline) { + this.onLabelShape.timeline(pressedTimeline); + } + + protected drawColor(mainColor: PowerButtonColor) { + this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } + + protected animation(scale: number) { + powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}}); + } + protected drawShape() { this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) .fill({opacity: 0}).stroke({width: 0}); @@ -975,42 +1034,19 @@ 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(); - 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.drawOffCenter(this.centerGroup); this.onCenterGroup = this.svgShape.group(); this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy) .addTo(this.onCenterGroup); - 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.drawOnCenter(); + this.addMask(this.onCircleShape); 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); - if (this.iconMode) { - this.onPowerSymbolCircle.timeline(this.pressedTimeline); - this.onPowerSymbolLine.timeline(this.pressedTimeline); - } else { - this.onLabelShape.timeline(this.pressedTimeline); - } + this.addTimeLine(this.pressedTimeline); this.pressedShadow.timeline(this.pressedTimeline); } @@ -1022,12 +1058,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.outerBorder.attr({ 'fill-opacity': 1 }); } this.innerBorder.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.drawColor(mainColor); this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } @@ -1048,12 +1079,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { const pressedScale = 0.75; powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98}); - 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.animation(pressedScale / 0.98); this.pressedShadow.animate(6, 0.6); } @@ -1061,13 +1087,44 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.pressedTimeline.finish(); powerButtonAnimation(this.centerGroup).transform({scale: 1}); powerButtonAnimation(this.onCenterGroup).transform({scale: 1}); - 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.animation(1); this.pressedShadow.animateRestore(); } } + +class OutlinedPowerPowerButtonShape extends OutlinedVolumePowerButtonShape { + private offPowerSymbolCircle: Path; + private offPowerSymbolLine: Path; + private onPowerSymbolCircle: Path; + private onPowerSymbolLine: Path; + + protected drawOffCenter(centerGroup: G) { + this.offPowerSymbolCircle = this.svgShape.path(powerCircleStroke).center(cx, cy).addTo(centerGroup); + this.offPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12).addTo(centerGroup); + } + + protected drawOnCenter() { + this.onPowerSymbolCircle = this.svgShape.path(powerCircleStroke).center(cx, cy); + this.onPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12); + } + + protected addMask(onCircleShape: Circle) { + this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]); + } + + protected addTimeLine(pressedTimeline: Timeline) { + this.onPowerSymbolCircle.timeline(pressedTimeline); + this.onPowerSymbolLine.timeline(pressedTimeline); + } + + protected drawColor(mainColor: PowerButtonColor) { + this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); + } + + protected animation(scale: number) { + powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}}); + powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}}); + } +} From 5bb078beb27edd458c52152c0ff5d43d0d206581 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 15 Jul 2024 14:28:45 +0300 Subject: [PATCH 3/4] UI: Refactoring --- .../components/widget/lib/rpc/power-button-widget.models.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d24c92ff16..664ebe5a56 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 @@ -982,7 +982,7 @@ class SimplifiedPowerPowerButtonShape extends SimplifiedVolumePowerButtonShape { } } - class OutlinedVolumePowerButtonShape extends PowerButtonShape { +class OutlinedVolumePowerButtonShape extends PowerButtonShape { private outerBorder: Circle; private outerBorderMask: Circle; private outerBorderGradient: Gradient; From d663e7b1c63acec927fdb388bf3e04487b89776c Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 24 Jul 2024 10:35:32 +0300 Subject: [PATCH 4/4] UI: Refactoring rename --- .../lib/rpc/power-button-widget.models.ts | 88 +++++++++---------- .../assets/locale/locale.constant-en_US.json | 6 +- ...wer-layout.svg => default-icon-layout.svg} | 0 ...er-layout.svg => outlined-icon-layout.svg} | 0 ...-layout.svg => simplified-icon-layout.svg} | 0 5 files changed, 47 insertions(+), 47 deletions(-) rename ui-ngx/src/assets/widget/power-button/{default-power-layout.svg => default-icon-layout.svg} (100%) rename ui-ngx/src/assets/widget/power-button/{outlined-power-layout.svg => outlined-icon-layout.svg} (100%) rename ui-ngx/src/assets/widget/power-button/{simplified-power-layout.svg => simplified-icon-layout.svg} (100%) 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 664ebe5a56..12e2a1065b 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 @@ -36,9 +36,9 @@ export enum PowerButtonLayout { default_volume = 'default_volume', simplified_volume = 'simplified_volume', outlined_volume = 'outlined_volume', - default_power = 'default_power', - simplified_power = 'simplified_power', - outlined_power = 'outlined_power' + default_icon = 'default_icon', + simplified_icon = 'simplified_icon', + outlined_icon = 'outlined_icon' } export const powerButtonLayouts = Object.keys(PowerButtonLayout) as PowerButtonLayout[]; @@ -51,9 +51,9 @@ export const powerButtonLayoutTranslations = new Map( [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.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'] + [PowerButtonLayout.default_icon, 'widgets.power-button.layout-default-icon'], + [PowerButtonLayout.simplified_icon, 'widgets.power-button.layout-simplified-icon'], + [PowerButtonLayout.outlined_icon, 'widgets.power-button.layout-outlined-icon'] ] ); @@ -65,9 +65,9 @@ export const powerButtonLayoutImages = new Map( [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.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'] + [PowerButtonLayout.default_icon, 'assets/widget/power-button/default-icon-layout.svg'], + [PowerButtonLayout.simplified_icon, 'assets/widget/power-button/simplified-icon-layout.svg'], + [PowerButtonLayout.outlined_icon, 'assets/widget/power-button/outlined-icon-layout.svg'] ] ); @@ -266,12 +266,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 DefaultPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); - case PowerButtonLayout.simplified_power: - return new SimplifiedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); - case PowerButtonLayout.outlined_power: - return new OutlinedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); + case PowerButtonLayout.default_icon: + return new DefaultIconPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); + case PowerButtonLayout.simplified_icon: + return new SimplifiedIconPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); + case PowerButtonLayout.outlined_icon: + return new OutlinedIconPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); } } @@ -744,19 +744,19 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.onLabelShape = this.createOnLabel('400'); } - protected addMask(onCircleShape: Circle) { + protected addOnCenterToMask(onCircleShape: Circle) { this.createMask(onCircleShape,[this.onLabelShape]); } - protected addTimeLine(pressedTimeline: Timeline) { + protected addOnCenterTimeLine(pressedTimeline: Timeline) { this.onLabelShape.timeline(pressedTimeline); } - protected drawColor(mainColor: PowerButtonColor) { + protected drawOffCenterColor(mainColor: PowerButtonColor) { this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } - protected animation(scale: number) { + protected onCenterAnimation(scale: number) { powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}}); } @@ -781,12 +781,12 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.drawOffCenter(this.centerGroup); this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy); this.drawOnCenter(); - this.addMask(this.onCircleShape); + this.addOnCenterToMask(this.onCircleShape); this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3); this.pressedTimeline = new Timeline(); this.centerGroup.timeline(this.pressedTimeline); - this.addTimeLine(this.pressedTimeline); + this.addOnCenterTimeLine(this.pressedTimeline); this.innerShadow.timeline(this.pressedTimeline); } @@ -806,7 +806,7 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.innerBorder.fill(this.innerBorderGradient); this.innerBorder.attr({ 'fill-opacity': 1 }); } - this.drawColor(mainColor); + this.drawOffCenterColor(mainColor); this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } @@ -831,14 +831,14 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { this.innerShadow.show(); const pressedScale = 0.75; powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); - this.animation(pressedScale); + this.onCenterAnimation(pressedScale); this.innerShadow.animate(6, 0.6); } protected onPressEnd() { this.pressedTimeline.finish(); powerButtonAnimation(this.centerGroup).transform({scale: 1}); - this.animation(1); + this.onCenterAnimation(1); this.innerShadow.animateRestore().after(() => { if (this.disabled) { this.innerShadow.hide(); @@ -848,7 +848,7 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape { } -class DefaultPowerPowerButtonShape extends DefaultVolumePowerButtonShape { +class DefaultIconPowerButtonShape extends DefaultVolumePowerButtonShape { private offPowerSymbolCircle: Path; private offPowerSymbolLine: Path; private onPowerSymbolCircle: Path; @@ -864,21 +864,21 @@ class DefaultPowerPowerButtonShape extends DefaultVolumePowerButtonShape { this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12); } - protected addMask(onCircleShape: Circle) { + protected addOnCenterToMask(onCircleShape: Circle) { this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]); } - protected addTimeLine(pressedTimeline: Timeline) { + protected addOnCenterTimeLine(pressedTimeline: Timeline) { this.onPowerSymbolCircle.timeline(pressedTimeline); this.onPowerSymbolLine.timeline(pressedTimeline); } - protected drawColor(mainColor: PowerButtonColor) { + protected drawOffCenterColor(mainColor: PowerButtonColor) { this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } - protected animation(scale: number) { + protected onCenterAnimation(scale: number) { powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}}); powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}}); } @@ -961,7 +961,7 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape { } } -class SimplifiedPowerPowerButtonShape extends SimplifiedVolumePowerButtonShape { +class SimplifiedIconPowerButtonShape extends SimplifiedVolumePowerButtonShape { private offPowerSymbolCircle: Path; private offPowerSymbolLine: Path; private onPowerSymbolCircle: Path; @@ -1004,19 +1004,19 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.onLabelShape = this.createOnLabel('800'); } - protected addMask(onCircleShape: Circle) { + protected addOnCenterToMask(onCircleShape: Circle) { this.createMask(onCircleShape,[this.onLabelShape]); } - protected addTimeLine(pressedTimeline: Timeline) { + protected addOnCenterTimeLine(pressedTimeline: Timeline) { this.onLabelShape.timeline(pressedTimeline); } - protected drawColor(mainColor: PowerButtonColor) { + protected drawOffCenterColor(mainColor: PowerButtonColor) { this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } - protected animation(scale: number) { + protected onCenterAnimation(scale: number) { powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}}); } @@ -1039,14 +1039,14 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy) .addTo(this.onCenterGroup); this.drawOnCenter(); - this.addMask(this.onCircleShape); + this.addOnCenterToMask(this.onCircleShape); 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.addTimeLine(this.pressedTimeline); + this.addOnCenterTimeLine(this.pressedTimeline); this.pressedShadow.timeline(this.pressedTimeline); } @@ -1058,7 +1058,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.outerBorder.attr({ 'fill-opacity': 1 }); } this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); - this.drawColor(mainColor); + this.drawOffCenterColor(mainColor); this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } @@ -1079,7 +1079,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { const pressedScale = 0.75; powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98}); - this.animation(pressedScale / 0.98); + this.onCenterAnimation(pressedScale / 0.98); this.pressedShadow.animate(6, 0.6); } @@ -1087,13 +1087,13 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape { this.pressedTimeline.finish(); powerButtonAnimation(this.centerGroup).transform({scale: 1}); powerButtonAnimation(this.onCenterGroup).transform({scale: 1}); - this.animation(1); + this.onCenterAnimation(1); this.pressedShadow.animateRestore(); } } -class OutlinedPowerPowerButtonShape extends OutlinedVolumePowerButtonShape { +class OutlinedIconPowerButtonShape extends OutlinedVolumePowerButtonShape { private offPowerSymbolCircle: Path; private offPowerSymbolLine: Path; private onPowerSymbolCircle: Path; @@ -1109,21 +1109,21 @@ class OutlinedPowerPowerButtonShape extends OutlinedVolumePowerButtonShape { this.onPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12); } - protected addMask(onCircleShape: Circle) { + protected addOnCenterToMask(onCircleShape: Circle) { this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]); } - protected addTimeLine(pressedTimeline: Timeline) { + protected addOnCenterTimeLine(pressedTimeline: Timeline) { this.onPowerSymbolCircle.timeline(pressedTimeline); this.onPowerSymbolLine.timeline(pressedTimeline); } - protected drawColor(mainColor: PowerButtonColor) { + protected drawOffCenterColor(mainColor: PowerButtonColor) { this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); } - protected animation(scale: number) { + protected onCenterAnimation(scale: number) { powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}}); powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}}); } 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 f4a0286aa5..d1dd82ad91 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5621,9 +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", + "layout-default-icon": "Default.Icon", + "layout-simplified-icon": "Simplified.Icon", + "layout-outlined-icon": "Outlined.Icon", "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-icon-layout.svg similarity index 100% rename from ui-ngx/src/assets/widget/power-button/default-power-layout.svg rename to ui-ngx/src/assets/widget/power-button/default-icon-layout.svg diff --git a/ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg b/ui-ngx/src/assets/widget/power-button/outlined-icon-layout.svg similarity index 100% rename from ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg rename to ui-ngx/src/assets/widget/power-button/outlined-icon-layout.svg diff --git a/ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg b/ui-ngx/src/assets/widget/power-button/simplified-icon-layout.svg similarity index 100% rename from ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg rename to ui-ngx/src/assets/widget/power-button/simplified-icon-layout.svg