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

Store height and width of dialog, autofocus searchbar (#19122)

Browse Source
This commit is contained in:
Bram Kragten 2023-12-23 00:03:52 +01:00 committed by GitHub
parent 61b04a882b
commit 68ecb7c219
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/panels/config/automation/action/ha-automation-action.ts
View File

@ -119,26 +119,27 @@ export default class HaAutomationAction extends LitElement {
` `
)} )}
</div> </div>
<ha-button <div class="buttons">
slot="trigger" <ha-button
outlined outlined
.disabled=${this.disabled} .disabled=${this.disabled}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add" "ui.panel.config.automation.editor.actions.add"
)} )}
@click=${this._addActionDialog} @click=${this._addActionDialog}
> >
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button> </ha-button>
<ha-button <ha-button
.disabled=${this.disabled} .disabled=${this.disabled}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block" "ui.panel.config.automation.editor.actions.add_building_block"
)} )}
@click=${this._addActionBuildingBlockDialog} @click=${this._addActionBuildingBlockDialog}
> >
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button> </ha-button>
</div>
`; `;
} }
@ -325,6 +326,11 @@ export default class HaAutomationAction extends LitElement {
pointer-events: none; pointer-events: none;
height: 24px; height: 24px;
} }
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
`, `,
]; ];
} }

30
src/panels/config/automation/add-automation-element-dialog.ts
View File

@ -5,6 +5,7 @@ import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { domainIcon } from "../../../common/entity/domain_icon"; import { domainIcon } from "../../../common/entity/domain_icon";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event"; import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
@ -93,6 +94,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
@query("ha-dialog") private _dialog?: HaDialog; @query("ha-dialog") private _dialog?: HaDialog;
private _width?: number;
private _height?: number;
public showDialog(params): void { public showDialog(params): void {
this._params = params; this._params = params;
this._group = params.group; this._group = params.group;
@ -106,6 +111,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
if (this._params) { if (this._params) {
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
this._height = undefined;
this._width = undefined;
this._params = undefined; this._params = undefined;
this._group = undefined; this._group = undefined;
this._prev = undefined; this._prev = undefined;
@ -349,6 +356,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
this._manifests = manifests; 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() { protected render() {
if (!this._params) { if (!this._params) {
return nothing; return nothing;
@ -383,7 +398,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
); );
return html` 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"> <div slot="heading">
<ha-header-bar> <ha-header-bar>
<span slot="title" <span slot="title"
@ -405,6 +426,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
></ha-icon-button>`} ></ha-icon-button>`}
</ha-header-bar> </ha-header-bar>
<search-input <search-input
autofocus
dialogInitialFocus
.hass=${this.hass} .hass=${this.hass}
.filter=${this._filter} .filter=${this._filter}
@value-changed=${this._filterChanged} @value-changed=${this._filterChanged}
@ -422,7 +445,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
innerRole="listbox" innerRole="listbox"
itemRoles="option" itemRoles="option"
rootTabbable rootTabbable
dialogInitialFocus style=${styleMap({
width: `${this._width}px`,
height: `${this._height}px`,
})}
> >
${this._params.clipboardItem && ${this._params.clipboardItem &&
!this._filter && !this._filter &&

45
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@ -175,25 +175,27 @@ export default class HaAutomationCondition extends LitElement {
` `
)} )}
</div> </div>
<ha-button <div class="buttons">
outlined <ha-button
.disabled=${this.disabled} outlined
.label=${this.hass.localize( .disabled=${this.disabled}
"ui.panel.config.automation.editor.conditions.add" .label=${this.hass.localize(
)} "ui.panel.config.automation.editor.conditions.add"
@click=${this._addConditionDialog} )}
> @click=${this._addConditionDialog}
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon> >
</ha-button> <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
<ha-button </ha-button>
.disabled=${this.disabled} <ha-button
.label=${this.hass.localize( .disabled=${this.disabled}
"ui.panel.config.automation.editor.conditions.add_building_block" .label=${this.hass.localize(
)} "ui.panel.config.automation.editor.conditions.add_building_block"
@click=${this._addConditionBuildingBlockDialog} )}
> @click=${this._addConditionBuildingBlockDialog}
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon> >
</ha-button> <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
`; `;
} }
@ -363,6 +365,11 @@ export default class HaAutomationCondition extends LitElement {
pointer-events: none; pointer-events: none;
height: 24px; height: 24px;
} }
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
`, `,
]; ];
} }