jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-15 21:36:36 +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";
import { ifDefined } from "lit-html/directives/if-defined";
import { styleMap } from "lit-html/directives/style-map";
import { computeActiveState } from "../../common/entity/compute_active_state";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { stateIcon } from "../../common/entity/state_icon";
import { iconColorCSS } from "../../common/style/icon_color_css";
import type { HomeAssistant } from "../../types";
import "../ha-icon";
export class StateBadge extends LitElement {
@ -37,7 +40,13 @@ export class StateBadge extends LitElement {
protected render(): TemplateResult {
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``;
}
@ -140,6 +149,9 @@ export class StateBadge extends LitElement {
ha-icon {
transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.missing {
color: #fce588;
}
${iconColorCSS}
`;

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

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