jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix quickbar overlaying, fix click handling (#11900)

Browse Source
This commit is contained in:
Bram Kragten 2022-03-02 17:50:01 +01:00 committed by GitHub
parent 17018c0f26
commit add92a559d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -86,11 +86,11 @@ export class QuickBar extends LitElement {
@state() private _search = ""; @state() private _search = "";
@state() private _opened = false; @state() private _open = false;
@state() private _commandMode = false; @state() private _commandMode = false;
@state() private _done = false; @state() private _opened = false;
@state() private _narrow = false; @state() private _narrow = false;
@ -109,12 +109,12 @@ export class QuickBar extends LitElement {
"all and (max-width: 450px), all and (max-height: 500px)" "all and (max-width: 450px), all and (max-height: 500px)"
).matches; ).matches;
this._initializeItemsIfNeeded(); this._initializeItemsIfNeeded();
this._opened = true; this._open = true;
} }
public closeDialog() { public closeDialog() {
this._open = false;
this._opened = false; this._opened = false;
this._done = false;
this._focusSet = false; this._focusSet = false;
this._filter = ""; this._filter = "";
this._search = ""; this._search = "";
@ -133,7 +133,7 @@ export class QuickBar extends LitElement {
); );
protected render() { protected render() {
if (!this._opened) { if (!this._open) {
return html``; return html``;
} }
@ -218,24 +218,26 @@ export class QuickBar extends LitElement {
` `
: html` : html`
<mwc-list> <mwc-list>
<lit-virtualizer ${this._opened
scroller ? html`<lit-virtualizer
@keydown=${this._handleListItemKeyDown} scroller
@rangechange=${this._handleRangeChanged} @keydown=${this._handleListItemKeyDown}
@click=${this._handleItemClick} @rangechange=${this._handleRangeChanged}
class="ha-scrollbar" @click=${this._handleItemClick}
style=${styleMap({ class="ha-scrollbar"
height: this._narrow style=${styleMap({
? "calc(100vh - 56px)" height: this._narrow
: `${Math.min( ? "calc(100vh - 56px)"
items.length * (this._commandMode ? 56 : 72) + 26, : `${Math.min(
this._done ? 500 : 0 items.length * (this._commandMode ? 56 : 72) + 26,
)}px`, 500
})} )}px`,
.items=${items} })}
.renderItem=${this._renderItem} .items=${items}
> .renderItem=${this._renderItem}
</lit-virtualizer> >
</lit-virtualizer>`
: ""}
</mwc-list> </mwc-list>
`} `}
${this._hint ? html`<div class="hint">${this._hint}</div>` : ""} ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
@ -252,9 +254,7 @@ export class QuickBar extends LitElement {
} }
private _handleOpened() { private _handleOpened() {
this.updateComplete.then(() => { this._opened = true;
this._done = true;
});
} }
private async _handleRangeChanged(e) { private async _handleRangeChanged(e) {
@ -454,9 +454,10 @@ export class QuickBar extends LitElement {
} }
private _handleItemClick(ev) { private _handleItemClick(ev) {
const listItem = ev.target.closest("mwc-list-item");
this.processItemAndCloseDialog( this.processItemAndCloseDialog(
(ev.target as any).item, listItem.item,
Number((ev.target as HTMLElement).getAttribute("index")) Number(listItem.getAttribute("index"))
); );
} }