From 92afd1910c4a9beb3ef143462bf7a3a847790ac5 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Mon, 4 Jan 2021 03:14:46 +0100 Subject: [PATCH 1/4] Add icon support to gauge --- src/common/entity/compute_state_display.ts | 2 +- src/panels/lovelace/cards/hui-gauge-card.ts | 24 ++++++++++- src/panels/lovelace/cards/types.ts | 1 + .../config-elements/hui-gauge-card-editor.ts | 41 ++++++++++++++----- 4 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts index f946d34015d5..93d30e6d3e92 100644 --- a/src/common/entity/compute_state_display.ts +++ b/src/common/entity/compute_state_display.ts @@ -63,7 +63,7 @@ export const computeStateDisplay = ( if (domain === "humidifier") { if (compareState === "on" && stateObj.attributes.humidity) { - return `${stateObj.attributes.humidity}%`; + return `${stateObj.attributes.humidity} %`; } } diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 47be53b049d5..b0bc5fd0b988 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -14,6 +14,7 @@ import { styleMap } from "lit-html/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; +import { stateIcon } from "../../../common/entity/state_icon"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import "../../../components/ha-card"; import "../../../components/ha-gauge"; @@ -137,8 +138,15 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { "--gauge-color": this._computeSeverity(state), })} > -
- ${this._config.name || computeStateName(stateObj)} +
+
+ +
+
+ ${this._config.name || computeStateName(stateObj)} +
`; @@ -230,6 +238,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { max-width: 250px; } + .row { + display: flex; + padding: 8px 16px 0; + justify-content: space-around; + } + .name { text-align: center; line-height: initial; @@ -238,6 +252,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { font-size: 15px; margin-top: 8px; } + + .icon { + color: var(--state-icon-color, #44739e); + margin-top: 4px; + margin-right: 4px; + } `; } } diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 673f4959d49a..4df7c7fd4a78 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -114,6 +114,7 @@ export interface GaugeCardConfig extends LovelaceCardConfig { max?: number; severity?: SeverityConfig; theme?: string; + icon?: string; } export interface ConfigEntity extends EntityConfig { diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts index 613a278f0122..da0147c5e2b3 100644 --- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts @@ -12,8 +12,10 @@ import { import { assert, number, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeRTLDirection } from "../../../../common/util/compute_rtl"; +import { stateIcon } from "../../../../common/entity/state_icon"; import "../../../../components/ha-formfield"; import "../../../../components/ha-switch"; +import "../../../../components/ha-icon-input"; import { HomeAssistant } from "../../../../types"; import { GaugeCardConfig, SeverityConfig } from "../../cards/types"; import "../../components/hui-entity-editor"; @@ -31,6 +33,7 @@ const cardConfigStruct = object({ max: optional(number()), severity: optional(object()), theme: optional(string()), + icon: optional(string()), }); const includeDomains = ["sensor"]; @@ -75,6 +78,10 @@ export class HuiGaugeCardEditor extends LitElement return this._config!.severity || undefined; } + get _icon(): string { + return this._config!.icon || ""; + } + protected render(): TemplateResult { if (!this.hass || !this._config) { return html``; @@ -105,16 +112,30 @@ export class HuiGaugeCardEditor extends LitElement .configValue=${"name"} @value-changed="${this._valueChanged}" > - +
+ + +
Date: Mon, 4 Jan 2021 03:22:47 +0100 Subject: [PATCH 2/4] Reduce padding --- src/panels/lovelace/cards/hui-gauge-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index b0bc5fd0b988..7476737a2eee 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -240,8 +240,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { .row { display: flex; - padding: 8px 16px 0; justify-content: space-around; + padding-top: 4px; } .name { From 00f618fc86d52db611f6c7ee7c1c7b51745df00c Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Mon, 4 Jan 2021 04:08:15 +0100 Subject: [PATCH 3/4] Align font color and size with entity card --- src/panels/lovelace/cards/hui-gauge-card.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 7476737a2eee..c8c2d4221a07 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -247,9 +247,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { .name { text-align: center; line-height: initial; - color: var(--primary-text-color); + color: var(--secondary-text-color); width: 100%; - font-size: 15px; + font-size: 16px; + font-weight: 500; margin-top: 8px; } From 9d2cba5297647f3188b73251370d27b949e1fd36 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Wed, 27 Jan 2021 13:17:49 +0100 Subject: [PATCH 4/4] Changes from review --- src/panels/lovelace/cards/hui-gauge-card.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index c8c2d4221a07..fb61254793d1 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -139,11 +139,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { })} >
-
- -
+
${this._config.name || computeStateName(stateObj)}
@@ -241,7 +237,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { .row { display: flex; justify-content: space-around; - padding-top: 4px; + margin-top: 4px; + align-items: center; } .name { @@ -251,12 +248,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { width: 100%; font-size: 16px; font-weight: 500; - margin-top: 8px; } - .icon { + ha-icon { color: var(--state-icon-color, #44739e); - margin-top: 4px; margin-right: 4px; } `;