Change layout of automation yaml editor (#8560)

src/components/entity/ha-entity-toggle.ts

@@ -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`
+    const switchTemplate = html`<ha-switch
-      <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>
     `;
   }
 

src/panels/config/automation/ha-automation-editor.ts

@@ -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-header">
-                          : ``}
+                                ${this._config.alias}
-                        <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>
                               </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>
+                                        .label=${this.hass.localize(
-                                    ${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;
         }