Reorder overflow menu (#13596)

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) {
               `
             : ""}
 
+          <mwc-list-item
+            graphic="icon"
+            @click=${this._toggleReOrderMode}
+            .disabled=${this._mode !== "gui"}
+          >
+            ${this.hass.localize("ui.panel.config.automation.editor.re_order")}
+            <ha-svg-icon slot="graphic" .path=${mdiSort}></ha-svg-icon>
+          </mwc-list-item>
+
           <mwc-list-item
             .disabled=${!this.automationId}
             graphic="icon"
@@ -493,8 +507,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _copyYaml(): Promise<void> {
-    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<void> {
     return new Promise((resolve) => {
       showAutomationRenameDialog(this, {

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 {
             </ha-alert>
           `
         : ""}
+      ${this.reOrderMode
+        ? html`
+            <ha-alert
+              alert-type="info"
+              .title=${this.hass.localize(
+                "ui.panel.config.automation.editor.re_order_mode.title"
+              )}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.re_order_mode.description"
+              )}
+              <mwc-button slot="action" @click=${this._exitReOrderMode}>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.re_order_mode.exit"
+                )}
+              </mwc-button>
+            </ha-alert>
+          `
+        : ""}
       <div class="header">
         <h2 id="triggers-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.header"
           )}
         </h2>
-        <ha-icon-button
-          .path=${this._reOrderMode ? mdiTextBoxEdit : mdiSort}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.re_order"
-          )}
-          @click=${this._toggleReOrderMode}
-        ></ha-icon-button>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/trigger/")}
           target="_blank"
@@ -88,7 +99,7 @@ export class HaManualAutomationEditor extends LitElement {
         .triggers=${this.config.trigger}
         @value-changed=${this._triggerChanged}
         .hass=${this.hass}
-        .reOrderMode=${this._reOrderMode}
+        .reOrderMode=${this.reOrderMode}
       ></ha-automation-trigger>
 
       <div class="header">
@@ -97,13 +108,6 @@ export class HaManualAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.conditions.header"
           )}
         </h2>
-        <ha-icon-button
-          .path=${this._reOrderMode ? mdiTextBoxEdit : mdiSort}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.re_order"
-          )}
-          @click=${this._toggleReOrderMode}
-        ></ha-icon-button>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/condition/")}
           target="_blank"
@@ -124,7 +128,7 @@ export class HaManualAutomationEditor extends LitElement {
         .conditions=${this.config.condition || []}
         @value-changed=${this._conditionChanged}
         .hass=${this.hass}
-        .reOrderMode=${this._reOrderMode}
+        .reOrderMode=${this.reOrderMode}
       ></ha-automation-condition>
 
       <div class="header">
@@ -134,13 +138,6 @@ export class HaManualAutomationEditor extends LitElement {
           )}
         </h2>
         <div>
-          <ha-icon-button
-            .path=${this._reOrderMode ? mdiTextBoxEdit : mdiSort}
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.actions.re_order"
-            )}
-            @click=${this._toggleReOrderMode}
-          ></ha-icon-button>
           <a
             href=${documentationUrl(this.hass, "/docs/automation/action/")}
             target="_blank"
@@ -163,11 +160,15 @@ export class HaManualAutomationEditor extends LitElement {
         @value-changed=${this._actionChanged}
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .reOrderMode=${this._reOrderMode}
+        .reOrderMode=${this.reOrderMode}
       ></ha-automation-action>
     `;
   }
 
+  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;
+        }
       `,
     ];
   }

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",