From c7f4986e615b8865ba2bbc6c84c827d6c5166b4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Thu, 8 Oct 2020 16:37:01 +0200 Subject: [PATCH] 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 | 3 + .../config/automation/ha-automation-editor.ts | 86 +++++++++++++------ src/panels/config/script/ha-script-editor.ts | 52 ++++++++--- 3 files changed, 103 insertions(+), 38 deletions(-) diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index a6ce70d2c9..5aafc86d78 100644 --- a/src/components/ha-button-menu.ts +++ b/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); + } `; } } diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index faa0dd161a..72bfc2ced1 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/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` - - - - - - - `} + + + + + + ${this.hass.localize( + "ui.panel.config.automation.picker.duplicate_automation" + )} + + + + + ${this.hass.localize( + "ui.panel.config.automation.picker.delete_automation" + )} + + + ${this._config ? html` ${this.narrow @@ -541,6 +568,17 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { history.back(); } + private async _handleMenuAction(ev: CustomEvent) { + 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( diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index d4c68d845e..6e71e7b859 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/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` - - `} + + + + + + ${this.hass.localize( + "ui.panel.config.automation.picker.delete_automation" + )} + + + ${this.narrow ? html` ${this._config?.alias} ` : ""} @@ -432,6 +448,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) { history.back(); } + private async _handleMenuAction(ev: CustomEvent) { + switch (ev.detail.index) { + case 0: + this._deleteConfirm(); + break; + } + } + private _saveScript(): void { if (this._idError) { this._errors = this.hass.localize(