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

Ha-alert-narrow-action (#22956)

Browse Source 
* Add ha-alert narrow option

* Use ha-alert narrow in ha-scene-editor
This commit is contained in:
Wendelin 2024-11-22 17:37:05 +01:00 committed by GitHub
parent f8fb5d7bf2
commit 528fcecd16
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ha-alert.ts
View File

@ -5,7 +5,7 @@ import {
mdiClose,
mdiInformationOutline,
} from "@mdi/js";
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../common/dom/fire_event";
@ -37,6 +37,8 @@ class HaAlert extends LitElement {
@property({ type: Boolean }) public dismissable = false;
@property({ type: Boolean }) public narrow = false;
public render() {
return html`
<div
@ -50,9 +52,11 @@ class HaAlert extends LitElement {
<ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
</slot>
</div>
<div class="content">
<div class=${classMap({ content: true, narrow: this.narrow })}>
<div class="main-content">
${this.title ? html`<div class="title">${this.title}</div>` : ""}
${this.title
? html`<div class="title">${this.title}</div>`
: nothing}
<slot></slot>
</div>
<div class="action">
@ -63,7 +67,7 @@ class HaAlert extends LitElement {
label="Dismiss alert"
.path=${mdiClose}
></ha-icon-button>`
: ""}
: nothing}
</slot>
</div>
</div>
@ -105,6 +109,10 @@ class HaAlert extends LitElement {
width: 100%;
text-align: var(--float-start);
}
.content.narrow {
flex-direction: column;
align-items: flex-end;
}
.action {
z-index: 1;
width: min-content;

55
src/panels/config/scene/ha-scene-editor.ts
View File

@ -383,37 +383,22 @@ export class HaSceneEditor extends SubscribeMixin(
narrow: !this.isWide,
})}
>
${this._mode === "live"
? html` <ha-alert
alert-type="info"
.title=${this.hass.localize(
"ui.panel.config.scene.editor.live_preview"
)}
>
${this.hass.localize(
"ui.panel.config.scene.editor.live_preview_detail"
)}
<ha-button slot="action" @click=${this._exitLiveMode}
>${this.hass.localize(
"ui.panel.config.scene.editor.back_to_review_mode"
)}</ha-button
>
</ha-alert>`
: html` <ha-alert
alert-type="info"
.title=${this.hass.localize(
"ui.panel.config.scene.editor.review_mode"
)}
>
${this.hass.localize(
"ui.panel.config.scene.editor.review_mode_detail"
)}
<ha-button slot="action" @click=${this._enterLiveMode}
>${this.hass.localize(
"ui.panel.config.scene.editor.live_preview"
)}</ha-button
>
</ha-alert>`}
<ha-alert
alert-type="info"
.narrow=${this.narrow}
.title=${this.hass.localize(
`ui.panel.config.scene.editor.${this._mode === "live" ? "live_preview" : "review_mode"}`
)}
>
${this.hass.localize(
`ui.panel.config.scene.editor.${this._mode === "live" ? "live_preview_detail" : "review_mode_detail"}`
)}
<ha-button slot="action" @click=${this._toggleLiveMode}>
${this.hass.localize(
`ui.panel.config.scene.editor.${this._mode === "live" ? "back_to_review_mode" : "live_preview"}`
)}
</ha-button>
</ha-alert>
<ha-card outlined>
<div class="card-content">
<ha-textfield
@ -760,6 +745,14 @@ export class HaSceneEditor extends SubscribeMixin(
this._mode = "yaml";
}
private async _toggleLiveMode() {
if (this._mode === "live") {
this._exitLiveMode();
} else {
await this._enterLiveMode();
}
}
private async _enterLiveMode() {
if (this._dirty) {
const result = await showConfirmationDialog(this, {