Use icon button to switch between code and editor (#17294)

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

@@ -1,7 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
-import { mdiContentCopy } from "@mdi/js";
+import { mdiCodeBraces, mdiContentCopy, mdiListBoxOutline } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
@@ -92,6 +92,8 @@ export class HuiConditionalCardEditor
       return nothing;
     }
 
+    const isGuiMode = !this._cardEditorEl || this._GUImode;
+
     return html`
       <mwc-tab-bar
         .activeIndex=${this._cardTab ? 1 : 0}
@@ -114,17 +116,17 @@ export class HuiConditionalCardEditor
               ${this._config.card.type !== undefined
                 ? html`
                     <div class="card-options">
-                      <mwc-button
+                      <ha-icon-button
+                        class="gui-mode-button"
                         @click=${this._toggleMode}
                         .disabled=${!this._guiModeAvailable}
-                        class="gui-mode-button"
+                        .label=${this.hass!.localize(
-                      >
+                          isGuiMode
-                        ${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>
+                        .path=${isGuiMode ? mdiCodeBraces : mdiListBoxOutline}
+                      ></ha-icon-button>
 
                       <ha-icon-button
                         .label=${this.hass!.localize(

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

@@ -1,15 +1,17 @@
 import {
   mdiArrowLeft,
   mdiArrowRight,
-  mdiDelete,
+  mdiCodeBraces,
-  mdiContentCut,
   mdiContentCopy,
+  mdiContentCut,
+  mdiDelete,
+  mdiListBoxOutline,
   mdiPlus,
 } from "@mdi/js";
 import "@polymer/paper-tabs";
 import "@polymer/paper-tabs/paper-tab";
 import deepClone from "deep-clone-simple";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import {
   any,
@@ -21,7 +23,7 @@ import {
   string,
 } from "superstruct";
 import { storage } from "../../../../common/decorators/storage";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
 import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -87,6 +89,8 @@ export class HuiStackCardEditor
     const selected = this._selectedCard!;
     const numcards = this._config.cards.length;
 
+    const isGuiMode = !this._cardEditorEl || this._GUImode;
+
     return html`
       <div class="card-config">
         <div class="toolbar">
@@ -114,17 +118,17 @@ export class HuiStackCardEditor
           ${selected < numcards
             ? html`
                 <div id="card-options">
-                  <mwc-button
+                  <ha-icon-button
+                    class="gui-mode-button"
                     @click=${this._toggleMode}
                     .disabled=${!this._guiModeAvailable}
-                    class="gui-mode-button"
+                    .label=${this.hass!.localize(
-                  >
+                      isGuiMode
-                    ${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>
+                    .path=${isGuiMode ? mdiCodeBraces : mdiListBoxOutline}
+                  ></ha-icon-button>
 
                   <ha-icon-button
                     .disabled=${selected === 0}

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { mdiArrowLeft } from "@mdi/js";
+import { mdiArrowLeft, mdiCodeBraces, mdiListBoxOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
@@ -50,17 +50,17 @@ export class HuiSubElementEditor extends LitElement {
             )}</span
           >
         </div>
-        <mwc-button
+        <ha-icon-button
-          slot="secondaryAction"
+          class="gui-mode-button"
-          .disabled=${!this._guiModeAvailable}
           @click=${this._toggleMode}
-        >
+          .disabled=${!this._guiModeAvailable}
-          ${this.hass.localize(
+          .label=${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>
+          .path=${this._guiMode ? mdiCodeBraces : mdiListBoxOutline}
+        ></ha-icon-button>
       </div>
       ${this.config.type === "row"
         ? html`