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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators";
import "../../../components/ha-alert";
import { HomeAssistant } from "../../../types";
import { LovelaceCard } from "../types";
import { ErrorCardConfig } from "./types";
@ -34,25 +35,17 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
}
}
return html`
${this._config.error}${dumped ? html`<pre>${dumped}</pre>` : ""}
`;
return html`<ha-alert alert-type="error" .title=${this._config.error}>
${dumped ? html`<pre>${dumped}</pre>` : ""}
</ha-alert>`;
}
static get styles(): CSSResultGroup {
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 {
font-family: var(--code-font-family, monospace);
text-overflow: ellipsis;
user-select: text;
overflow: hidden;
}
`;

View File

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