Only show description when set (#11772)

This commit is contained in:
Paulus Schoutsen 2022-02-22 00:57:56 -08:00 committed by GitHub
parent b1f369a355
commit d230541256
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 14 deletions

View File

@ -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`<ha-config-section vertical .isWide=${this.isWide}>
${!this.narrow
@ -55,17 +57,30 @@ export class HaManualAutomationEditor extends LitElement {
@change=${this._valueChanged}
>
</ha-textfield>
<ha-textarea
.label=${this.hass.localize(
"ui.panel.config.automation.editor.description.label"
)}
.placeholder=${this.hass.localize(
"ui.panel.config.automation.editor.description.placeholder"
)}
name="description"
.value=${this.config.description || ""}
@change=${this._valueChanged}
></ha-textarea>
${this._showDescription
? html`
<ha-textarea
.label=${this.hass.localize(
"ui.panel.config.automation.editor.description.label"
)}
.placeholder=${this.hass.localize(
"ui.panel.config.automation.editor.description.placeholder"
)}
name="description"
autogrow
.value=${this.config.description || ""}
@change=${this._valueChanged}
></ha-textarea>
`
: html`
<div class="link-button-row">
<button class="link" @click=${this._addDescription}>
${this.hass.localize(
"ui.panel.config.automation.editor.description.add"
)}
</button>
</div>
`}
<p>
${this.hass.localize(
"ui.panel.config.automation.editor.modes.description",
@ -235,6 +250,17 @@ export class HaManualAutomationEditor extends LitElement {
</ha-config-section>`;
}
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);
}

View File

@ -1593,7 +1593,8 @@
"move_down": "Move down",
"description": {
"label": "Description",
"placeholder": "Optional description"
"placeholder": "Optional description",
"add": "Add description"
},
"blueprint": {
"header": "Blueprint",