jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 00:36:34 +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, mdiClose,
mdiInformationOutline, mdiInformationOutline,
} from "@mdi/js"; } from "@mdi/js";
import { css, html, LitElement } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../common/dom/fire_event"; 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 dismissable = false;
@property({ type: Boolean }) public narrow = false;
public render() { public render() {
return html` return html`
<div <div
@ -50,9 +52,11 @@ class HaAlert extends LitElement {
<ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon> <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
</slot> </slot>
</div> </div>
<div class="content"> <div class=${classMap({ content: true, narrow: this.narrow })}>
<div class="main-content"> <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> <slot></slot>
</div> </div>
<div class="action"> <div class="action">
@ -63,7 +67,7 @@ class HaAlert extends LitElement {
label="Dismiss alert" label="Dismiss alert"
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button>` ></ha-icon-button>`
: ""} : nothing}
</slot> </slot>
</div> </div>
</div> </div>
@ -105,6 +109,10 @@ class HaAlert extends LitElement {
width: 100%; width: 100%;
text-align: var(--float-start); text-align: var(--float-start);
} }
.content.narrow {
flex-direction: column;
align-items: flex-end;
}
.action { .action {
z-index: 1; z-index: 1;
width: min-content; 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, narrow: !this.isWide,
})} })}
> >
${this._mode === "live" <ha-alert
? html` <ha-alert alert-type="info"
alert-type="info" .narrow=${this.narrow}
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.panel.config.scene.editor.live_preview" `ui.panel.config.scene.editor.${this._mode === "live" ? "live_preview" : "review_mode"}`
)} )}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.scene.editor.live_preview_detail" `ui.panel.config.scene.editor.${this._mode === "live" ? "live_preview_detail" : "review_mode_detail"}`
)} )}
<ha-button slot="action" @click=${this._exitLiveMode} <ha-button slot="action" @click=${this._toggleLiveMode}>
>${this.hass.localize( ${this.hass.localize(
"ui.panel.config.scene.editor.back_to_review_mode" `ui.panel.config.scene.editor.${this._mode === "live" ? "back_to_review_mode" : "live_preview"}`
)}</ha-button )}
> </ha-button>
</ha-alert>` </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-card outlined> <ha-card outlined>
<div class="card-content"> <div class="card-content">
<ha-textfield <ha-textfield
@ -760,6 +745,14 @@ export class HaSceneEditor extends SubscribeMixin(
this._mode = "yaml"; this._mode = "yaml";
} }
private async _toggleLiveMode() {
if (this._mode === "live") {
this._exitLiveMode();
} else {
await this._enterLiveMode();
}
}
private async _enterLiveMode() { private async _enterLiveMode() {
if (this._dirty) { if (this._dirty) {
const result = await showConfirmationDialog(this, { const result = await showConfirmationDialog(this, {