Bring reorder mode to script sequence (#13636)

This commit is contained in:
Paul Bottein 2022-09-07 14:25:06 +02:00 committed by GitHub
parent 57c5c1c191
commit 3e9d6ea2c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 189 additions and 112 deletions

View File

@ -4,12 +4,9 @@ import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit"; import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-textarea";
import "../../../components/ha-textfield";
import { import {
Condition, Condition,
ManualAutomationConfig, ManualAutomationConfig,
@ -215,23 +212,12 @@ export class HaManualAutomationEditor extends LitElement {
ha-card { ha-card {
overflow: hidden; overflow: hidden;
} }
.link-button-row {
padding: 14px;
}
.description { .description {
margin: 0; margin: 0;
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
ha-entity-toggle {
margin-right: 8px;
}
ha-select,
.max {
margin-top: 16px;
width: 200px;
}
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -247,35 +233,6 @@ export class HaManualAutomationEditor extends LitElement {
.header a { .header a {
color: var(--secondary-text-color); 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 { ha-alert {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;

View File

@ -1,4 +1,3 @@
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import { import {
mdiCheck, mdiCheck,
@ -6,7 +5,7 @@ import {
mdiContentSave, mdiContentSave,
mdiDelete, mdiDelete,
mdiDotsVertical, mdiDotsVertical,
mdiHelpCircle, mdiSort,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/app-layout/app-toolbar/app-toolbar";
@ -38,7 +37,6 @@ import "../../../components/ha-svg-icon";
import "../../../components/ha-yaml-editor"; import "../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
import { import {
Action,
deleteScript, deleteScript,
getScriptConfig, getScriptConfig,
getScriptEditorInitData, getScriptEditorInitData,
@ -59,6 +57,8 @@ import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast"; import { showToast } from "../../../util/toast";
import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id"; import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
import "./blueprint-script-editor"; import "./blueprint-script-editor";
import "./manual-script-editor";
import type { HaManualScriptEditor } from "./manual-script-editor";
export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) { export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -83,7 +83,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
@state() private _mode: "gui" | "yaml" = "gui"; @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( private _schema = memoizeOne(
( (
@ -175,23 +178,39 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
.backCallback=${this._backTapped} .backCallback=${this._backTapped}
.header=${!this._config?.alias ? "" : this._config.alias} .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 <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></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 <mwc-list-item
aria-label=${this.hass.localize( aria-label=${this.hass.localize(
"ui.panel.config.automation.editor.edit_ui" "ui.panel.config.automation.editor.edit_ui"
)} )}
graphic="icon" graphic="icon"
@click=${this._switchUiMode}
> >
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")} ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
${this._mode === "gui" ${this._mode === "gui"
@ -209,6 +228,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
"ui.panel.config.automation.editor.edit_yaml" "ui.panel.config.automation.editor.edit_yaml"
)} )}
graphic="icon" graphic="icon"
@click=${this._switchYamlMode}
> >
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")} ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
${this._mode === "yaml" ${this._mode === "yaml"
@ -230,6 +250,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
"ui.panel.config.script.picker.duplicate" "ui.panel.config.script.picker.duplicate"
)} )}
graphic="icon" graphic="icon"
@click=${this._duplicate}
> >
${this.hass.localize("ui.panel.config.script.picker.duplicate")} ${this.hass.localize("ui.panel.config.script.picker.duplicate")}
<ha-svg-icon <ha-svg-icon
@ -245,6 +266,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
)} )}
class=${classMap({ warning: Boolean(this.scriptEntityId) })} class=${classMap({ warning: Boolean(this.scriptEntityId) })}
graphic="icon" graphic="icon"
@click=${this._deleteConfirm}
> >
${this.hass.localize("ui.panel.config.script.picker.delete")} ${this.hass.localize("ui.panel.config.script.picker.delete")}
<ha-svg-icon <ha-svg-icon
@ -325,38 +347,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
></blueprint-script-editor> ></blueprint-script-editor>
` `
: html` : 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; 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() { private _preprocessYaml() {
return this._config; return this._config;
} }
private async _copyYaml(): Promise<void> { 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, { showToast(this, {
message: this.hass.localize("ui.common.copied_clipboard"), message: this.hass.localize("ui.common.copied_clipboard"),
}); });
@ -719,20 +707,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
history.back(); 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; flex-direction: column;
padding-bottom: 0; padding-bottom: 0;
} }
blueprint-script-editor,
.config-container, .config-container,
.sequence-container { manual-script-editor,
blueprint-script-editor {
margin: 0 auto; margin: 0 auto;
max-width: 1040px; max-width: 1040px;
padding: 28px 20px 0; padding: 28px 20px 0;

View File

@ -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;
}
}