jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 05:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix cardHeight (#5102)

Browse Source 
* Fix cardHeight

* Opacity instead of changing DOM

* Better fix

* Remove guard we don't need
This commit is contained in:
Paulus Schoutsen 2020-03-08 09:42:59 -07:00 committed by GitHub
parent b72d8cf7d7
commit 814fcf63a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-card.ts
View File

@ -5,8 +5,10 @@ import {
LitElement, LitElement,
property, property,
TemplateResult, TemplateResult,
customElement,
} from "lit-element"; } from "lit-element";
@customElement("ha-card")
class HaCard extends LitElement { class HaCard extends LitElement {
@property() public header?: string; @property() public header?: string;
@ -70,4 +72,8 @@ class HaCard extends LitElement {
} }
} }
customElements.define("ha-card", HaCard); declare global {
interface HTMLElementTagNameMap {
"ha-card": HaCard;
}
}

32
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -90,17 +90,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@property() private _cardHeight: number = 0; @property() private _cardHeight: number = 0;
private _progressInterval?: number; private _progressInterval?: number;
private _resizeObserver?: ResizeObserver; private _resizeObserver?: ResizeObserver;
private _debouncedResizeListener = debounce(
() => {
this._narrow = this.offsetWidth < 350;
this._veryNarrow = this.offsetWidth < 300;
if (this._image) {
this._cardHeight = this.offsetHeight;
}
},
250,
false
);
public getCardSize(): number { public getCardSize(): number {
return 3; return 3;
@ -116,14 +105,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
public connectedCallback(): void { public connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
this.updateComplete.then(() => this._measureCard());
if (!this.hass || !this._config) { if (!this.hass || !this._config) {
return undefined; return;
} }
const stateObj = this.hass.states[this._config.entity] as MediaEntity; const stateObj = this.hass.states[this._config.entity] as MediaEntity;
if (!stateObj) { if (!stateObj) {
return undefined; return;
} }
if ( if (
@ -429,6 +420,13 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
); );
} }
private _measureCard() {
const card = this.shadowRoot!.querySelector("ha-card")!;
this._narrow = card.offsetWidth < 350;
this._veryNarrow = card.offsetWidth < 300;
this._cardHeight = card.offsetHeight;
}
private _attachObserver(): void { private _attachObserver(): void {
if (typeof ResizeObserver !== "function") { if (typeof ResizeObserver !== "function") {
import("resize-observer").then((modules) => { import("resize-observer").then((modules) => {
@ -438,8 +436,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
return; return;
} }
this._resizeObserver = new ResizeObserver(() => this._resizeObserver = new ResizeObserver(
this._debouncedResizeListener() debounce(() => this._measureCard(), 250, false)
); );
this._resizeObserver.observe(this); this._resizeObserver.observe(this);
@ -561,6 +559,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
background-size 0.8s, opacity 0.8s linear 0.8s; background-size 0.8s, opacity 0.8s linear 0.8s;
} }
.no-image .image {
opacity: 0;
}
.no-img { .no-img {
background-color: var(--primary-color); background-color: var(--primary-color);
background-size: initial; background-size: initial;