Improve editor

src/panels/lovelace/common/icon-condition.ts

@@ -0,0 +1,7 @@
+import { mdiResponsive, mdiStateMachine } from "@mdi/js";
+import { Condition } from "./validate-condition";
+
+export const ICON_CONDITION: Record<Condition["condition"], string> = {
+  state: mdiStateMachine,
+  screen: mdiResponsive,
+};

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -1,14 +1,21 @@
-import { mdiCodeBraces, mdiDelete, mdiListBoxOutline } from "@mdi/js";
+import { preventDefault } from "@fullcalendar/core/internal";
+import { ActionDetail } from "@material/mwc-list";
+import { mdiCheck, mdiDelete, mdiDotsVertical } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import "../../../../components/ha-button-menu";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-list-item";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-yaml-editor";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { Condition, LegacyCondition } from "../../common/validate-condition";
 import type { LovelaceConditionEditorConstructor } from "./types";
+import { ICON_CONDITION } from "../../common/icon-condition";
 
 @customElement("ha-card-condition-editor")
 export default class HaCardConditionEditor extends LitElement {
@@ -36,27 +43,70 @@ export default class HaCardConditionEditor extends LitElement {
 
     return html`
       <div class="header">
-        <ha-icon-button
+        <ha-svg-icon
-          @click=${this._toggleMode}
+          class="icon"
-          .disabled=${!supported || !valid}
+          .path=${ICON_CONDITION[condition.condition]}
-          .label=${this.hass!.localize(
+        ></ha-svg-icon>
-            yamlMode
-              ? "ui.panel.lovelace.editor.edit_card.show_visual_editor"
-              : "ui.panel.lovelace.editor.edit_card.show_code_editor"
-          )}
-          .path=${yamlMode ? mdiListBoxOutline : mdiCodeBraces}
-        ></ha-icon-button>
         <span class="title">
           ${this.hass.localize(
             `ui.panel.lovelace.editor.card.conditional.condition.${condition.condition}.label`
           ) || condition.condition}
         </span>
-        <ha-icon-button
+        <ha-button-menu
-          .label=${this.hass!.localize("ui.common.delete")}
+          slot="icons"
-          .path=${mdiDelete}
+          @action=${this._handleAction}
-          @click=${this._delete}
+          @click=${preventDefault}
+          @closed=${stopPropagation}
+          fixed
+          .corner=${"BOTTOM_END"}
+          .menuCorner=${"END"}
         >
-        </ha-icon-button>
+          <ha-icon-button
+            slot="trigger"
+            .label=${this.hass.localize("ui.common.menu")}
+            .path=${mdiDotsVertical}
+          >
+          </ha-icon-button>
+
+          <ha-list-item graphic="icon" .disabled=${!supported || !valid}>
+            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit_ui")}
+            ${!yamlMode
+              ? html`
+                  <ha-svg-icon
+                    class="selected_menu_item"
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>
+                `
+              : ``}
+          </ha-list-item>
+
+          <ha-list-item graphic="icon">
+            ${this.hass.localize(
+              "ui.panel.lovelace.editor.edit_card.edit_yaml"
+            )}
+            ${yamlMode
+              ? html`
+                  <ha-svg-icon
+                    class="selected_menu_item"
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>
+                `
+              : ``}
+          </ha-list-item>
+
+          <li divider role="separator"></li>
+
+          <ha-list-item class="warning" graphic="icon">
+            ${this.hass!.localize("ui.common.delete")}
+            <ha-svg-icon
+              class="warning"
+              slot="graphic"
+              .path=${mdiDelete}
+            ></ha-svg-icon>
+          </ha-list-item>
+        </ha-button-menu>
       </div>
       ${!valid
         ? html`
@@ -84,6 +134,20 @@ export default class HaCardConditionEditor extends LitElement {
     `;
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._yamlMode = false;
+        break;
+      case 1:
+        this._yamlMode = true;
+        break;
+      case 2:
+        this._delete();
+        break;
+    }
+  }
+
   private _toggleMode() {
     this._yamlMode = !this._yamlMode;
   }
@@ -117,6 +181,15 @@ export default class HaCardConditionEditor extends LitElement {
       .content {
         padding: 12px;
       }
+      .header .icon {
+        padding: 12px;
+      }
+      .selected_menu_item {
+        color: var(--primary-color);
+      }
+      li[role="separator"] {
+        border-bottom-color: var(--divider-color);
+      }
     `,
   ];
 }

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

@@ -6,8 +6,6 @@ import {
   mdiContentCopy,
   mdiListBoxOutline,
   mdiPlus,
-  mdiResponsive,
-  mdiStateMachine,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
@@ -27,6 +25,7 @@ import type {
 } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { ConditionalCardConfig } from "../../cards/types";
+import { ICON_CONDITION } from "../../common/icon-condition";
 import { Condition } from "../../common/validate-condition";
 import type { LovelaceCardEditor } from "../../types";
 import "../card-editor/hui-card-element-editor";
@@ -47,8 +46,6 @@ const UI_CONDITION = [
   "screen",
 ] as const satisfies readonly Condition["condition"][];
 
-type UiCondition = (typeof UI_CONDITION)[number];
-
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
@@ -57,10 +54,6 @@ const cardConfigStruct = assign(
   })
 );
 
-const ICONS: Record<UiCondition, string> = {
-  state: mdiStateMachine,
-  screen: mdiResponsive,
-};
 @customElement("hui-conditional-card-editor")
 export class HuiConditionalCardEditor
   extends LitElement
@@ -208,7 +201,7 @@ export class HuiConditionalCardEditor
                         ) || condition}
                         <ha-svg-icon
                           slot="graphic"
-                          .path=${ICONS[condition]}
+                          .path=${ICON_CONDITION[condition]}
                         ></ha-svg-icon>
                       </ha-list-item>
                     `

src/translations/en.json

@@ -4670,6 +4670,8 @@
             "confirm_cancel": "Are you sure you want to cancel?",
             "show_visual_editor": "Show visual editor",
             "show_code_editor": "Show code editor",
+            "edit_ui": "[%key:ui::panel::config::automation::editor::edit_ui%]",
+            "edit_yaml": "[%key:ui::panel::config::automation::editor::edit_yaml%]",
             "add": "Add card",
             "edit": "Edit",
             "clear": "Clear",