From 28d11703fc514fcb1107852e9a40ca9a6f83c623 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 5 Sep 2022 18:18:58 +0200 Subject: [PATCH] Reorder overflow menu (#13596) --- .../config/automation/ha-automation-editor.ts | 28 ++++++-- .../automation/manual-automation-editor.ts | 67 ++++++++++--------- src/translations/en.json | 6 ++ 3 files changed, 66 insertions(+), 35 deletions(-) diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index d1af4e2947..739559533d 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -11,6 +11,7 @@ import { mdiPlay, mdiPlayCircleOutline, mdiRenameBox, + mdiSort, mdiStopCircleOutline, mdiTransitConnection, } from "@mdi/js"; @@ -25,7 +26,7 @@ import { PropertyValues, TemplateResult, } from "lit"; -import { property, state, query } from "lit/decorators"; +import { property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; import { navigate } from "../../../common/navigate"; @@ -61,6 +62,7 @@ import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-a import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename"; import "./blueprint-automation-editor"; import "./manual-automation-editor"; +import type { HaManualAutomationEditor } from "./manual-automation-editor"; declare global { interface HTMLElementTagNameMap { @@ -100,7 +102,10 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { @state() private _mode: "gui" | "yaml" = "gui"; - @query("ha-yaml-editor", true) private _editor?: HaYamlEditor; + @query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor; + + @query("manual-automation-editor") + private _manualEditor?: HaManualAutomationEditor; private _configSubscriptions: Record< string, @@ -206,6 +211,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { ` : ""} + + ${this.hass.localize("ui.panel.config.automation.editor.re_order")} + + + { - if (this._editor?.yaml) { - await copyToClipboard(this._editor.yaml); + if (this._yamlEditor?.yaml) { + await copyToClipboard(this._yamlEditor.yaml); showToast(this, { message: this.hass.localize("ui.common.copied_clipboard"), }); @@ -575,6 +589,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { this._mode = "yaml"; } + private _toggleReOrderMode() { + if (this._manualEditor) { + this._manualEditor.reOrderMode = !this._manualEditor.reOrderMode; + } + } + private async _promptAutomationAlias(): Promise { return new Promise((resolve) => { showAutomationRenameDialog(this, { diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index e6092cf251..340b9e33eb 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -1,13 +1,15 @@ import "@material/mwc-button/mwc-button"; -import { mdiHelpCircle, mdiSort, mdiTextBoxEdit } from "@mdi/js"; +import { mdiHelpCircle } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/entity/ha-entity-toggle"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import "../../../components/ha-alert"; +import "../../../components/ha-textarea"; +import "../../../components/ha-textfield"; import { Condition, ManualAutomationConfig, @@ -33,11 +35,8 @@ export class HaManualAutomationEditor extends LitElement { @property({ attribute: false }) public stateObj?: HassEntity; - @state() private _reOrderMode = false; - - private _toggleReOrderMode() { - this._reOrderMode = !this._reOrderMode; - } + @property({ type: Boolean, reflect: true, attribute: "re-order-mode" }) + public reOrderMode = false; protected render() { return html` @@ -55,19 +54,31 @@ export class HaManualAutomationEditor extends LitElement { ` : ""} + ${this.reOrderMode + ? html` + + ${this.hass.localize( + "ui.panel.config.automation.editor.re_order_mode.description" + )} + + ${this.hass.localize( + "ui.panel.config.automation.editor.re_order_mode.exit" + )} + + + ` + : ""}

${this.hass.localize( "ui.panel.config.automation.editor.triggers.header" )}

-
@@ -97,13 +108,6 @@ export class HaManualAutomationEditor extends LitElement { "ui.panel.config.automation.editor.conditions.header" )} -
@@ -134,13 +138,6 @@ export class HaManualAutomationEditor extends LitElement { )}
- `; } + private _exitReOrderMode() { + this.reOrderMode = !this.reOrderMode; + } + private _triggerChanged(ev: CustomEvent): void { ev.stopPropagation(); fireEvent(this, "value-changed", { @@ -270,6 +271,10 @@ export class HaManualAutomationEditor extends LitElement { border-top-right-radius: var(--ha-card-border-radius); border-top-left-radius: var(--ha-card-border-radius); } + ha-alert { + display: block; + margin-bottom: 16px; + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index 63dda9251d..c73f2ac15a 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1836,6 +1836,12 @@ "automation_settings": "Automation settings", "move_up": "Move up", "move_down": "Move down", + "re_order": "Re-order", + "re_order_mode": { + "title": "Re-order mode", + "description": "You are in re-order mode, you can re-order your triggers, conditions and actions.", + "exit": "Exit" + }, "description": { "label": "Description", "placeholder": "Optional description",