Skip to content

Commit

Permalink
Store height and width of dialog, autofocus searchbar (#19122)
Browse files Browse the repository at this point in the history
  • Loading branch information
bramkragten authored Dec 22, 2023
1 parent 61b04a8 commit 68ecb7c
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 41 deletions.
46 changes: 26 additions & 20 deletions src/panels/config/automation/action/ha-automation-action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -119,26 +119,27 @@ export default class HaAutomationAction extends LitElement {
`
)}
</div>
<ha-button
slot="trigger"
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add"
)}
@click=${this._addActionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block"
)}
@click=${this._addActionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<div class="buttons">
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add"
)}
@click=${this._addActionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block"
)}
@click=${this._addActionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
`;
}

Expand Down Expand Up @@ -325,6 +326,11 @@ export default class HaAutomationAction extends LitElement {
pointer-events: none;
height: 24px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
`,
];
}
Expand Down
30 changes: 28 additions & 2 deletions src/panels/config/automation/add-automation-element-dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../../../common/dom/fire_event";
import { domainIcon } from "../../../common/entity/domain_icon";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
Expand Down Expand Up @@ -93,6 +94,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {

@query("ha-dialog") private _dialog?: HaDialog;

private _width?: number;

private _height?: number;

public showDialog(params): void {
this._params = params;
this._group = params.group;
Expand All @@ -106,6 +111,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
if (this._params) {
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
this._height = undefined;
this._width = undefined;
this._params = undefined;
this._group = undefined;
this._prev = undefined;
Expand Down Expand Up @@ -349,6 +356,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
this._manifests = manifests;
}

protected _opened(): void {
// Store the width and height so that when we search, box doesn't jump
const boundingRect =
this.shadowRoot!.querySelector("mwc-list")?.getBoundingClientRect();
this._width = boundingRect?.width;
this._height = boundingRect?.height;
}

protected render() {
if (!this._params) {
return nothing;
Expand Down Expand Up @@ -383,7 +398,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
);

return html`
<ha-dialog open hideActions @closed=${this.closeDialog} .heading=${true}>
<ha-dialog
open
hideActions
@opened=${this._opened}
@closed=${this.closeDialog}
.heading=${true}
>
<div slot="heading">
<ha-header-bar>
<span slot="title"
Expand All @@ -405,6 +426,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
></ha-icon-button>`}
</ha-header-bar>
<search-input
autofocus
dialogInitialFocus
.hass=${this.hass}
.filter=${this._filter}
@value-changed=${this._filterChanged}
Expand All @@ -422,7 +445,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
innerRole="listbox"
itemRoles="option"
rootTabbable
dialogInitialFocus
style=${styleMap({
width: `${this._width}px`,
height: `${this._height}px`,
})}
>
${this._params.clipboardItem &&
!this._filter &&
Expand Down
45 changes: 26 additions & 19 deletions src/panels/config/automation/condition/ha-automation-condition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -175,25 +175,27 @@ export default class HaAutomationCondition extends LitElement {
`
)}
</div>
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add"
)}
@click=${this._addConditionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add_building_block"
)}
@click=${this._addConditionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<div class="buttons">
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add"
)}
@click=${this._addConditionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add_building_block"
)}
@click=${this._addConditionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
`;
}

Expand Down Expand Up @@ -363,6 +365,11 @@ export default class HaAutomationCondition extends LitElement {
pointer-events: none;
height: 24px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
`,
];
}
Expand Down

0 comments on commit 68ecb7c

Please sign in to comment.