From 84a0289e1b448078d07ec229e04b6ada11e095db Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Sun, 16 Feb 2025 03:35:49 -0800
Subject: [PATCH] Use ha-md-button-menu in automation triggers/conditions
(#24258)
---
.../condition/ha-automation-condition-row.ts | 205 +++++++++--------
.../trigger/ha-automation-trigger-row.ts | 206 +++++++++---------
2 files changed, 200 insertions(+), 211 deletions(-)
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index ded7354eca..80a32ec849 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import {
mdiArrowDown,
mdiArrowUp,
@@ -24,11 +23,12 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
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-expansion-panel";
import "../../../../components/ha-icon-button";
-import "../../../../components/ha-list-item";
import type {
AutomationClipboard,
Condition,
@@ -141,12 +141,12 @@ export default class HaAutomationConditionRow extends LitElement {
-
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.test"
)}
-
-
-
+
+
+
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.rename"
)}
-
-
+
+
-
+
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
-
+
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy"
)}
-
-
+
+
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut"
)}
-
-
+
+
-
${this.hass.localize("ui.panel.config.automation.editor.move_up")}
-
+
-
${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
-
+
-
+
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)}
-
-
+
+
-
+
-
+
${this.condition.enabled === false
? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable"
@@ -233,15 +248,15 @@ export default class HaAutomationConditionRow extends LitElement {
"ui.panel.config.automation.editor.actions.disable"
)}
-
-
+
${this.hass.localize(
@@ -249,11 +264,11 @@ export default class HaAutomationConditionRow extends LitElement {
)}
-
-
+
+
) {
- 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() {
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 value = { ...this.condition, enabled };
fireEvent(this, "value-changed", { value });
- }
+ };
- private _onDelete() {
+ private _onDelete = () => {
showConfirmationDialog(this, {
title: this.hass.localize(
"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 });
},
});
- }
+ };
private _switchUiMode() {
this._warnings = undefined;
@@ -406,7 +380,7 @@ export default class HaAutomationConditionRow extends LitElement {
this._yamlMode = true;
}
- private async _testCondition() {
+ private _testCondition = async () => {
if (this._testing) {
return;
}
@@ -461,9 +435,9 @@ export default class HaAutomationConditionRow extends LitElement {
this._testing = false;
}, 2500);
}
- }
+ };
- private async _renameCondition(): Promise
{
+ private _renameCondition = async (): Promise => {
const alias = await showPromptDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.conditions.change_alias"
@@ -489,7 +463,37 @@ export default class HaAutomationConditionRow extends LitElement {
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() {
this.updateComplete.then(() => {
@@ -501,9 +505,6 @@ export default class HaAutomationConditionRow extends LitElement {
return [
haStyle,
css`
- ha-button-menu {
- --mdc-theme-text-primary-on-background: var(--primary-text-color);
- }
.disabled {
opacity: 0.5;
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-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 {
position: absolute;
top: 0px;
@@ -571,8 +566,8 @@ export default class HaAutomationConditionRow extends LitElement {
.testing.pass {
background-color: var(--success-color);
}
- li[role="separator"] {
- border-bottom-color: var(--divider-color);
+ ha-md-menu-item > ha-svg-icon {
+ --mdc-icon-size: 24px;
}
`,
];
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 43c8758e61..aa090886c7 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import {
mdiArrowDown,
mdiArrowUp,
@@ -28,7 +27,9 @@ import { capitalizeFirstLetter } from "../../../../common/string/capitalize-firs
import { handleStructError } from "../../../../common/structs/handle-errors";
import { debounce } from "../../../../common/util/debounce";
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-expansion-panel";
import "../../../../components/ha-icon-button";
@@ -169,12 +170,12 @@ export default class HaAutomationTriggerRow extends LitElement {
-
-
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
-
-
+
+
-
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.edit_id"
)}
-
-
+
+
-
+
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate"
)}
-
+
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy"
)}
-
-
+
+
-
+
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut"
)}
-
-
+
+
-
${this.hass.localize("ui.panel.config.automation.editor.move_up")}
-
+
-
${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
-
+
-
+
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)}
-
-
+
+
-
+
-
${"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"
)}
-
-
+
${this.hass.localize(
@@ -287,11 +297,11 @@ export default class HaAutomationTriggerRow extends LitElement {
)}
-
-
+
+
) {
- 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() {
this._clipboard = {
...this._clipboard,
@@ -513,7 +481,7 @@ export default class HaAutomationTriggerRow extends LitElement {
};
}
- private _onDelete() {
+ private _onDelete = () => {
showConfirmationDialog(this, {
title: this.hass.localize(
"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 });
},
});
- }
+ };
- private _onDisable() {
+ private _onDisable = () => {
if (isTriggerList(this.trigger)) return;
const enabled = !(this.trigger.enabled ?? true);
const value = { ...this.trigger, enabled };
@@ -538,7 +506,7 @@ export default class HaAutomationTriggerRow extends LitElement {
if (this._yamlMode) {
this._yamlEditor?.setValue(value);
}
- }
+ };
private _idChanged(ev: CustomEvent) {
if (isTriggerList(this.trigger)) return;
@@ -605,7 +573,7 @@ export default class HaAutomationTriggerRow extends LitElement {
});
}
- private async _renameTrigger(): Promise {
+ private _renameTrigger = async (): Promise => {
if (isTriggerList(this.trigger)) return;
const alias = await showPromptDialog(this, {
title: this.hass.localize(
@@ -636,7 +604,42 @@ export default class HaAutomationTriggerRow extends LitElement {
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() {
this.updateComplete.then(() => {
@@ -648,9 +651,6 @@ export default class HaAutomationTriggerRow extends LitElement {
return [
haStyle,
css`
- ha-button-menu {
- --mdc-theme-text-primary-on-background: var(--primary-text-color);
- }
.disabled {
opacity: 0.5;
pointer-events: none;
@@ -714,18 +714,12 @@ export default class HaAutomationTriggerRow extends LitElement {
background-color: var(--accent-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 {
display: block;
margin-bottom: 24px;
}
- li[role="separator"] {
- border-bottom-color: var(--divider-color);
+ ha-md-menu-item > ha-svg-icon {
+ --mdc-icon-size: 24px;
}
`,
];