Fix card deletion dialog buttons out of view (#9992)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Philip Allgaier 2021-09-20 16:32:41 +02:00 committed by GitHub
parent fcac3fa164
commit 49494c572b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 25 deletions

View File

@ -15,7 +15,7 @@ const haTabFixBehaviorImpl = {
}, },
}; };
// paper-dialog that uses the haTabFixBehaviorImpl behvaior // paper-dialog that uses the haTabFixBehaviorImpl behavior
// export class HaPaperDialog extends paperDialogClass {} // export class HaPaperDialog extends paperDialogClass {}
// @ts-ignore // @ts-ignore
export class HaPaperDialog export class HaPaperDialog

View File

@ -1,10 +1,9 @@
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import deepFreeze from "deep-freeze"; import deepFreeze from "deep-freeze";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/dialog/ha-paper-dialog"; import "../../../../components/dialog/ha-paper-dialog";
import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
import type { LovelaceCardConfig } from "../../../../data/lovelace"; import type { LovelaceCardConfig } from "../../../../data/lovelace";
import { haStyleDialog } from "../../../../resources/styles"; import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
@ -19,16 +18,18 @@ export class HuiDialogDeleteCard extends LitElement {
@state() private _cardConfig?: LovelaceCardConfig; @state() private _cardConfig?: LovelaceCardConfig;
@query("ha-paper-dialog", true) private _dialog!: HaPaperDialog;
public async showDialog(params: DeleteCardDialogParams): Promise<void> { public async showDialog(params: DeleteCardDialogParams): Promise<void> {
this._params = params; this._params = params;
this._cardConfig = params.cardConfig; this._cardConfig = params.cardConfig;
if (!Object.isFrozen(this._cardConfig)) { if (!Object.isFrozen(this._cardConfig)) {
this._cardConfig = deepFreeze(this._cardConfig); this._cardConfig = deepFreeze(this._cardConfig);
} }
await this.updateComplete; }
fireEvent(this._dialog as HTMLElement, "iron-resize");
public closeDialog(): void {
this._params = undefined;
this._cardConfig = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
protected render(): TemplateResult { protected render(): TemplateResult {
@ -37,9 +38,12 @@ export class HuiDialogDeleteCard extends LitElement {
} }
return html` return html`
<ha-paper-dialog with-backdrop opened modal> <ha-dialog
<h2>${this.hass.localize("ui.panel.lovelace.cards.confirm_delete")}</h2> open
<paper-dialog-scrollable> @closed=${this.closeDialog}
.heading=${this.hass.localize("ui.panel.lovelace.cards.confirm_delete")}
>
<div>
${this._cardConfig ${this._cardConfig
? html` ? html`
<div class="element-preview"> <div class="element-preview">
@ -50,16 +54,18 @@ export class HuiDialogDeleteCard extends LitElement {
</div> </div>
` `
: ""} : ""}
</paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<mwc-button @click="${this._close}">
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
<mwc-button class="warning" @click="${this._delete}">
${this.hass!.localize("ui.common.delete")}
</mwc-button>
</div> </div>
</ha-paper-dialog> <mwc-button slot="secondaryAction" @click="${this.closeDialog}">
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
slot="primaryAction"
class="warning"
@click="${this._delete}"
>
${this.hass!.localize("ui.common.delete")}
</mwc-button>
</ha-dialog>
`; `;
} }
@ -80,17 +86,12 @@ export class HuiDialogDeleteCard extends LitElement {
]; ];
} }
private _close(): void {
this._params = undefined;
this._cardConfig = undefined;
}
private _delete(): void { private _delete(): void {
if (!this._params?.deleteCard) { if (!this._params?.deleteCard) {
return; return;
} }
this._params.deleteCard(); this._params.deleteCard();
this._close(); this.closeDialog();
} }
} }