jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ha-md-button-menu in automation triggers/conditions (#24258)

Browse Source
This commit is contained in:
karwosts 2025-02-16 03:35:49 -08:00 committed by GitHub
parent a25e1d3f7f
commit 84a0289e1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 200 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/panels/config/automation/condition/ha-automation-condition-row.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import { import {
mdiArrowDown, mdiArrowDown,
mdiArrowUp, mdiArrowUp,
@ -24,11 +23,12 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-button-menu"; import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item";
import type { import type {
AutomationClipboard, AutomationClipboard,
Condition, Condition,
@ -141,12 +141,12 @@ export default class HaAutomationConditionRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-button-menu <ha-md-button-menu
slot="icons" slot="icons"
@action=${this._handleAction}
@click=${preventDefault} @click=${preventDefault}
@keydown=${stopPropagation}
@closed=${stopPropagation} @closed=${stopPropagation}
fixed positioning="fixed"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@ -155,76 +155,91 @@ export default class HaAutomationConditionRow extends LitElement {
> >
</ha-icon-button> </ha-icon-button>
<ha-list-item graphic="icon"> <ha-md-menu-item .clickAction=${this._testCondition}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.test" "ui.panel.config.automation.editor.conditions.test"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._renameCondition}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.rename" "ui.panel.config.automation.editor.conditions.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<li divider role="separator"></li> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._duplicateCondition}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="start"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._copyCondition}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._cutCondition}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._moveUp}
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.first}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
></ha-list-item> ></ha-md-menu-item>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._moveDown}
.disabled=${this.disabled || this.last} .disabled=${this.disabled || this.last}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
></ha-list-item> ></ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this._warnings}> <ha-md-menu-item
.clickAction=${this._toggleYamlMode}
.disabled=${this._warnings}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)} )}
<ha-svg-icon <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
slot="graphic" </ha-md-menu-item>
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-list-item>
<li divider role="separator"></li> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._onDisable}
.disabled=${this.disabled}
>
${this.condition.enabled === false ${this.condition.enabled === false
? this.hass.localize( ? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable" "ui.panel.config.automation.editor.actions.enable"
@ -233,15 +248,15 @@ export default class HaAutomationConditionRow extends LitElement {
"ui.panel.config.automation.editor.actions.disable" "ui.panel.config.automation.editor.actions.disable"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="start"
.path=${this.condition.enabled === false .path=${this.condition.enabled === false
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item <ha-md-menu-item
class="warning" class="warning"
graphic="icon" .clickAction=${this._onDelete}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
@ -249,11 +264,11 @@ export default class HaAutomationConditionRow extends LitElement {
)} )}
<ha-svg-icon <ha-svg-icon
class="warning" class="warning"
slot="graphic" slot="start"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
</ha-button-menu> </ha-md-button-menu>
<div <div
class=${classMap({ class=${classMap({
@ -325,47 +340,6 @@ export default class HaAutomationConditionRow extends LitElement {
} }
} }
private async _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
await this._testCondition();
break;
case 1:
await this._renameCondition();
break;
case 2:
fireEvent(this, "duplicate");
break;
case 3:
this._setClipboard();
break;
case 4:
this._setClipboard();
fireEvent(this, "value-changed", { value: null });
break;
case 5:
fireEvent(this, "move-up");
break;
case 6:
fireEvent(this, "move-down");
break;
case 7:
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
break;
case 8:
this._onDisable();
break;
case 9:
this._onDelete();
break;
}
}
private _setClipboard() { private _setClipboard() {
this._clipboard = { this._clipboard = {
...this._clipboard, ...this._clipboard,
@ -373,13 +347,13 @@ export default class HaAutomationConditionRow extends LitElement {
}; };
} }
private _onDisable() { private _onDisable = () => {
const enabled = !(this.condition.enabled ?? true); const enabled = !(this.condition.enabled ?? true);
const value = { ...this.condition, enabled }; const value = { ...this.condition, enabled };
fireEvent(this, "value-changed", { value }); fireEvent(this, "value-changed", { value });
} };
private _onDelete() { private _onDelete = () => {
showConfirmationDialog(this, { showConfirmationDialog(this, {
title: this.hass.localize( title: this.hass.localize(
"ui.panel.config.automation.editor.conditions.delete_confirm_title" "ui.panel.config.automation.editor.conditions.delete_confirm_title"
@ -394,7 +368,7 @@ export default class HaAutomationConditionRow extends LitElement {
fireEvent(this, "value-changed", { value: null }); fireEvent(this, "value-changed", { value: null });
}, },
}); });
} };
private _switchUiMode() { private _switchUiMode() {
this._warnings = undefined; this._warnings = undefined;
@ -406,7 +380,7 @@ export default class HaAutomationConditionRow extends LitElement {
this._yamlMode = true; this._yamlMode = true;
} }
private async _testCondition() { private _testCondition = async () => {
if (this._testing) { if (this._testing) {
return; return;
} }
@ -461,9 +435,9 @@ export default class HaAutomationConditionRow extends LitElement {
this._testing = false; this._testing = false;
}, 2500); }, 2500);
} }
} };
private async _renameCondition(): Promise<void> { private _renameCondition = async (): Promise<void> => {
const alias = await showPromptDialog(this, { const alias = await showPromptDialog(this, {
title: this.hass.localize( title: this.hass.localize(
"ui.panel.config.automation.editor.conditions.change_alias" "ui.panel.config.automation.editor.conditions.change_alias"
@ -489,7 +463,37 @@ export default class HaAutomationConditionRow extends LitElement {
value, value,
}); });
} }
} };
private _duplicateCondition = () => {
fireEvent(this, "duplicate");
};
private _copyCondition = () => {
this._setClipboard();
};
private _cutCondition = () => {
this._setClipboard();
fireEvent(this, "value-changed", { value: null });
};
private _moveUp = () => {
fireEvent(this, "move-up");
};
private _moveDown = () => {
fireEvent(this, "move-down");
};
private _toggleYamlMode = () => {
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
};
public expand() { public expand() {
this.updateComplete.then(() => { this.updateComplete.then(() => {
@ -501,9 +505,6 @@ export default class HaAutomationConditionRow extends LitElement {
return [ return [
haStyle, haStyle,
css` css`
ha-button-menu {
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.disabled { .disabled {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -539,12 +540,6 @@ export default class HaAutomationConditionRow extends LitElement {
border-top-right-radius: var(--ha-card-border-radius, 12px); border-top-right-radius: var(--ha-card-border-radius, 12px);
border-top-left-radius: var(--ha-card-border-radius, 12px); border-top-left-radius: var(--ha-card-border-radius, 12px);
} }
ha-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
ha-list-item.hidden {
display: none;
}
.testing { .testing {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -571,8 +566,8 @@ export default class HaAutomationConditionRow extends LitElement {
.testing.pass { .testing.pass {
background-color: var(--success-color); background-color: var(--success-color);
} }
li[role="separator"] { ha-md-menu-item > ha-svg-icon {
border-bottom-color: var(--divider-color); --mdc-icon-size: 24px;
} }
`, `,
]; ];

206
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import { import {
mdiArrowDown, mdiArrowDown,
mdiArrowUp, mdiArrowUp,
@ -28,7 +27,9 @@ import { capitalizeFirstLetter } from "../../../../common/string/capitalize-firs
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import { debounce } from "../../../../common/util/debounce"; import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-button-menu"; import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
@ -169,12 +170,12 @@ export default class HaAutomationTriggerRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-button-menu <ha-md-button-menu
slot="icons" slot="icons"
@action=${this._handleAction}
@click=${preventDefault} @click=${preventDefault}
@keydown=${stopPropagation}
@closed=${stopPropagation} @closed=${stopPropagation}
fixed positioning="fixed"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@ -182,84 +183,93 @@ export default class HaAutomationTriggerRow extends LitElement {
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._renameTrigger}
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._showTriggerId}
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.edit_id" "ui.panel.config.automation.editor.triggers.edit_id"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiIdentifier}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<li divider role="separator"></li> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._duplicateTrigger}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate" "ui.panel.config.automation.editor.triggers.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="start"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._copyTrigger}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}> <ha-md-menu-item
.clickAction=${this._cutTrigger}
.disabled=${this.disabled}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._moveUp}
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.first}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
></ha-list-item> ></ha-md-menu-item>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._moveDown}
.disabled=${this.disabled || this.last} .disabled=${this.disabled || this.last}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
></ha-list-item> ></ha-md-menu-item>
<ha-list-item graphic="icon" .disabled=${!supported}> <ha-md-menu-item
.clickAction=${this._toggleYamlMode}
.disabled=${!supported}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)} )}
<ha-svg-icon <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
slot="graphic" </ha-md-menu-item>
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-list-item>
<li divider role="separator"></li> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-list-item <ha-md-menu-item
graphic="icon" .clickAction=${this._onDisable}
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
${"enabled" in this.trigger && this.trigger.enabled === false ${"enabled" in this.trigger && this.trigger.enabled === false
@ -270,16 +280,16 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.actions.disable" "ui.panel.config.automation.editor.actions.disable"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="start"
.path=${"enabled" in this.trigger && .path=${"enabled" in this.trigger &&
this.trigger.enabled === false this.trigger.enabled === false
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
<ha-list-item <ha-md-menu-item
.clickAction=${this._onDelete}
class="warning" class="warning"
graphic="icon"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
@ -287,11 +297,11 @@ export default class HaAutomationTriggerRow extends LitElement {
)} )}
<ha-svg-icon <ha-svg-icon
class="warning" class="warning"
slot="graphic" slot="start"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-md-menu-item>
</ha-button-menu> </ha-md-button-menu>
<div <div
class=${classMap({ class=${classMap({
@ -464,48 +474,6 @@ export default class HaAutomationTriggerRow extends LitElement {
} }
} }
private async _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
await this._renameTrigger();
break;
case 1:
this._requestShowId = true;
this.expand();
break;
case 2:
fireEvent(this, "duplicate");
break;
case 3:
this._setClipboard();
break;
case 4:
this._setClipboard();
fireEvent(this, "value-changed", { value: null });
break;
case 5:
fireEvent(this, "move-up");
break;
case 6:
fireEvent(this, "move-down");
break;
case 7:
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
break;
case 8:
this._onDisable();
break;
case 9:
this._onDelete();
break;
}
}
private _setClipboard() { private _setClipboard() {
this._clipboard = { this._clipboard = {
...this._clipboard, ...this._clipboard,
@ -513,7 +481,7 @@ export default class HaAutomationTriggerRow extends LitElement {
}; };
} }
private _onDelete() { private _onDelete = () => {
showConfirmationDialog(this, { showConfirmationDialog(this, {
title: this.hass.localize( title: this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete_confirm_title" "ui.panel.config.automation.editor.triggers.delete_confirm_title"
@ -528,9 +496,9 @@ export default class HaAutomationTriggerRow extends LitElement {
fireEvent(this, "value-changed", { value: null }); fireEvent(this, "value-changed", { value: null });
}, },
}); });
} };
private _onDisable() { private _onDisable = () => {
if (isTriggerList(this.trigger)) return; if (isTriggerList(this.trigger)) return;
const enabled = !(this.trigger.enabled ?? true); const enabled = !(this.trigger.enabled ?? true);
const value = { ...this.trigger, enabled }; const value = { ...this.trigger, enabled };
@ -538,7 +506,7 @@ export default class HaAutomationTriggerRow extends LitElement {
if (this._yamlMode) { if (this._yamlMode) {
this._yamlEditor?.setValue(value); this._yamlEditor?.setValue(value);
} }
} };
private _idChanged(ev: CustomEvent) { private _idChanged(ev: CustomEvent) {
if (isTriggerList(this.trigger)) return; if (isTriggerList(this.trigger)) return;
@ -605,7 +573,7 @@ export default class HaAutomationTriggerRow extends LitElement {
}); });
} }
private async _renameTrigger(): Promise<void> { private _renameTrigger = async (): Promise<void> => {
if (isTriggerList(this.trigger)) return; if (isTriggerList(this.trigger)) return;
const alias = await showPromptDialog(this, { const alias = await showPromptDialog(this, {
title: this.hass.localize( title: this.hass.localize(
@ -636,7 +604,42 @@ export default class HaAutomationTriggerRow extends LitElement {
this._yamlEditor?.setValue(value); this._yamlEditor?.setValue(value);
} }
} }
} };
private _showTriggerId = () => {
this._requestShowId = true;
this.expand();
};
private _duplicateTrigger = () => {
fireEvent(this, "duplicate");
};
private _copyTrigger = () => {
this._setClipboard();
};
private _cutTrigger = () => {
this._setClipboard();
fireEvent(this, "value-changed", { value: null });
};
private _moveUp = () => {
fireEvent(this, "move-up");
};
private _moveDown = () => {
fireEvent(this, "move-down");
};
private _toggleYamlMode = () => {
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
};
public expand() { public expand() {
this.updateComplete.then(() => { this.updateComplete.then(() => {
@ -648,9 +651,6 @@ export default class HaAutomationTriggerRow extends LitElement {
return [ return [
haStyle, haStyle,
css` css`
ha-button-menu {
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.disabled { .disabled {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -714,18 +714,12 @@ export default class HaAutomationTriggerRow extends LitElement {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--text-accent-color, var(--text-primary-color)); color: var(--text-accent-color, var(--text-primary-color));
} }
ha-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
ha-list-item.hidden {
display: none;
}
ha-textfield { ha-textfield {
display: block; display: block;
margin-bottom: 24px; margin-bottom: 24px;
} }
li[role="separator"] { ha-md-menu-item > ha-svg-icon {
border-bottom-color: var(--divider-color); --mdc-icon-size: 24px;
} }
`, `,
]; ];