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

Use ha alert inside card editor

Browse Source
This commit is contained in:
Paul Bottein 2024-09-09 15:48:23 +02:00
parent bbf8a8e3e7
commit 6d8b7f6995
No known key found for this signature in database
3 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/panels/lovelace/editor/card-editor/hui-card-editor.ts
View File

@ -1,16 +1,18 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../common/dom/fire_event";
import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import { LovelaceConfig } from "../../../../data/lovelace/config/types";
import { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
import { HomeAssistant } from "../../../../types";
import "./hui-card-element-editor";
import type { HuiCardElementEditor } from "./hui-card-element-editor";
import "./hui-card-layout-editor";
import "./hui-card-visibility-editor";
import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { HuiCardElementEditor } from "./hui-card-element-editor";
import { fireEvent } from "../../../../common/dom/fire_event";
import { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
const TABS = ["config", "visibility", "layout"] as const;
@ -64,6 +66,7 @@ class HuiCardEditor extends LitElement {
<hui-card-layout-editor
.hass=${this.hass}
.config=${this.config}
.sectionConfig=${this.containerConfig as LovelaceSectionConfig}
@value-changed=${this._configChanged}
>
</hui-card-layout-editor>

12
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -44,7 +44,6 @@ import { addCard, replaceCard } from "../config-util";
import { getCardDocumentationURL } from "../get-dashboard-documentation-url";
import type { ConfigChangedEvent } from "../hui-element-editor";
import { findLovelaceContainer } from "../lovelace-path";
import type { GUIModeChangedEvent } from "../types";
import "./hui-card-editor";
import type { HuiCardElementEditor } from "./hui-card-element-editor";
import type { EditCardDialogParams } from "./show-edit-card-dialog";
@ -297,7 +296,6 @@ export class HuiDialogEditCard
.lovelace=${this._params.lovelaceConfig}
.config=${this._cardConfig}
@config-changed=${this._handleConfigChanged}
@GUImode-changed=${this._handleGUIModeChanged}
@editor-save=${this._save}
dialogInitialFocus
>
@ -389,11 +387,6 @@ export class HuiDialogEditCard
this._dirty = true;
}
private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
ev.stopPropagation();
this._yamlMode = ev.detail.guiMode;
}
private _opened() {
window.addEventListener("dialog-closed", this._enableEscapeKeyClose);
window.addEventListener("hass-more-info", this._disableEscapeKeyClose);
@ -600,11 +593,6 @@ export class HuiDialogEditCard
width: 100%;
box-sizing: border-box;
}
.gui-mode-button {
margin-right: auto;
margin-inline-end: auto;
margin-inline-start: initial;
}
.header {
display: flex;
align-items: center;

39
src/panels/lovelace/editor/hui-element-editor.ts
View File

@ -7,6 +7,7 @@ import {
TemplateResult,
css,
html,
nothing,
} from "lit";
import { property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
@ -208,8 +209,17 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
}
protected render(): TemplateResult {
const guiModeAvailable = !(
this.hasWarning ||
this.hasError ||
this._guiSupported === false
);
return html`
<div class="wrapper">
<ha-button @click=${this.toggleMode} .disabled=${!guiModeAvailable}>
${guiModeAvailable && this._guiMode ? "Show yaml" : "Show UI"}
</ha-button>
${this.GUImode
? html`
<div class="gui-editor">
@ -241,24 +251,23 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
`}
${this._guiSupported === false && this.configElementType
? html`
<div class="info">
<ha-alert alert-type="info">
${this.hass.localize("ui.errors.config.editor_not_available", {
type: this.configElementType,
})}
</div>
</ha-alert>
`
: ""}
: nothing}
${this.hasError
? html`
<div class="error">
<ha-alert alert-type="error">
${this.hass.localize("ui.errors.config.error_detected")}:
<br />
<ul>
${this._errors!.map((error) => html`<li>${error}</li>`)}
</ul>
</div>
</ha-alert>
`
: ""}
: nothing}
${this.hasWarning
? html`
<ha-alert
@ -268,16 +277,18 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
)}:"
>
${this._warnings!.length > 0 && this._warnings![0] !== undefined
? html` <ul>
${this._warnings!.map(
(warning) => html`<li>${warning}</li>`
)}
</ul>`
: ""}
? html`
<ul>
${this._warnings!.map(
(warning) => html`<li>${warning}</li>`
)}
</ul>
`
: nothing}
${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
</ha-alert>
`
: ""}
: nothing}
</div>
`;
}