jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve blueprint editor layout (#13564)

Browse Source
This commit is contained in:
Paul Bottein 2022-09-02 19:02:36 +02:00 committed by GitHub
parent efa4f65686
commit 320d8e6190
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-button/mwc-button";
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-blueprint-picker";
@ -34,8 +34,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
@state() private _blueprints?: Blueprints;
@state() private _showDescription = false;
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
this._getBlueprints();
@ -48,55 +46,28 @@ export class HaBlueprintAutomationEditor extends LitElement {
return this._blueprints[this.config.use_blueprint.path];
}
protected willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (
!this._showDescription &&
changedProps.has("config") &&
this.config.description
) {
this._showDescription = true;
}
}
protected render() {
const blueprint = this._blueprint;
return html`
<ha-config-section vertical .isWide=${this.isWide}>
<span slot="introduction">
${this.hass.localize(
"ui.panel.config.automation.editor.introduction"
)}
</span>
<ha-card outlined>
<div class="card-content">
${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>
`}
</div>
</ha-card>
</ha-config-section>
<p class="introduction">
${this.hass.localize("ui.panel.config.automation.editor.introduction")}
</p>
<ha-card outlined>
<div class="card-content">
<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>
</div>
</ha-card>
<ha-card
outlined
@ -243,16 +214,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
});
}
private _addDescription() {
this._showDescription = true;
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
:host {
display: block;
}
ha-card.blueprint {
max-width: 1040px;
margin: 24px auto;
}
.padding {
@ -272,7 +241,11 @@ export class HaBlueprintAutomationEditor extends LitElement {
h3 {
margin: 16px;
}
span[slot="introduction"] a {
.introduction {
margin-top: 0;
margin-bottom: 12px;
}
.introduction a {
color: var(--primary-color);
}
p {

3
src/panels/config/automation/ha-automation-editor.ts
View File

@ -657,7 +657,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
flex-direction: column;
padding-bottom: 0;
}
manual-automation-editor {
manual-automation-editor,
blueprint-automation-editor {
margin: 0 auto;
max-width: 1040px;
padding: 28px 20px 0;