Add form/code editor switch

src/components/ha-outlined-segmented-button-set.ts

@@ -0,0 +1,22 @@
+import { MdOutlinedSegmentedButtonSet } from "@material/web/labs/segmentedbuttonset/outlined-segmented-button-set";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-outlined-segmented-button-set")
+export class HaOutlinedSegmentedButtonSet extends MdOutlinedSegmentedButtonSet {
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-outlined-segmented-button-container-height: 32px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-outlined-segmented-button-set": HaOutlinedSegmentedButtonSet;
+  }
+}

src/components/ha-outlined-segmented-button.ts

@@ -0,0 +1,34 @@
+import { MdOutlinedSegmentedButton } from "@material/web/labs/segmentedbutton/outlined-segmented-button";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-outlined-segmented-button")
+export class HaOutlinedSegmentedButton extends MdOutlinedSegmentedButton {
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-outlined-segmented-button-selected-container-color: var(
+          --light-primary-color
+        );
+        --md-outlined-segmented-button-container-height: 32px;
+        --md-outlined-segmented-button-disabled-label-text-color: var(
+          --disabled-text-color
+        );
+        --md-outlined-segmented-button-disabled-icon-color: var(
+          --disabled-text-color
+        );
+        --md-outlined-segmented-button-disabled-outline-color: var(
+          --disabled-text-color
+        );
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-outlined-segmented-button": HaOutlinedSegmentedButton;
+  }
+}

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

@@ -42,14 +42,20 @@ class HuiCardEditor extends LitElement {
       })
   );
 
+  private _elementConfig = memoizeOne((config: LovelaceCardConfig) => {
+    const { visibility, layout_options, ...elementConfig } = config;
+    return elementConfig;
+  });
+
   private renderContent() {
     if (this._selectedTab === "config") {
       return html`
         <hui-card-element-editor
           .hass=${this.hass}
           .lovelace=${this.lovelace}
-          .value=${this.config}
+          .value=${this._elementConfig(this.config)}
           show-toggle-mode-button
+          @config-changed=${this._elementConfigChanged}
         ></hui-card-element-editor>
       `;
     }
@@ -81,6 +87,17 @@ class HuiCardEditor extends LitElement {
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
+  private _elementConfigChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const config = ev.detail.config;
+    const newConfig = {
+      ...config,
+      visibility: this.config.visibility,
+      layout_options: this.config.layout_options,
+    };
+    fireEvent(this, "config-changed", { config: newConfig });
+  }
+
   protected render() {
     const cardType = this.config.type;
     const containerType = this.containerConfig.type;

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

@@ -1,4 +1,4 @@
-import "@material/mwc-button";
+import { mdiCodeBraces, mdiListBox } from "@mdi/js";
 import { dump, load } from "js-yaml";
 import {
   CSSResultGroup,
@@ -17,14 +17,17 @@ import "../../../components/ha-alert";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-code-editor";
 import type { HaCodeEditor } from "../../../components/ha-code-editor";
+import "../../../components/ha-outlined-segmented-button";
+import "../../../components/ha-outlined-segmented-button-set";
+import { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import { LovelaceConfig } from "../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../types";
 import { LovelaceCardFeatureConfig } from "../card-features/types";
+import { LovelaceElementConfig } from "../elements/types";
 import type { LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { LovelaceElementConfig } from "../elements/types";
 import type {
   LovelaceConfigForm,
   LovelaceGenericElementEditor,
@@ -34,7 +37,6 @@ import type { HuiFormEditor } from "./config-elements/hui-form-editor";
 import "./config-elements/hui-generic-entity-row-editor";
 import { GUISupportError } from "./gui-support-error";
 import { EditSubElementEvent, GUIModeChangedEvent } from "./types";
-import { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 
 export interface ConfigChangedEvent {
   config:
@@ -222,12 +224,28 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
       <div class="wrapper">
         ${this.showToggleModeButton
           ? html`
-              <ha-button
+              <div class="header">
-                @click=${this.toggleMode}
+                <ha-outlined-segmented-button-set
-                .disabled=${!guiModeAvailable}
+                  @segmented-button-set-selection=${this._handleModeSelected}
                 >
-                ${guiModeAvailable && this._guiMode ? "Show yaml" : "Show UI"}
+                  <ha-outlined-segmented-button
-              </ha-button>
+                    .selected=${this._guiMode}
+                    .disabled=${!guiModeAvailable}
+                    no-checkmark
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiListBox}></ha-svg-icon>
+                  </ha-outlined-segmented-button>
+                  <ha-outlined-segmented-button
+                    .selected=${!this._guiMode}
+                    no-checkmark
+                  >
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiCodeBraces}
+                    ></ha-svg-icon>
+                  </ha-outlined-segmented-button>
+                </ha-outlined-segmented-button-set>
+              </div>
             `
           : nothing}
         ${this.GUImode
@@ -346,6 +364,10 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
     this.value = config as unknown as T;
   }
 
+  private _handleModeSelected(ev) {
+    this.GUImode = ev.detail.index === 0;
+  }
+
   private _handleYAMLChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const newYaml = ev.detail.value;
@@ -487,6 +509,10 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
         display: block;
         margin: auto;
       }
+      .header {
+        display: flex;
+        justify-content: flex-end;
+      }
     `;
   }
 }