From be169f9c83222962b37f6e3d808d2e0feab80d39 Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Wed, 24 Aug 2022 00:26:38 +0200 Subject: [PATCH] Redesign trigger/condition/action overflow menus (#13453) * Redesign trigger/condition/action overflow menus * Reorder items, changed enable/disable icons, cleanup aria * Simplify menu item names --- .../action/ha-automation-action-row.ts | 109 ++++++++++++----- .../condition/ha-automation-condition-row.ts | 98 +++++++++++---- .../trigger/ha-automation-trigger-row.ts | 113 +++++++++++++----- src/translations/en.json | 4 +- 4 files changed, 242 insertions(+), 82 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index d37f820928..06da9e19a7 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -1,6 +1,17 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; -import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js"; +import { + mdiArrowDown, + mdiArrowUp, + mdiCheck, + mdiContentDuplicate, + mdiDelete, + mdiDotsVertical, + mdiPlay, + mdiPlayCircleOutline, + mdiRenameBox, + mdiStopCircleOutline, +} from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -187,31 +198,56 @@ export default class HaAutomationActionRow extends LitElement { .label=${this.hass.localize("ui.common.menu")} .path=${mdiDotsVertical} > - + ${this.hass.localize( - "ui.panel.config.automation.editor.actions.run_action" + "ui.panel.config.automation.editor.actions.run" )} + - - ${yamlMode - ? this.hass.localize( - "ui.panel.config.automation.editor.edit_ui" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.edit_yaml" - )} - - + + ${this.hass.localize( "ui.panel.config.automation.editor.actions.rename" )} + - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.duplicate" )} + - + +
  • + + + ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")} + ${!yamlMode + ? html`` + : ``} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + ${yamlMode + ? html`` + : ``} + + +
  • + + ${this.action.enabled === false ? this.hass.localize( "ui.panel.config.automation.editor.actions.enable" @@ -219,11 +255,22 @@ export default class HaAutomationActionRow extends LitElement { : this.hass.localize( "ui.panel.config.automation.editor.actions.disable" )} + - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} +
    { @@ -461,9 +517,6 @@ export default class HaAutomationActionRow extends LitElement { mwc-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } - .warning { - margin-bottom: 8px; - } .warning ul { margin: 4px 0; } 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 56570711df..c0a07724f7 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -1,6 +1,14 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; -import { mdiDotsVertical } from "@mdi/js"; +import { + mdiCheck, + mdiContentDuplicate, + mdiDelete, + mdiDotsVertical, + mdiPlayCircleOutline, + mdiRenameBox, + mdiStopCircleOutline, +} from "@mdi/js"; import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -104,26 +112,50 @@ export default class HaAutomationConditionRow extends LitElement { .path=${mdiDotsVertical} > - - ${this._yamlMode - ? this.hass.localize( - "ui.panel.config.automation.editor.edit_ui" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.edit_yaml" - )} - - + + ${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.edit_ui")} + ${!this._yamlMode + ? html`` + : ``} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + ${this._yamlMode + ? html`` + : ``} + + +
  • + + ${this.condition.enabled === false ? this.hass.localize( "ui.panel.config.automation.editor.actions.enable" @@ -131,11 +163,22 @@ export default class HaAutomationConditionRow extends LitElement { : this.hass.localize( "ui.panel.config.automation.editor.actions.disable" )} + - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} + @@ -196,19 +239,23 @@ export default class HaAutomationConditionRow extends LitElement { private async _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: + await this._renameCondition(); + break; + case 1: + fireEvent(this, "duplicate"); + break; + case 2: + this._switchUiMode(); + this.expand(); + break; + case 3: this._switchYamlMode(); this.expand(); break; - case 1: - await this._renameCondition(); - break; - case 2: - fireEvent(this, "duplicate"); - break; - case 3: + case 4: this._onDisable(); break; - case 4: + case 5: this._onDelete(); break; } @@ -233,9 +280,14 @@ export default class HaAutomationConditionRow extends LitElement { }); } + private _switchUiMode() { + this._warnings = undefined; + this._yamlMode = false; + } + private _switchYamlMode() { this._warnings = undefined; - this._yamlMode = !this._yamlMode; + this._yamlMode = true; } private async _testCondition(ev) { 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 c4a619653f..5dc2d0c1e1 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -1,6 +1,15 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; -import { mdiDotsVertical } from "@mdi/js"; +import { + mdiCheck, + mdiContentDuplicate, + mdiDelete, + mdiDotsVertical, + mdiIdentifier, + mdiPlayCircleOutline, + mdiRenameBox, + mdiStopCircleOutline, +} from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -126,31 +135,57 @@ export default class HaAutomationTriggerRow extends LitElement { .label=${this.hass.localize("ui.common.menu")} .path=${mdiDotsVertical} > - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.edit_id" - )} - - - ${yamlMode - ? this.hass.localize( - "ui.panel.config.automation.editor.edit_ui" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.edit_yaml" - )} - - + + ${this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" )} + - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.duplicate" )} + - + + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.edit_id" + )} + + + +
  • + + + ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")} + ${!yamlMode + ? html`` + : ``} + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + ${yamlMode + ? html`` + : ``} + + +
  • + + ${this.trigger.enabled === false ? this.hass.localize( "ui.panel.config.automation.editor.actions.enable" @@ -158,11 +193,22 @@ export default class HaAutomationTriggerRow extends LitElement { : this.hass.localize( "ui.panel.config.automation.editor.actions.disable" )} + - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} + @@ -334,23 +380,27 @@ export default class HaAutomationTriggerRow extends LitElement { private async _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: + await this._renameTrigger(); + break; + case 1: + fireEvent(this, "duplicate"); + break; + case 2: this._requestShowId = true; this.expand(); break; - case 1: + case 3: + this._switchUiMode(); + this.expand(); + break; + case 4: this._switchYamlMode(); this.expand(); break; - case 2: - await this._renameTrigger(); - break; - case 3: - fireEvent(this, "duplicate"); - break; - case 4: + case 5: this._onDisable(); break; - case 5: + case 6: this._onDelete(); break; } @@ -404,9 +454,14 @@ export default class HaAutomationTriggerRow extends LitElement { fireEvent(this, "value-changed", { value: ev.detail.value }); } + private _switchUiMode() { + this._warnings = undefined; + this._yamlMode = false; + } + private _switchYamlMode() { this._warnings = undefined; - this._yamlMode = !this._yamlMode; + this._yamlMode = true; } private _showTriggeredInfo() { diff --git a/src/translations/en.json b/src/translations/en.json index 631adac4fc..65559eb592 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1859,7 +1859,7 @@ "triggered": "Triggered", "add": "Add trigger", "id": "Trigger ID", - "edit_id": "Edit trigger ID", + "edit_id": "Edit ID", "duplicate": "Duplicate", "rename": "Rename", "change_alias": "Rename trigger", @@ -2066,7 +2066,7 @@ "learn_more": "Learn more about actions", "add": "Add action", "invalid_action": "Invalid action", - "run_action": "Run action", + "run": "Run", "run_action_error": "Error running action", "run_action_success": "Action run successfully", "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",