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

Change layout of automation yaml editor (#8560)

Browse Source
This commit is contained in:
Bram Kragten 2021-03-09 11:21:59 +01:00 committed by GitHub
parent 9560a1c4a7
commit 9ec4e083d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 84 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/entity/ha-entity-toggle.ts
View File

@ -17,6 +17,7 @@ import { forwardHaptic } from "../../data/haptics";
import { HomeAssistant } from "../../types";
import "../ha-icon-button";
import "../ha-switch";
import "../ha-formfield";
const isOn = (stateObj?: HassEntity) =>
stateObj !== undefined &&
@ -29,6 +30,8 @@ export class HaEntityToggle extends LitElement {
@property() public stateObj?: HassEntity;
@property() public label?: string;
@internalProperty() private _isOn = false;
protected render(): TemplateResult {
@ -55,15 +58,21 @@ export class HaEntityToggle extends LitElement {
`;
}
return html`
<ha-switch
const switchTemplate = html`<ha-switch
aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
this._isOn ? "off" : "on"
}`}
.checked=${this._isOn}
.disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@change=${this._toggleChanged}
></ha-switch>
></ha-switch>`;
if (!this.label) {
return switchTemplate;
}
return html`
<ha-formfield .label=${this.label}>${switchTemplate}</ha-formfield>
`;
}

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

@ -197,7 +197,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
${this.narrow
? html` <span slot="header">${this._config?.alias}</span> `
: ""}
<div class="content">
<div
class="content ${classMap({
"yaml-mode": this._mode === "yaml",
})}"
>
${this._errors
? html` <div class="errors">${this._errors}</div> `
: ""}
@ -223,38 +227,25 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
`
: this._mode === "yaml"
? html`
<ha-config-section .isWide=${false}>
${!this.narrow
? html`
<span slot="header">${this._config.alias}</span>
`
: ``}
<ha-card>
<div class="card-content">
<ha-yaml-editor
.defaultValue=${this._preprocessYaml()}
@value-changed=${this._yamlChanged}
></ha-yaml-editor>
<mwc-button @click=${this._copyYaml}>
${this.hass.localize(
"ui.panel.config.automation.editor.copy_to_clipboard"
)}
</mwc-button>
<ha-card
><div class="card-header">
${this._config.alias}
</div>
${stateObj
? html`
<div
class="card-actions layout horizontal justified center"
>
<div class="layout horizontal center">
<ha-entity-toggle
.hass=${this.hass}
.stateObj=${stateObj}
></ha-entity-toggle>
${this.hass.localize(
.label=${this.hass.localize(
"ui.panel.config.automation.editor.enable_disable"
)}
</div>
></ha-entity-toggle>
<mwc-button
@click=${this._runActions}
.stateObj=${stateObj}
@ -267,8 +258,21 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
`
: ""}
</ha-card>
<ha-config-section> </ha-config-section
></ha-config-section>
`
: ``}
<ha-yaml-editor
.defaultValue=${this._preprocessYaml()}
@value-changed=${this._yamlChanged}
></ha-yaml-editor>
<ha-card
><div class="card-actions">
<mwc-button @click=${this._copyYaml}>
${this.hass.localize(
"ui.panel.config.automation.editor.copy_to_clipboard"
)}
</mwc-button>
</div>
</ha-card>
`
: ``}
</div>
@ -531,6 +535,22 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.content {
padding-bottom: 20px;
}
.yaml-mode {
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 0;
}
ha-yaml-editor {
flex-grow: 1;
--code-mirror-height: 100%;
min-height: 0;
}
.yaml-mode ha-card {
overflow: initial;
--ha-card-border-radius: 0;
border-bottom: 1px solid var(--divider-color);
}
p {
margin-bottom: 0;
}