diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index f4fc025b7a..645b94452c 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -190,6 +190,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { overflow: hidden; } + #states > div { + position: relative; + } + .icon { padding: 0px 18px 0px 8px; } diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 8ee03fbd10..0f3eb52e7f 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -29,6 +29,7 @@ import { toggleEntity } from "../common/entity/toggle-entity"; import { LightCardConfig } from "./types"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { SUPPORT_BRIGHTNESS } from "../../../data/light"; +import { UNAVAILABLE } from "../../../data/entity"; @customElement("hui-light-card") export class HuiLightCard extends LitElement implements LovelaceCard { @@ -84,10 +85,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard { return html` - ${stateObj.state === "unavailable" + ${stateObj.state === UNAVAILABLE ? html` ` : ""} @@ -233,6 +235,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard { display: block; } + hui-unavailable { + cursor: pointer; + } + ha-card { position: relative; overflow: hidden; diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index fa099fefdc..6b51051906 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -34,6 +34,7 @@ import { } from "../../../data/climate"; import { HassEntity } from "home-assistant-js-websocket"; import { actionHandler } from "../common/directives/action-handler-directive"; +import { UNAVAILABLE } from "../../../data/entity"; const modeIcons: { [mode in HvacMode]: string } = { auto: "hass:calendar-repeat", @@ -208,10 +209,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { [mode]: true, })} > - ${stateObj.state === "unavailable" + ${stateObj.state === UNAVAILABLE ? html` ` : ""} @@ -396,6 +398,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { display: block; } + hui-unavailable { + cursor: pointer; + } + ha-card { position: relative; overflow: hidden; diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts index e7f5a945bb..4307be3130 100644 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -32,6 +32,8 @@ import { actionHandler } from "../common/directives/action-handler-directive"; import { hasAction } from "../common/has-action"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { handleAction } from "../common/handle-action"; +import { UNAVAILABLE } from "../../../data/entity"; +import { fireEvent } from "../../../common/dom/fire_event"; @customElement("hui-input-select-entity-row") class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { @@ -78,6 +80,14 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity))); return html` + ${stateObj.state === UNAVAILABLE + ? html` + + ` + : ""} - ${stateObj.attributes.options.map( - (option) => html` - ${option} - ` - )} + ${stateObj.attributes.options + ? stateObj.attributes.options.map( + (option) => html` + ${option} + ` + ) + : ""} `; @@ -126,15 +138,21 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { } // Update selected after rendering the items or else it won't work in Firefox - this.shadowRoot!.querySelector( - "paper-listbox" - )!.selected = stateObj.attributes.options.indexOf(stateObj.state); + if (stateObj.attributes.options) { + this.shadowRoot!.querySelector( + "paper-listbox" + )!.selected = stateObj.attributes.options.indexOf(stateObj.state); + } } private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); } + private _showMoreInfo() { + fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); + } + static get styles(): CSSResult { return css` :host { @@ -157,6 +175,9 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { background: var(--divider-color); border-radius: 100%; } + hui-unavailable { + cursor: pointer; + } `; }