Fix quickbar overlaying, fix click handling (#11900)

This commit is contained in:
Bram Kragten 2022-03-02 17:50:01 +01:00
parent 7f086c0900
commit d0d0c44ec7
No known key found for this signature in database
GPG Key ID: FBE2DFDB363EF55B

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,7 +218,8 @@ export class QuickBar extends LitElement {
` `
: html` : html`
<mwc-list> <mwc-list>
<lit-virtualizer ${this._opened
? html`<lit-virtualizer
scroller scroller
@keydown=${this._handleListItemKeyDown} @keydown=${this._handleListItemKeyDown}
@rangechange=${this._handleRangeChanged} @rangechange=${this._handleRangeChanged}
@ -229,13 +230,14 @@ export class QuickBar extends LitElement {
? "calc(100vh - 56px)" ? "calc(100vh - 56px)"
: `${Math.min( : `${Math.min(
items.length * (this._commandMode ? 56 : 72) + 26, items.length * (this._commandMode ? 56 : 72) + 26,
this._done ? 500 : 0 500
)}px`, )}px`,
})} })}
.items=${items} .items=${items}
.renderItem=${this._renderItem} .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"))
); );
} }