mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-11 19: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;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
::slotted([disabled]) {
|
||||||
|
color: var(--disabled-text-color);
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,16 @@
|
|||||||
import "@material/mwc-fab";
|
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-header/app-header";
|
||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
|
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
|
||||||
import "@polymer/paper-input/paper-textarea";
|
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 { PaperListboxElement } from "@polymer/paper-listbox";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -17,6 +24,7 @@ import {
|
|||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { classMap } from "lit-html/directives/class-map";
|
import { classMap } from "lit-html/directives/class-map";
|
||||||
import { navigate } from "../../../common/navigate";
|
import { navigate } from "../../../common/navigate";
|
||||||
|
import "../../../components/ha-button-menu";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
@ -93,29 +101,48 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
.backCallback=${() => this._backTapped()}
|
.backCallback=${() => this._backTapped()}
|
||||||
.tabs=${configSections.automation}
|
.tabs=${configSections.automation}
|
||||||
>
|
>
|
||||||
${!this.automationId
|
<ha-button-menu
|
||||||
? ""
|
corner="BOTTOM_START"
|
||||||
: html`
|
|
||||||
<mwc-icon-button
|
|
||||||
slot="toolbar-icon"
|
slot="toolbar-icon"
|
||||||
title="${this.hass.localize(
|
@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"
|
"ui.panel.config.automation.picker.duplicate_automation"
|
||||||
)}"
|
)}
|
||||||
@click=${this._duplicate}
|
graphic="icon"
|
||||||
>
|
>
|
||||||
<ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon>
|
${this.hass.localize(
|
||||||
</mwc-icon-button>
|
"ui.panel.config.automation.picker.duplicate_automation"
|
||||||
<mwc-icon-button
|
)}
|
||||||
class="warning"
|
<ha-svg-icon
|
||||||
slot="toolbar-icon"
|
slot="graphic"
|
||||||
title="${this.hass.localize(
|
.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"
|
"ui.panel.config.automation.picker.delete_automation"
|
||||||
)}"
|
)}
|
||||||
@click=${this._deleteConfirm}
|
class=${classMap({ warning: this.automationId })}
|
||||||
|
graphic="icon"
|
||||||
>
|
>
|
||||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
${this.hass.localize(
|
||||||
</mwc-icon-button>
|
"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
|
${this._config
|
||||||
? html`
|
? html`
|
||||||
${this.narrow
|
${this.narrow
|
||||||
@ -541,6 +568,17 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
history.back();
|
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 {
|
private _saveAutomation(): void {
|
||||||
const id = this.automationId || String(Date.now());
|
const id = this.automationId || String(Date.now());
|
||||||
this.hass!.callApi(
|
this.hass!.callApi(
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import "@material/mwc-fab";
|
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-header/app-header";
|
||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
|
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 { PaperListboxElement } from "@polymer/paper-listbox";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -19,6 +21,7 @@ import { computeObjectId } from "../../../common/entity/compute_object_id";
|
|||||||
import { navigate } from "../../../common/navigate";
|
import { navigate } from "../../../common/navigate";
|
||||||
import { slugify } from "../../../common/string/slugify";
|
import { slugify } from "../../../common/string/slugify";
|
||||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||||
|
import "../../../components/ha-button-menu";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-icon-input";
|
import "../../../components/ha-icon-input";
|
||||||
@ -74,19 +77,32 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
.backCallback=${() => this._backTapped()}
|
.backCallback=${() => this._backTapped()}
|
||||||
.tabs=${configSections.automation}
|
.tabs=${configSections.automation}
|
||||||
>
|
>
|
||||||
${!this.scriptEntityId
|
<ha-button-menu
|
||||||
? ""
|
corner="BOTTOM_START"
|
||||||
: html`
|
|
||||||
<ha-icon-button
|
|
||||||
class="warning"
|
|
||||||
slot="toolbar-icon"
|
slot="toolbar-icon"
|
||||||
title="${this.hass.localize(
|
@action=${this._handleMenuAction}
|
||||||
"ui.panel.config.script.editor.delete_script"
|
>
|
||||||
)}"
|
<mwc-icon-button
|
||||||
icon="hass:delete"
|
slot="trigger"
|
||||||
@click=${this._deleteConfirm}
|
.title=${this.hass.localize("ui.common.menu")}
|
||||||
></ha-icon-button>
|
.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
|
${this.narrow
|
||||||
? html` <span slot="header">${this._config?.alias}</span> `
|
? html` <span slot="header">${this._config?.alias}</span> `
|
||||||
: ""}
|
: ""}
|
||||||
@ -432,6 +448,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
history.back();
|
history.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
|
||||||
|
switch (ev.detail.index) {
|
||||||
|
case 0:
|
||||||
|
this._deleteConfirm();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private _saveScript(): void {
|
private _saveScript(): void {
|
||||||
if (this._idError) {
|
if (this._idError) {
|
||||||
this._errors = this.hass.localize(
|
this._errors = this.hass.localize(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user