mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
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:
parent
0f0a3fdaf7
commit
c7f4986e61
@ -62,6 +62,9 @@ export class HaButtonMenu extends LitElement {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
::slotted([disabled]) {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
Loading…
x
Reference in New Issue
Block a user