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

Media Card: Reset Marquee on Text change (#5184)

Browse Source 
* Stop marquee on next and prev

* force stop

* clean

* This is much better

* Clean

* comments

* comment

* No more repaints
This commit is contained in:
Zack Arnett 2020-03-13 15:22:49 -04:00 committed by GitHub
parent 21fe68add0
commit 94e2a0dea0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/panels/lovelace/components/hui-marquee.ts
View File

@ -30,6 +30,10 @@ class HuiMarquee extends LitElement {
protected updated(changedProperties: PropertyValues): void { protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties); super.updated(changedProperties);
if (changedProperties.has("text") && this._animating) {
this._animating = false;
}
if ( if (
changedProperties.has("active") && changedProperties.has("active") &&
this.active && this.active &&
@ -69,6 +73,7 @@ class HuiMarquee extends LitElement {
position: relative; position: relative;
align-items: center; align-items: center;
height: 1em; height: 1em;
contain: strict;
} }
.marquee-inner { .marquee-inner {
@ -77,7 +82,6 @@ class HuiMarquee extends LitElement {
right: 0; right: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
animation: marquee 10s linear infinite paused;
} }
:host(.hovering) .marquee-inner { :host(.hovering) .marquee-inner {
@ -88,7 +92,7 @@ class HuiMarquee extends LitElement {
:host([animating]) .marquee-inner { :host([animating]) .marquee-inner {
left: initial; left: initial;
right: initial; right: initial;
animation-play-state: running; animation: marquee 10s linear infinite;
} }
:host([animating]) .marquee-inner span { :host([animating]) .marquee-inner span {