Card Editor: Add Toggle to Dialog (#5245)

* Add Toggle to dialog

* Fix for Stack Cards

* reviews

* Reviews

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

@@ -23,6 +23,7 @@ import { HaCodeEditor } from "../../../../components/ha-code-editor";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { EntityConfig } from "../../entity-rows/types";
 import { getCardElementClass } from "../../create-element/create-card-element";
+import { GUIModeChangedEvent } from "../types";
 
 declare global {
   interface HASSDomEvents {
@@ -33,6 +34,7 @@ declare global {
       config: LovelaceCardConfig;
       error?: string;
     };
+    "GUImode-changed": GUIModeChangedEvent;
   }
 }
 
@@ -85,16 +87,29 @@ export class HuiCardEditor extends LitElement {
     }
   }
 
+  public get hasWarning(): boolean {
+    return this._warning !== undefined;
+  }
+
   public get hasError(): boolean {
     return this._error !== undefined;
   }
 
+  public get GUImode(): boolean {
+    return this._GUImode;
+  }
+
+  public set GUImode(guiMode: boolean) {
+    this._GUImode = guiMode;
+    fireEvent(this as HTMLElement, "GUImode-changed", { guiMode });
+  }
+
   private get _yamlEditor(): HaCodeEditor {
     return this.shadowRoot!.querySelector("ha-code-editor")! as HaCodeEditor;
   }
 
   public toggleMode() {
-    this._GUImode = !this._GUImode;
+    this.GUImode = !this.GUImode;
   }
 
   public connectedCallback() {
@@ -105,7 +120,7 @@ export class HuiCardEditor extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="wrapper">
-        ${this._GUImode
+        ${this.GUImode
           ? html`
               <div class="gui-editor">
                 ${this._loading
@@ -145,18 +160,6 @@ export class HuiCardEditor extends LitElement {
               </div>
             `
           : ""}
-        <div class="buttons">
-          <mwc-button
-            @click=${this.toggleMode}
-            ?disabled=${this._warning || this._error}
-          >
-            ${this.hass!.localize(
-              this._GUImode
-                ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
-                : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
-            )}
-          </mwc-button>
-        </div>
       </div>
     `;
   }
@@ -165,7 +168,7 @@ export class HuiCardEditor extends LitElement {
     super.updated(changedProperties);
 
     if (changedProperties.has("_GUImode")) {
-      if (this._GUImode === false) {
+      if (this.GUImode === false) {
         // Refresh code editor when switching to yaml mode
         this._refreshYamlEditor(true);
       }
@@ -245,6 +248,7 @@ export class HuiCardEditor extends LitElement {
         this._handleUIConfigChanged(ev as UIConfigChangedEvent)
       );
 
+      this.GUImode = true;
       return;
     } catch (err) {
       if (err.message.startsWith("WARNING:")) {
@@ -252,7 +256,7 @@ export class HuiCardEditor extends LitElement {
       } else {
         this._error = err;
       }
-      this._GUImode = false;
+      this.GUImode = false;
     } finally {
       this._loading = false;
       fireEvent(this, "iron-resize");
@@ -277,10 +281,6 @@ export class HuiCardEditor extends LitElement {
       .warning {
         color: #ffa726;
       }
-      .buttons {
-        text-align: right;
-        padding: 8px 0px;
-      }
       paper-spinner {
         display: block;
         margin: auto;

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

@@ -6,6 +6,7 @@ import {
   CSSResultArray,
   customElement,
   property,
+  query,
 } from "lit-element";
 
 import deepFreeze from "deep-freeze";
@@ -27,6 +28,7 @@ import { addCard, replaceCard } from "../config-util";
 import "../../../../components/dialog/ha-paper-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
+import { GUIModeChangedEvent } from "../types";
 
 declare global {
   // for fire event
@@ -51,6 +53,9 @@ export class HuiDialogEditCard extends LitElement {
   @property() private _saving: boolean = false;
   @property() private _error?: string;
 
+  @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor;
+  @property() private _GUImode?: boolean;
+
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
     const [view, card] = params.path;
@@ -62,10 +67,6 @@ export class HuiDialogEditCard extends LitElement {
     }
   }
 
-  private get _cardEditorEl(): HuiCardEditor | null {
-    return this.shadowRoot!.querySelector("hui-card-editor");
-  }
-
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
@@ -99,9 +100,9 @@ export class HuiDialogEditCard extends LitElement {
           ${this._cardConfig === undefined
             ? html`
                 <hui-card-picker
-                  .lovelace="${this._params.lovelaceConfig}"
+                  .lovelace=${this._params.lovelaceConfig}
                   .hass=${this.hass}
-                  @config-changed="${this._handleCardPicked}"
+                  @config-changed=${this._handleCardPicked}
                 ></hui-card-picker>
               `
             : html`
@@ -109,15 +110,16 @@ export class HuiDialogEditCard extends LitElement {
                   <div class="element-editor">
                     <hui-card-editor
                       .hass=${this.hass}
-                      .lovelace="${this._params.lovelaceConfig}"
+                      .lovelace=${this._params.lovelaceConfig}
-                      .value="${this._cardConfig}"
+                      .value=${this._cardConfig}
-                      @config-changed="${this._handleConfigChanged}"
+                      @config-changed=${this._handleConfigChanged}
+                      @GUImode-changed=${this._handleGUIModeChanged}
                     ></hui-card-editor>
                   </div>
                   <div class="element-preview">
                     <hui-card-preview
                       .hass=${this.hass}
-                      .config="${this._cardConfig}"
+                      .config=${this._cardConfig}
                       class=${this._error ? "blur" : ""}
                     ></hui-card-preview>
                     ${this._error
@@ -133,14 +135,30 @@ export class HuiDialogEditCard extends LitElement {
               `}
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._close}">
+          ${this._cardConfig !== undefined
+            ? html`
+                <mwc-button
+                  @click=${this._toggleMode}
+                  ?disabled=${this._cardEditorEl?.hasWarning ||
+                    this._cardEditorEl?.hasError}
+                  class="gui-mode-button"
+                >
+                  ${this.hass!.localize(
+                    !this._cardEditorEl || this._GUImode
+                      ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                      : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                  )}
+                </mwc-button>
+              `
+            : ""}
+          <mwc-button @click=${this._close}>
             ${this.hass!.localize("ui.common.cancel")}
           </mwc-button>
           ${this._cardConfig !== undefined
             ? html`
                 <mwc-button
-                  ?disabled="${!this._canSave || this._saving}"
+                  ?disabled=${!this._canSave || this._saving}
-                  @click="${this._save}"
+                  @click=${this._save}
                 >
                   ${this._saving
                     ? html`
@@ -250,6 +268,9 @@ export class HuiDialogEditCard extends LitElement {
           display: block;
           width: 100%;
         }
+        .gui-mode-button {
+          margin-right: auto;
+        }
       `,
     ];
   }
@@ -278,6 +299,15 @@ export class HuiDialogEditCard extends LitElement {
     }
   }
 
+  private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
+    ev.stopPropagation();
+    this._GUImode = ev.detail.guiMode;
+  }
+
+  private _toggleMode(): void {
+    this._cardEditorEl?.toggleMode();
+  }
+
   private _close(): void {
     this._params = undefined;
     this._cardConfig = undefined;

src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts

@@ -6,6 +6,7 @@ import {
   property,
   CSSResult,
   css,
+  query,
 } from "lit-element";
 import "@polymer/paper-tabs";
 
@@ -13,8 +14,10 @@ import { struct } from "../../common/structs/struct";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { StackCardConfig } from "../../cards/types";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { LovelaceConfig } from "../../../../data/lovelace";
+import { HuiCardEditor } from "../card-editor/hui-card-editor";
+import { GUIModeChangedEvent } from "../types";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -29,6 +32,8 @@ export class HuiStackCardEditor extends LitElement
   @property() public lovelace?: LovelaceConfig;
   @property() private _config?: StackCardConfig;
   @property() private _selectedCard: number = 0;
+  @property() private _GUImode?: boolean;
+  @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor;
 
   public setConfig(config: StackCardConfig): void {
     this._config = cardConfigStruct(config);
@@ -73,6 +78,18 @@ export class HuiStackCardEditor extends LitElement
             selected < numcards
               ? html`
                   <div id="card-options">
+                    <mwc-button
+                      @click=${this._toggleMode}
+                      ?disabled=${this._cardEditorEl?.hasWarning ||
+                        this._cardEditorEl?.hasError}
+                      class="gui-mode-button"
+                    >
+                      ${this.hass!.localize(
+                        !this._cardEditorEl || this._GUImode
+                          ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                          : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                      )}
+                    </mwc-button>
                     <paper-icon-button
                       id="move-before"
                       title="Move card before"
@@ -97,9 +114,10 @@ export class HuiStackCardEditor extends LitElement
 
                   <hui-card-editor
                     .hass=${this.hass}
-                    .value="${this._config.cards[selected]}"
+                    .value=${this._config.cards[selected]}
                     .lovelace=${this.lovelace}
-                    @config-changed="${this._handleConfigChanged}"
+                    @config-changed=${this._handleConfigChanged}
+                    @GUImode-changed=${this._handleGUIModeChanged}
                   ></hui-card-editor>
                 `
               : html`
@@ -162,6 +180,15 @@ export class HuiStackCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
+  private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
+    ev.stopPropagation();
+    this._GUImode = ev.detail.guiMode;
+  }
+
+  private _toggleMode(): void {
+    this._cardEditorEl?.toggleMode();
+  }
+
   static get styles(): CSSResult {
     return css`
       .toolbar {
@@ -194,6 +221,10 @@ export class HuiStackCardEditor extends LitElement
           margin: 0 -12px;
         }
       }
+
+      .gui-mode-button {
+        margin-right: auto;
+      }
     `;
   }
 }

src/panels/lovelace/editor/types.ts

@@ -14,6 +14,10 @@ export interface YamlChangedEvent extends Event {
   };
 }
 
+export interface GUIModeChangedEvent {
+  guiMode: boolean;
+}
+
 export interface ViewEditEvent extends Event {
   detail: {
     config: LovelaceViewConfig;