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

* Put automation/script editor actions in a menu

* Use disabled property instead of attribute
This commit is contained in:
Thomas Lovén 2020-10-08 16:37:01 +02:00 committed by GitHub
parent 0f0a3fdaf7
commit c7f4986e61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 38 deletions

View File

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

View File

@ -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(

View File

@ -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(