jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disable energy distribution animation if prefers-reduced-motion is set (#24581)

Browse Source 
* Disable energy distribution animation if prefers-reduced-motion is set

* Move check to willUpdate. Remove circle circumference animation
This commit is contained in:
karwosts 2025-03-11 06:57:43 -07:00 committed by GitHub
parent d0545fe827
commit e141b4dbee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
View File

@ -47,6 +47,8 @@ class HuiEnergyDistrubutionCard
@state() private _data?: EnergyData; @state() private _data?: EnergyData;
@state() private _animate = true;
protected hassSubscribeRequiredHostProps = ["_config"]; protected hassSubscribeRequiredHostProps = ["_config"];
public setConfig(config: EnergyDistributionCardConfig): void { public setConfig(config: EnergyDistributionCardConfig): void {
@ -78,6 +80,12 @@ class HuiEnergyDistrubutionCard
); );
} }
protected willUpdate() {
if (!this.hasUpdated && matchMedia("(prefers-reduced-motion)").matches) {
this._animate = false;
}
}
protected render() { protected render() {
if (!this._config) { if (!this._config) {
return nothing; return nothing;
@ -349,7 +357,7 @@ class HuiEnergyDistrubutionCard
</div> </div>
<svg width="80" height="30"> <svg width="80" height="30">
<path d="M40 0 v30" id="gas" /> <path d="M40 0 v30" id="gas" />
${gasUsage ${gasUsage && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="gas" class="gas"
@ -382,7 +390,7 @@ class HuiEnergyDistrubutionCard
</div> </div>
<svg width="80" height="30"> <svg width="80" height="30">
<path d="M40 0 v30" id="water" /> <path d="M40 0 v30" id="water" />
${waterUsage ${waterUsage && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="water" class="water"
@ -577,7 +585,7 @@ class HuiEnergyDistrubutionCard
? html`<div class="circle-container water bottom"> ? html`<div class="circle-container water bottom">
<svg width="80" height="30"> <svg width="80" height="30">
<path d="M40 30 v-30" id="water" /> <path d="M40 30 v-30" id="water" />
${waterUsage ${waterUsage && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="water" class="water"
@ -671,7 +679,7 @@ class HuiEnergyDistrubutionCard
d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100" d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
vector-effect="non-scaling-stroke" vector-effect="non-scaling-stroke"
></path> ></path>
${returnedToGrid && hasSolarProduction ${returnedToGrid && hasSolarProduction && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="return" class="return"
@ -690,7 +698,7 @@ class HuiEnergyDistrubutionCard
</animateMotion> </animateMotion>
</circle>` </circle>`
: ""} : ""}
${solarConsumption ${solarConsumption && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="solar" class="solar"
@ -705,7 +713,7 @@ class HuiEnergyDistrubutionCard
</animateMotion> </animateMotion>
</circle>` </circle>`
: ""} : ""}
${gridConsumption ${gridConsumption && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="grid" class="grid"
@ -720,7 +728,7 @@ class HuiEnergyDistrubutionCard
</animateMotion> </animateMotion>
</circle>` </circle>`
: ""} : ""}
${solarToBattery ${solarToBattery && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="battery-solar" class="battery-solar"
@ -735,7 +743,7 @@ class HuiEnergyDistrubutionCard
</animateMotion> </animateMotion>
</circle>` </circle>`
: ""} : ""}
${batteryConsumption ${batteryConsumption && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="battery-house" class="battery-house"
@ -750,7 +758,7 @@ class HuiEnergyDistrubutionCard
</animateMotion> </animateMotion>
</circle>` </circle>`
: ""} : ""}
${batteryFromGrid ${batteryFromGrid && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="battery-from-grid" class="battery-from-grid"
@ -766,7 +774,7 @@ class HuiEnergyDistrubutionCard
</animateMotion> </animateMotion>
</circle>` </circle>`
: ""} : ""}
${batteryToGrid ${batteryToGrid && this._animate
? svg`<circle ? svg`<circle
r="1" r="1"
class="battery-to-grid" class="battery-to-grid"
@ -1036,16 +1044,20 @@ class HuiEnergyDistrubutionCard
border-width: 2px; border-width: 2px;
} }
.circle svg circle { .circle svg circle {
animation: rotate-in 0.6s ease-in;
transition:
stroke-dashoffset 0.4s,
stroke-dasharray 0.4s;
fill: none; fill: none;
} }
@keyframes rotate-in { @media not (prefers-reduced-motion) {
from { .circle svg circle {
stroke-dashoffset: 238.76104; animation: rotate-in 0.6s ease-in;
stroke-dasharray: 238.76104; transition:
stroke-dashoffset 0.4s,
stroke-dasharray 0.4s;
}
@keyframes rotate-in {
from {
stroke-dashoffset: 238.76104;
stroke-dasharray: 238.76104;
}
} }
} }
.card-actions a { .card-actions a {