Bring reorder mode to script sequence (#13636)

src/panels/config/automation/manual-automation-editor.ts

@@ -4,12 +4,9 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 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,
@@ -215,23 +212,12 @@ export class HaManualAutomationEditor extends LitElement {
         ha-card {
           overflow: hidden;
         }
-        .link-button-row {
-          padding: 14px;
-        }
         .description {
           margin: 0;
         }
         p {
           margin-bottom: 0;
         }
-        ha-entity-toggle {
-          margin-right: 8px;
-        }
-        ha-select,
-        .max {
-          margin-top: 16px;
-          width: 200px;
-        }
         .header {
           display: flex;
           align-items: center;
@@ -247,35 +233,6 @@ export class HaManualAutomationEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
-        h3 {
-          margin: 0;
-          font-size: inherit;
-          font-weight: inherit;
-        }
-        ha-expansion-panel {
-          --expansion-panel-summary-padding: 0 0 0 8px;
-          --expansion-panel-content-padding: 0;
-        }
-        .card-content {
-          padding: 16px;
-        }
-        .settings-icon {
-          display: none;
-        }
-        @media (min-width: 870px) {
-          .settings-icon {
-            display: inline-block;
-            color: var(--secondary-text-color);
-            opacity: 0.9;
-            margin-right: 8px;
-          }
-        }
-        .disabled-bar {
-          background: var(--divider-color, #e0e0e0);
-          text-align: center;
-          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/panels/config/script/ha-script-editor.ts

@@ -1,4 +1,3 @@
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import {
   mdiCheck,
@@ -6,7 +5,7 @@ import {
   mdiContentSave,
   mdiDelete,
   mdiDotsVertical,
-  mdiHelpCircle,
+  mdiSort,
 } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
@@ -38,7 +37,6 @@ import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
-  Action,
   deleteScript,
   getScriptConfig,
   getScriptEditorInitData,
@@ -59,6 +57,8 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
 import "./blueprint-script-editor";
+import "./manual-script-editor";
+import type { HaManualScriptEditor } from "./manual-script-editor";
 
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -83,7 +83,10 @@ export class HaScriptEditor 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-script-editor")
+  private _manualEditor?: HaManualScriptEditor;
 
   private _schema = memoizeOne(
     (
@@ -175,23 +178,39 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         .backCallback=${this._backTapped}
         .header=${!this._config?.alias ? "" : this._config.alias}
       >
-        <ha-button-menu
+        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-          corner="BOTTOM_START"
-          slot="toolbar-icon"
-          @action=${this._handleMenuAction}
-          activatable
-        >
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
+          ${this._config && !("use_blueprint" in this._config)
+            ? html`
+                <mwc-list-item
+                  aria-label=${this.hass.localize(
+                    "ui.panel.config.automation.editor.re_order"
+                  )}
+                  graphic="icon"
+                  .disabled=${this._mode !== "gui"}
+                  @click=${this._toggleReOrderMode}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.re_order"
+                  )}
+                  <ha-svg-icon slot="graphic" .path=${mdiSort}></ha-svg-icon>
+                </mwc-list-item>
+              `
+            : ""}
+
+          <li divider role="separator"></li>
+
           <mwc-list-item
             aria-label=${this.hass.localize(
               "ui.panel.config.automation.editor.edit_ui"
             )}
             graphic="icon"
+            @click=${this._switchUiMode}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
@@ -209,6 +228,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               "ui.panel.config.automation.editor.edit_yaml"
             )}
             graphic="icon"
+            @click=${this._switchYamlMode}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
@@ -230,6 +250,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               "ui.panel.config.script.picker.duplicate"
             )}
             graphic="icon"
+            @click=${this._duplicate}
           >
             ${this.hass.localize("ui.panel.config.script.picker.duplicate")}
             <ha-svg-icon
@@ -245,6 +266,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             )}
             class=${classMap({ warning: Boolean(this.scriptEntityId) })}
             graphic="icon"
+            @click=${this._deleteConfirm}
           >
             ${this.hass.localize("ui.panel.config.script.picker.delete")}
             <ha-svg-icon
@@ -325,38 +347,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               ></blueprint-script-editor>
                             `
                           : html`
-                              <div class="sequence-container">
+                              <manual-script-editor
-                                <div class="header">
+                                .hass=${this.hass}
-                                  <h2 id="sequence-heading" class="name">
+                                .narrow=${this.narrow}
-                                    ${this.hass.localize(
+                                .isWide=${this.isWide}
-                                      "ui.panel.config.script.editor.sequence"
+                                .config=${this._config}
-                                    )}
+                                @value-changed=${this._configChanged}
-                                  </h2>
+                              ></manual-script-editor>
-                                  <a
-                                    href=${documentationUrl(
-                                      this.hass,
-                                      "/docs/scripts/"
-                                    )}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                  >
-                                    <ha-icon-button
-                                      .path=${mdiHelpCircle}
-                                      .label=${this.hass.localize(
-                                        "ui.panel.config.script.editor.link_available_actions"
-                                      )}
-                                    ></ha-icon-button>
-                                  </a>
-                                </div>
-
-                                <ha-automation-action
-                                  role="region"
-                                  aria-labelledby="sequence-heading"
-                                  .actions=${this._config.sequence}
-                                  @value-changed=${this._sequenceChanged}
-                                  .hass=${this.hass}
-                                ></ha-automation-action>
-                              </div>
                             `}
                       `
                     : ""}
@@ -629,22 +626,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
-  private _sequenceChanged(ev: CustomEvent): void {
-    this._config = {
-      ...this._config!,
-      sequence: ev.detail.value as Action[],
-    };
-    this._errors = undefined;
-    this._dirty = true;
-  }
-
   private _preprocessYaml() {
     return this._config;
   }
 
   private async _copyYaml(): Promise<void> {
-    if (this._editor?.yaml) {
+    if (this._yamlEditor?.yaml) {
-      await copyToClipboard(this._editor.yaml);
+      await copyToClipboard(this._yamlEditor.yaml);
       showToast(this, {
         message: this.hass.localize("ui.common.copied_clipboard"),
       });
@@ -719,20 +707,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     history.back();
   }
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+  private _switchUiMode() {
-    switch (ev.detail.index) {
+    this._mode = "gui";
-      case 0:
+  }
-        this._mode = "gui";
+
-        break;
+  private _switchYamlMode() {
-      case 1:
+    this._mode = "yaml";
-        this._mode = "yaml";
+  }
-        break;
+
-      case 2:
+  private _toggleReOrderMode() {
-        this._duplicate();
+    if (this._manualEditor) {
-        break;
+      this._manualEditor.reOrderMode = !this._manualEditor.reOrderMode;
-      case 3:
-        this._deleteConfirm();
-        break;
     }
   }
 
@@ -797,9 +782,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           flex-direction: column;
           padding-bottom: 0;
         }
-        blueprint-script-editor,
         .config-container,
-        .sequence-container {
+        manual-script-editor,
+        blueprint-script-editor {
           margin: 0 auto;
           max-width: 1040px;
           padding: 28px 20px 0;

src/panels/config/script/manual-script-editor.ts

@@ -0,0 +1,135 @@
+import "@material/mwc-button/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-alert";
+import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
+import { Action, ScriptConfig } from "../../../data/script";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
+import "../automation/action/ha-automation-action";
+
+@customElement("manual-script-editor")
+export class HaManualScriptEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public isWide!: boolean;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public config!: ScriptConfig;
+
+  @property({ type: Boolean, reflect: true, attribute: "re-order-mode" })
+  public reOrderMode = false;
+
+  protected render() {
+    return html`
+      ${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="sequence-heading" class="name">
+          ${this.hass.localize("ui.panel.config.script.editor.sequence")}
+        </h2>
+        <a
+          href=${documentationUrl(this.hass, "/docs/scripts/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ha-icon-button
+            .path=${mdiHelpCircle}
+            .label=${this.hass.localize(
+              "ui.panel.config.script.editor.link_available_actions"
+            )}
+          ></ha-icon-button>
+        </a>
+      </div>
+
+      <ha-automation-action
+        role="region"
+        aria-labelledby="sequence-heading"
+        .actions=${this.config.sequence}
+        @value-changed=${this._sequenceChanged}
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .reOrderMode=${this.reOrderMode}
+      ></ha-automation-action>
+    `;
+  }
+
+  private _sequenceChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: { ...this.config!, sequence: ev.detail.value as Action[] },
+    });
+  }
+
+  private _exitReOrderMode() {
+    this.reOrderMode = !this.reOrderMode;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          overflow: hidden;
+        }
+        .description {
+          margin: 0;
+        }
+        p {
+          margin-bottom: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header:first-child {
+          margin-top: -16px;
+        }
+        .header .name {
+          font-size: 20px;
+          font-weight: 400;
+          flex: 1;
+        }
+        .header a {
+          color: var(--secondary-text-color);
+        }
+        ha-alert {
+          display: block;
+          margin-bottom: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "manual-script-editor": HaManualScriptEditor;
+  }
+}