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; } `, ];