diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 3fd2d8c915..b0df97fbfc 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -1,7 +1,7 @@ import "@material/mwc-button/mwc-button"; import { HassEntity } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement } from "lit"; -import { customElement, property } from "lit/decorators"; +import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/entity/ha-entity-toggle"; import "../../../components/ha-card"; @@ -34,6 +34,8 @@ export class HaManualAutomationEditor extends LitElement { @property() public stateObj?: HassEntity; + @state() private _showDescription = false; + protected render() { return html` ${!this.narrow @@ -55,17 +57,30 @@ export class HaManualAutomationEditor extends LitElement { @change=${this._valueChanged} > - + ${this._showDescription + ? html` + + ` + : html` + + `}

${this.hass.localize( "ui.panel.config.automation.editor.modes.description", @@ -235,6 +250,17 @@ export class HaManualAutomationEditor extends LitElement { `; } + protected willUpdate(changedProps: PropertyValues): void { + super.willUpdate(changedProps); + if ( + !this._showDescription && + changedProps.has("config") && + this.config.description + ) { + this._showDescription = true; + } + } + private _runActions(ev: Event) { triggerAutomationActions(this.hass, (ev.target as any).stateObj.entity_id); } @@ -305,6 +331,10 @@ export class HaManualAutomationEditor extends LitElement { }); } + private _addDescription() { + this._showDescription = true; + } + static get styles(): CSSResultGroup { return [ haStyle, @@ -312,6 +342,12 @@ export class HaManualAutomationEditor extends LitElement { ha-card { overflow: hidden; } + .link-button-row { + padding: 14px; + } + ha-textarea { + display: block; + } span[slot="introduction"] a { color: var(--primary-color); } diff --git a/src/translations/en.json b/src/translations/en.json index 36998964a5..7e214663dd 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1593,7 +1593,8 @@ "move_down": "Move down", "description": { "label": "Description", - "placeholder": "Optional description" + "placeholder": "Optional description", + "add": "Add description" }, "blueprint": { "header": "Blueprint",