mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Bring reorder mode to script sequence (#13636)
This commit is contained in:
Paul Bottein
GitHub
parent
57c5c1c191
commit
3e9d6ea2c5
@ -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;
|
||||
|
||||
@ -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
|
||||
corner="BOTTOM_START"
|
||||
slot="toolbar-icon"
|
||||
@action=${this._handleMenuAction}
|
||||
activatable
|
||||
>
|
||||
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
|
||||
<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">
|
||||
<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}
|
||||
></ha-automation-action>
|
||||
</div>
|
||||
<manual-script-editor
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
.config=${this._config}
|
||||
@value-changed=${this._configChanged}
|
||||
></manual-script-editor>
|
||||
`}
|
||||
`
|
||||
: ""}
|
||||
@ -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) {
|
||||
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<ActionDetail>) {
|
||||
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;
|
||||
|
||||
135
src/panels/config/script/manual-script-editor.ts
Normal file
135
src/panels/config/script/manual-script-editor.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user