Put automation/script editor actions in a menu (#7250)

* Put automation/script editor actions in a menu

* Use disabled property instead of attribute

src/components/ha-button-menu.ts

@@ -62,6 +62,9 @@ export class HaButtonMenu extends LitElement {
         display: inline-block;
         position: relative;
       }
+      ::slotted([disabled]) {
+        color: var(--disabled-text-color);
+      }
     `;
   }
 }

src/panels/config/automation/ha-automation-editor.ts

@@ -1,9 +1,16 @@
 import "@material/mwc-fab";
-import { mdiContentDuplicate, mdiContentSave, mdiDelete } from "@mdi/js";
+import {
+  mdiContentDuplicate,
+  mdiContentSave,
+  mdiDelete,
+  mdiDotsVertical,
+} from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-input/paper-textarea";
+import "@material/mwc-list/mwc-list-item";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import { PaperListboxElement } from "@polymer/paper-listbox";
 import {
   css,
@@ -17,6 +24,7 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { navigate } from "../../../common/navigate";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
@@ -93,29 +101,48 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
-        ${!this.automationId
-          ? ""
-          : html`
-              <mwc-icon-button
-                slot="toolbar-icon"
-                title="${this.hass.localize(
-                  "ui.panel.config.automation.picker.duplicate_automation"
-                )}"
-                @click=${this._duplicate}
-              >
-                <ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon>
-              </mwc-icon-button>
-              <mwc-icon-button
-                class="warning"
-                slot="toolbar-icon"
-                title="${this.hass.localize(
-                  "ui.panel.config.automation.picker.delete_automation"
-                )}"
-                @click=${this._deleteConfirm}
-              >
-                <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-              </mwc-icon-button>
-            `}
+        <ha-button-menu
+          corner="BOTTOM_START"
+          slot="toolbar-icon"
+          @action=${this._handleMenuAction}
+        >
+          <mwc-icon-button
+            slot="trigger"
+            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.overflow_menu")}
+            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+
+          <mwc-list-item
+            .disabled=${!this.automationId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.picker.duplicate_automation"
+            )}
+            graphic="icon"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.duplicate_automation"
+            )}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiContentDuplicate}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
+          <mwc-list-item
+            .disabled=${!this.automationId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.picker.delete_automation"
+            )}
+            class=${classMap({ warning: this.automationId })}
+            graphic="icon"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.delete_automation"
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
         ${this._config
           ? html`
               ${this.narrow
@@ -541,6 +568,17 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     history.back();
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._duplicate();
+        break;
+      case 1:
+        this._deleteConfirm();
+        break;
+    }
+  }
+
   private _saveAutomation(): void {
     const id = this.automationId || String(Date.now());
     this.hass!.callApi(

src/panels/config/script/ha-script-editor.ts

@@ -1,8 +1,10 @@
 import "@material/mwc-fab";
-import { mdiContentSave } from "@mdi/js";
+import { mdiContentSave, mdiDelete, mdiDotsVertical } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@material/mwc-list/mwc-list-item";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import { PaperListboxElement } from "@polymer/paper-listbox";
 import {
   css,
@@ -19,6 +21,7 @@ import { computeObjectId } from "../../../common/entity/compute_object_id";
 import { navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-input";
@@ -74,19 +77,32 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
-        ${!this.scriptEntityId
-          ? ""
-          : html`
-              <ha-icon-button
-                class="warning"
-                slot="toolbar-icon"
-                title="${this.hass.localize(
-                  "ui.panel.config.script.editor.delete_script"
-                )}"
-                icon="hass:delete"
-                @click=${this._deleteConfirm}
-              ></ha-icon-button>
-            `}
+        <ha-button-menu
+          corner="BOTTOM_START"
+          slot="toolbar-icon"
+          @action=${this._handleMenuAction}
+        >
+          <mwc-icon-button
+            slot="trigger"
+            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.overflow_menu")}
+            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+
+          <mwc-list-item
+            .disabled=${!this.scriptEntityId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.picker.delete_automation"
+            )}
+            class=${classMap({ warning: this.scriptEntityId })}
+            graphic="icon"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.delete_automation"
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
         ${this.narrow
           ? html` <span slot="header">${this._config?.alias}</span> `
           : ""}
@@ -432,6 +448,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     history.back();
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._deleteConfirm();
+        break;
+    }
+  }
+
   private _saveScript(): void {
     if (this._idError) {
       this._errors = this.hass.localize(