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>
<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>
`;
}
@ -325,6 +326,11 @@ export default class HaAutomationAction extends LitElement {
pointer-events: none;
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 { 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";
@ -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;
@ -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;
@ -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;
@ -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"
@ -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}
@ -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 &&

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

@ -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>
`;
}
@ -363,6 +365,11 @@ export default class HaAutomationCondition extends LitElement {
pointer-events: none;
height: 24px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
`,
];
}