From 3e9d6ea2c507b1bb117ef1096682709184ee2a93 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 7 Sep 2022 14:25:06 +0200 Subject: [PATCH] Bring reorder mode to script sequence (#13636) --- .../automation/manual-automation-editor.ts | 43 ------ src/panels/config/script/ha-script-editor.ts | 123 +++++++--------- .../config/script/manual-script-editor.ts | 135 ++++++++++++++++++ 3 files changed, 189 insertions(+), 112 deletions(-) create mode 100644 src/panels/config/script/manual-script-editor.ts diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index ebe14f3e1d..d13d54ae34 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/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; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 171acbf5a3..96bef07c53 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/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} > - + + ${this._config && !("use_blueprint" in this._config) + ? html` + + ${this.hass.localize( + "ui.panel.config.automation.editor.re_order" + )} + + + ` + : ""} + +
  • + ${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")} ${this.hass.localize("ui.panel.config.script.picker.delete")} ` : html` -
    -
    -

    - ${this.hass.localize( - "ui.panel.config.script.editor.sequence" - )} -

    - - - -
    - - -
    + `} ` : ""} @@ -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 { - 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"), }); @@ -719,20 +707,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) { history.back(); } - private async _handleMenuAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: - this._mode = "gui"; - break; - case 1: - this._mode = "yaml"; - break; - case 2: - this._duplicate(); - break; - case 3: - this._deleteConfirm(); - break; + private _switchUiMode() { + this._mode = "gui"; + } + + private _switchYamlMode() { + this._mode = "yaml"; + } + + private _toggleReOrderMode() { + if (this._manualEditor) { + this._manualEditor.reOrderMode = !this._manualEditor.reOrderMode; } } @@ -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; diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts new file mode 100644 index 0000000000..413abf862e --- /dev/null +++ b/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` + + ${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.script.editor.sequence")} +

    + + + +
    + + + `; + } + + 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; + } +}