Use ha alert inside card editor

src/panels/lovelace/editor/card-editor/hui-card-editor.ts

@@ -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>

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

@@ -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;

src/panels/lovelace/editor/hui-element-editor.ts

@@ -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>
+                  ? html`
-                      ${this._warnings!.map(
+                      <ul>
-                        (warning) => html`<li>${warning}</li>`
+                        ${this._warnings!.map(
-                      )}
+                          (warning) => html`<li>${warning}</li>`
-                    </ul>`
+                        )}
-                  : ""}
+                      </ul>
+                    `
+                  : nothing}
                 ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
               </ha-alert>
             `
-          : ""}
+          : nothing}
       </div>
     `;
   }