jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +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

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

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

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

@ -197,7 +197,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
${this.narrow ${this.narrow
? html` <span slot="header">${this._config?.alias}</span> ` ? html` <span slot="header">${this._config?.alias}</span> `
: ""} : ""}
<div class="content"> <div
class="content ${classMap({
"yaml-mode": this._mode === "yaml",
})}"
>
${this._errors ${this._errors
? html` <div class="errors">${this._errors}</div> ` ? html` <div class="errors">${this._errors}</div> `
: ""} : ""}
@ -223,52 +227,52 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
` `
: this._mode === "yaml" : this._mode === "yaml"
? html` ? html`
<ha-config-section .isWide=${false}> ${!this.narrow
${!this.narrow ? html`
? html` <ha-card
<span slot="header">${this._config.alias}</span> ><div class="card-header">
` ${this._config.alias}
: ``} </div>
<ha-card> ${stateObj
<div class="card-content"> ? html`
<ha-yaml-editor <div
.defaultValue=${this._preprocessYaml()} class="card-actions layout horizontal justified center"
@value-changed=${this._yamlChanged} >
></ha-yaml-editor> <ha-entity-toggle
<mwc-button @click=${this._copyYaml}> .hass=${this.hass}
${this.hass.localize( .stateObj=${stateObj}
"ui.panel.config.automation.editor.copy_to_clipboard" .label=${this.hass.localize(
)} "ui.panel.config.automation.editor.enable_disable"
</mwc-button> )}
</div> ></ha-entity-toggle>
${stateObj
? html` <mwc-button
<div @click=${this._runActions}
class="card-actions layout horizontal justified center" .stateObj=${stateObj}
> >
<div class="layout horizontal center"> ${this.hass.localize(
<ha-entity-toggle "ui.card.automation.trigger"
.hass=${this.hass} )}
.stateObj=${stateObj} </mwc-button>
></ha-entity-toggle> </div>
${this.hass.localize( `
"ui.panel.config.automation.editor.enable_disable" : ""}
)} </ha-card>
</div> `
<mwc-button : ``}
@click=${this._runActions} <ha-yaml-editor
.stateObj=${stateObj} .defaultValue=${this._preprocessYaml()}
> @value-changed=${this._yamlChanged}
${this.hass.localize( ></ha-yaml-editor>
"ui.card.automation.trigger" <ha-card
)} ><div class="card-actions">
</mwc-button> <mwc-button @click=${this._copyYaml}>
</div> ${this.hass.localize(
` "ui.panel.config.automation.editor.copy_to_clipboard"
: ""} )}
</ha-card> </mwc-button>
<ha-config-section> </ha-config-section </div>
></ha-config-section> </ha-card>
` `
: ``} : ``}
</div> </div>
@ -531,6 +535,22 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.content { .content {
padding-bottom: 20px; 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 { p {
margin-bottom: 0; margin-bottom: 0;
} }