From 3a453f58439a2505642aba6b795f63923d0acc62 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 20 May 2020 21:27:08 +0200 Subject: [PATCH] Fix resize observers and update gauge styling (#5949) --- src/panels/lovelace/cards/hui-gauge-card.ts | 45 ++++++++++--------- .../lovelace/cards/hui-media-control-card.ts | 6 +-- .../cards/hui-weather-forecast-card.ts | 6 +-- .../hui-media-player-entity-row.ts | 6 +-- 4 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 3297515f53..c13ff98fef 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -238,9 +238,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { private async _attachObserver(): Promise { await installResizeObserver(); - this._resizeObserver = new ResizeObserver( - debounce(() => this._measureCard(), 250, false) - ); + this._resizeObserver = new ResizeObserver(this._debouncedMeasure); const card = this.shadowRoot!.querySelector("ha-card"); // If we show an error or warning there is no ha-card @@ -250,6 +248,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { this._resizeObserver.observe(card); } + private _debouncedMeasure = debounce(() => this._measureCard(), 250, true); + private _measureCard() { if (!this.isConnected) { return; @@ -277,7 +277,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { cursor: pointer; height: 100%; overflow: hidden; - padding: 16px 16px 0 16px; + padding: 16px; display: flex; align-items: center; justify-content: center; @@ -293,37 +293,39 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { round-slider { max-width: 200px; --round-slider-path-width: 35px; - --round-slider-path-color: var(--disabled-text-color); + --round-slider-path-color: var(--primary-background-color); --round-slider-linecap: "butt"; } .gauge-data { - line-height: 1; text-align: center; - position: relative; + line-height: initial; color: var(--primary-text-color); - margin-top: -28px; - margin-bottom: 14px; + margin-top: -26px; + width: 100%; } .gauge-data .percent { + white-space: nowrap; font-size: 28px; } .gauge-data .name { - padding-top: 6px; - font-size: 14px; + font-size: 15px; } /* ============= NARROW ============= */ + :host([narrow]) ha-card { + padding: 8px; + } + :host([narrow]) round-slider { --round-slider-path-width: 22px; } :host([narrow]) .gauge-data { - margin-top: -24px; - margin-bottom: 12px; + margin-top: -22px; } :host([narrow]) .gauge-data .percent { @@ -331,30 +333,29 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } :host([narrow]) .gauge-data .name { - font-size: 12px; + font-size: 14px; } /* ============= VERY NARROW ============= */ + :host([narrow]) ha-card { + padding: 4px; + } + :host([veryNarrow]) round-slider { --round-slider-path-width: 15px; } - :host([veryNarrow]) ha-card { - padding-bottom: 16px; - } - :host([veryNarrow]) .gauge-data { - margin-top: 0; - margin-bottom: 0; + margin-top: -16px; } :host([veryNarrow]) .gauge-data .percent { - font-size: 20px; + font-size: 16px; } :host([veryNarrow]) .gauge-data .name { - font-size: 10px; + font-size: 12px; } `; } diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index f1e070ff65..c7e5ba8319 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -618,6 +618,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ); } + private _debouncedMeasure = debounce(() => this._measureCard(), 250, true); + private _measureCard() { const card = this.shadowRoot!.querySelector("ha-card"); if (!card) { @@ -630,9 +632,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { private async _attachObserver(): Promise { await installResizeObserver(); - this._resizeObserver = new ResizeObserver( - debounce(() => this._measureCard(), 250, false) - ); + this._resizeObserver = new ResizeObserver(this._debouncedMeasure); const card = this.shadowRoot!.querySelector("ha-card"); // If we show an error or warning there is no ha-card diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 74f0151a2e..69862bb4c3 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -290,9 +290,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { private async _attachObserver(): Promise { await installResizeObserver(); - this._resizeObserver = new ResizeObserver( - debounce(() => this._measureCard(), 250, false) - ); + this._resizeObserver = new ResizeObserver(this._debouncedMeasure); const card = this.shadowRoot!.querySelector("ha-card"); // If we show an error or warning there is no ha-card @@ -302,6 +300,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { this._resizeObserver.observe(card); } + private _debouncedMeasure = debounce(() => this._measureCard(), 250, true); + private _measureCard() { if (!this.isConnected) { return; diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index a3a41ba6d2..ba9da31e08 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -53,7 +53,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { this._veryNarrow = (this.clientWidth || 0) < 225; }, 250, - false + true ); public setConfig(config: EntityConfig): void { @@ -216,9 +216,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { private _attachObserver(): void { installResizeObserver().then(() => { - this._resizeObserver = new ResizeObserver(() => - this._debouncedResizeListener() - ); + this._resizeObserver = new ResizeObserver(this._debouncedResizeListener); this._resizeObserver.observe(this); });