Put button menu above toolbar in automation editor (#16716)

home-assistant · Jun 1, 2023 · efa02c3 · efa02c3
1 parent 9b2e77e
commit efa02c3
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 39 deletions.
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -191,6 +191,7 @@ export default class HaAutomationActionRow extends LitElement {
                   slot="icons"
                   @action=${this._handleAction}
                   @click=${preventDefault}
+                  fixed
                 >
                   <ha-icon-button
                     slot="trigger"

diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
@@ -147,7 +147,11 @@ export default class HaAutomationAction extends LitElement {
           `
         )}
       </div>
-      <ha-button-menu @action=${this._addAction} .disabled=${this.disabled}>
+      <ha-button-menu
+        @action=${this._addAction}
+        .disabled=${this.disabled}
+        fixed
+      >
         <ha-button
           slot="trigger"
           outlined

diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -130,6 +130,7 @@ export default class HaAutomationConditionRow extends LitElement {
                   slot="icons"
                   @action=${this._handleAction}
                   @click=${preventDefault}
+                  fixed
                 >
                   <ha-icon-button
                     slot="trigger"

diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -191,7 +191,11 @@ export default class HaAutomationCondition extends LitElement {
           `
         )}
       </div>
-      <ha-button-menu @action=${this._addCondition} .disabled=${this.disabled}>
+      <ha-button-menu
+        @action=${this._addCondition}
+        .disabled=${this.disabled}
+        fixed
+      >
         <ha-button
           slot="trigger"
           outlined

diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -153,6 +153,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                   slot="icons"
                   @action=${this._handleAction}
                   @click=${preventDefault}
+                  fixed
                 >
                   <ha-icon-button
                     slot="trigger"

diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -75,27 +75,25 @@ export default class HaAutomationTrigger extends LitElement {
 
   protected render() {
     return html`
-      ${
-        this.reOrderMode && !this.nested
-          ? html`
-              <ha-alert
-                alert-type="info"
-                .title=${this.hass.localize(
-                  "ui.panel.config.automation.editor.re_order_mode.title"
-                )}
-              >
+      ${this.reOrderMode && !this.nested
+        ? html`
+            <ha-alert
+              alert-type="info"
+              .title=${this.hass.localize(
+                "ui.panel.config.automation.editor.re_order_mode.title"
+              )}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.re_order_mode.description_triggers"
+              )}
+              <mwc-button slot="action" @click=${this._exitReOrderMode}>
                 ${this.hass.localize(
-                  "ui.panel.config.automation.editor.re_order_mode.description_triggers"
+                  "ui.panel.config.automation.editor.re_order_mode.exit"
                 )}
-                <mwc-button slot="action" @click=${this._exitReOrderMode}>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.re_order_mode.exit"
-                  )}
-                </mwc-button>
-              </ha-alert>
-            `
-          : null
-      }
+              </mwc-button>
+            </ha-alert>
+          `
+        : null}
       <div class="triggers">
         ${repeat(
           this.triggers,
@@ -141,8 +139,11 @@ export default class HaAutomationTrigger extends LitElement {
             </ha-automation-trigger-row>
           `
         )}
-        </div>
-        <ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
+        <ha-button-menu
+          @action=${this._addTrigger}
+          .disabled=${this.disabled}
+          fixed
+        >
           <ha-button
             slot="trigger"
             outlined
@@ -153,22 +154,20 @@ export default class HaAutomationTrigger extends LitElement {
           >
             <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
           </ha-button>
-          ${
-            this.clipboard?.trigger
-              ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.triggers.paste"
-                  )}
-                  (${this.hass.localize(
-                    `ui.panel.config.automation.editor.triggers.type.${this.clipboard.trigger.platform}.label`
-                  )})
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiContentPaste}
-                  ></ha-svg-icon
-                ></mwc-list-item>`
-              : nothing
-          }
+          ${this.clipboard?.trigger
+            ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.triggers.paste"
+                )}
+                (${this.hass.localize(
+                  `ui.panel.config.automation.editor.triggers.type.${this.clipboard.trigger.platform}.label`
+                )})
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentPaste}
+                ></ha-svg-icon
+              ></mwc-list-item>`
+            : nothing}
           ${this._processedTypes(this.hass.localize).map(
             ([opt, label, icon]) => html`
               <mwc-list-item .value=${opt} graphic="icon">