jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-16 05:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix icon for unavailable buttons (#7416)

Browse Source
This commit is contained in:
Ian Richardson 2020-10-21 06:12:28 -05:00 committed by GitHub
parent 54ec37994c
commit 7e2dc04123
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/entity/state-badge.ts
View File

@ -11,11 +11,14 @@ import {
} from "lit-element"; } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
import { computeActiveState } from "../../common/entity/compute_active_state"; import { computeActiveState } from "../../common/entity/compute_active_state";
import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { stateIcon } from "../../common/entity/state_icon"; import { stateIcon } from "../../common/entity/state_icon";
import { iconColorCSS } from "../../common/style/icon_color_css"; import { iconColorCSS } from "../../common/style/icon_color_css";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import "../ha-icon"; import "../ha-icon";
export class StateBadge extends LitElement { export class StateBadge extends LitElement {
@ -37,7 +40,13 @@ export class StateBadge extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
const stateObj = this.stateObj; const stateObj = this.stateObj;
if (!stateObj || !this._showIcon) { if (!stateObj) {
return html`<div class="missing">
<ha-icon icon="hass:alert"></ha-icon>
</div>`;
}
if (!this._showIcon) {
return html``; return html``;
} }
@ -140,6 +149,9 @@ export class StateBadge extends LitElement {
ha-icon { ha-icon {
transition: color 0.3s ease-in-out, filter 0.3s ease-in-out; transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
} }
.missing {
color: #fce588;
}
${iconColorCSS} ${iconColorCSS}
`; `;

24
src/panels/lovelace/components/hui-buttons-base.ts
View File

@ -8,18 +8,20 @@ import {
queryAll, queryAll,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/entity/state-badge";
import type { StateBadge } from "../../../components/entity/state-badge";
import "../../../components/ha-icon";
import type { ActionHandlerEvent } from "../../../data/lovelace";
import type { HomeAssistant } from "../../../types";
import type { EntitiesCardEntityConfig } from "../cards/types";
import { computeTooltip } from "../common/compute-tooltip"; import { computeTooltip } from "../common/compute-tooltip";
import { actionHandler } from "../common/directives/action-handler-directive"; import { actionHandler } from "../common/directives/action-handler-directive";
import { handleAction } from "../common/handle-action"; import { handleAction } from "../common/handle-action";
import { hasAction } from "../common/has-action"; import { hasAction } from "../common/has-action";
import type { StateBadge } from "../../../components/entity/state-badge";
import type { ActionHandlerEvent } from "../../../data/lovelace";
import type { HomeAssistant } from "../../../types";
import type { EntitiesCardEntityConfig } from "../cards/types";
import "../../../components/entity/state-badge";
@customElement("hui-buttons-base") @customElement("hui-buttons-base")
export class HuiButtonsBase extends LitElement { export class HuiButtonsBase extends LitElement {
@property() public configEntities?: EntitiesCardEntityConfig[]; @property() public configEntities?: EntitiesCardEntityConfig[];
@ -43,11 +45,6 @@ export class HuiButtonsBase extends LitElement {
return html` return html`
${(this.configEntities || []).map((entityConf) => { ${(this.configEntities || []).map((entityConf) => {
const stateObj = this._hass!.states[entityConf.entity]; const stateObj = this._hass!.states[entityConf.entity];
if (!stateObj) {
return html`<div class="missing">
<ha-icon icon="hass:alert"></ha-icon>
</div>`;
}
return html` return html`
<div <div
@ -72,7 +69,7 @@ export class HuiButtonsBase extends LitElement {
` `
: ""} : ""}
<span> <span>
${entityConf.show_name || ${(entityConf.show_name && stateObj) ||
(entityConf.name && entityConf.show_name !== false) (entityConf.name && entityConf.show_name !== false)
? entityConf.name || computeStateName(stateObj) ? entityConf.name || computeStateName(stateObj)
: ""} : ""}
@ -94,9 +91,6 @@ export class HuiButtonsBase extends LitElement {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
.missing {
color: #fce588;
}
div { div {
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;