Use ha-alert in lovelace alerts/warnings (#9880)

This commit is contained in:
Joakim Sørensen 2021-08-25 11:24:04 +02:00 committed by GitHub
parent 32777b4259
commit 20744e90a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 26 deletions

View File

@ -1,6 +1,7 @@
import { dump } from "js-yaml"; import { dump } from "js-yaml";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import "../../../components/ha-alert";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCard } from "../types"; import { LovelaceCard } from "../types";
import { ErrorCardConfig } from "./types"; import { ErrorCardConfig } from "./types";
@ -34,25 +35,17 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
} }
} }
return html` return html`<ha-alert alert-type="error" .title=${this._config.error}>
${this._config.error}${dumped ? html`<pre>${dumped}</pre>` : ""} ${dumped ? html`<pre>${dumped}</pre>` : ""}
`; </ha-alert>`;
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host {
display: block;
background-color: var(--error-color);
color: var(--color-on-error, white);
padding: 8px;
font-weight: 500;
user-select: text;
cursor: default;
}
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--code-font-family, monospace);
text-overflow: ellipsis; text-overflow: ellipsis;
user-select: text;
overflow: hidden; overflow: hidden;
} }
`; `;

View File

@ -1,6 +1,7 @@
import { STATE_NOT_RUNNING } from "home-assistant-js-websocket"; import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../components/ha-alert";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
export const createEntityNotFoundWarning = ( export const createEntityNotFoundWarning = (
@ -18,19 +19,7 @@ export const createEntityNotFoundWarning = (
@customElement("hui-warning") @customElement("hui-warning")
export class HuiWarning extends LitElement { export class HuiWarning extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` <slot></slot> `; return html`<ha-alert alert-type="warning"><slot></slot></ha-alert> `;
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
color: black;
background-color: #fce588;
padding: 8px;
word-break: break-word;
}
`;
} }
} }