Ha-alert-narrow-action (#22956)

* Add ha-alert narrow option * Use ha-alert narrow in ha-scene-editor
home-assistant · Nov 22, 2024 · 528fcec · 528fcec
1 parent f8fb5d7
commit 528fcec
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 35 deletions.
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
@@ -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;

diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
@@ -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, {