From 324f0bb8a29e62b96203d1c93b376068a7a01c88 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sun, 24 Mar 2019 01:10:55 -0500 Subject: [PATCH] warning-element (#3006) * warning-element * add warning-element to picture-glance * add glance-card --- src/panels/lovelace/cards/hui-glance-card.ts | 10 +++--- .../lovelace/cards/hui-picture-glance-card.ts | 12 ++++++- .../components/hui-warning-element.ts | 36 +++++++++++++++++++ .../elements/hui-state-badge-element.ts | 10 +++--- .../elements/hui-state-icon-element.ts | 10 +++--- .../elements/hui-state-label-element.ts | 10 +++--- 6 files changed, 67 insertions(+), 21 deletions(-) create mode 100644 src/panels/lovelace/components/hui-warning-element.ts diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 35a643ba01..8ec574c234 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -25,7 +25,7 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element"; import "../../../components/entity/state-badge"; import "../../../components/ha-card"; import "../../../components/ha-icon"; -import "../components/hui-warning"; +import "../components/hui-warning-element"; export interface ConfigEntity extends EntityConfig { tap_action?: ActionConfig; @@ -184,13 +184,13 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { if (!stateObj) { return html` - ${this.hass!.localize( + + )} + > `; } diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 17c13ed494..5306a9c4a7 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -24,6 +24,8 @@ import stateIcon from "../../../common/entity/state_icon"; import "../../../components/ha-card"; import "../../../components/ha-icon"; import "../components/hui-image"; +import "../components/hui-warning-element"; + import { handleClick } from "../common/handle-click"; import { fireEvent } from "../../../common/dom/fire_event"; import { toggleEntity } from "../common/entity/toggle-entity"; @@ -138,7 +140,15 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { const stateObj = this.hass!.states[entityConf.entity]; if (!stateObj) { - return html``; + return html` + + `; } return html` diff --git a/src/panels/lovelace/components/hui-warning-element.ts b/src/panels/lovelace/components/hui-warning-element.ts new file mode 100644 index 0000000000..b6495ec0fc --- /dev/null +++ b/src/panels/lovelace/components/hui-warning-element.ts @@ -0,0 +1,36 @@ +import { + html, + LitElement, + TemplateResult, + CSSResult, + css, + customElement, + property, +} from "lit-element"; + +import "../../../components/ha-icon"; + +@customElement("hui-warning-element") +export class HuiWarningElement extends LitElement { + @property() public label?: string; + + protected render(): TemplateResult | void { + return html` + + `; + } + + static get styles(): CSSResult { + return css` + ha-icon { + color: #fce588; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-warning-element": HuiWarningElement; + } +} diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts index 6d452a1928..3a73c9e0c6 100644 --- a/src/panels/lovelace/elements/hui-state-badge-element.ts +++ b/src/panels/lovelace/elements/hui-state-badge-element.ts @@ -7,7 +7,7 @@ import { } from "lit-element"; import "../../../components/entity/ha-state-label-badge"; -import "../components/hui-warning"; +import "../components/hui-warning-element"; import computeStateName from "../../../common/entity/compute_state_name"; import { LovelaceElement, LovelaceElementConfig } from "./types"; @@ -40,13 +40,13 @@ export class HuiStateBadgeElement extends LitElement if (!stateObj) { return html` - ${this.hass.localize( + + )}" + > `; } diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index df9ddac572..bd7fd773ff 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -9,7 +9,7 @@ import { } from "lit-element"; import "../../../components/entity/state-badge"; -import "../components/hui-warning"; +import "../components/hui-warning-element"; import { computeTooltip } from "../common/compute-tooltip"; import { handleClick } from "../common/handle-click"; @@ -46,13 +46,13 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { if (!stateObj) { return html` - ${this.hass.localize( + + )} + > `; } diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index 5decd2d415..3cbf939a75 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -9,7 +9,7 @@ import { } from "lit-element"; import "../../../components/entity/ha-state-label-badge"; -import "../components/hui-warning"; +import "../components/hui-warning-element"; import computeStateDisplay from "../../../common/entity/compute_state_display"; import { computeTooltip } from "../common/compute-tooltip"; @@ -49,13 +49,13 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { if (!stateObj) { return html` - ${this.hass.localize( + + )} + > `; }