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 {}
// @ts-ignore
export class HaPaperDialog

View File

@ -1,10 +1,9 @@
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import deepFreeze from "deep-freeze";
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 "../../../../components/dialog/ha-paper-dialog";
import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
import type { LovelaceCardConfig } from "../../../../data/lovelace";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@ -19,16 +18,18 @@ export class HuiDialogDeleteCard extends LitElement {
@state() private _cardConfig?: LovelaceCardConfig;
@query("ha-paper-dialog", true) private _dialog!: HaPaperDialog;
public async showDialog(params: DeleteCardDialogParams): Promise<void> {
this._params = params;
this._cardConfig = params.cardConfig;
if (!Object.isFrozen(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 {
@ -37,9 +38,12 @@ export class HuiDialogDeleteCard extends LitElement {
}
return html`
<ha-paper-dialog with-backdrop opened modal>
<h2>${this.hass.localize("ui.panel.lovelace.cards.confirm_delete")}</h2>
<paper-dialog-scrollable>
<ha-dialog
open
@closed=${this.closeDialog}
.heading=${this.hass.localize("ui.panel.lovelace.cards.confirm_delete")}
>
<div>
${this._cardConfig
? html`
<div class="element-preview">
@ -50,16 +54,18 @@ export class HuiDialogDeleteCard extends LitElement {
</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>
</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 {
if (!this._params?.deleteCard) {
return;
}
this._params.deleteCard();
this._close();
this.closeDialog();
}
}