Convert suggest-card dialog to ha-dialog (#10000)

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

View File

@ -55,6 +55,7 @@ export class HuiCreateDialogCard
public closeDialog(): boolean {
this._params = undefined;
this._currTabIndex = 0;
this._selectedEntities = [];
fireEvent(this, "dialog-closed", { dialog: this.localName });
return true;
}

View File

@ -1,7 +1,8 @@
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, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/dialog/ha-paper-dialog";
import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
@ -47,16 +48,26 @@ export class HuiDialogSuggestCard extends LitElement {
}
}
public closeDialog(): void {
this._params = undefined;
this._cardConfig = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this._params) {
return html``;
}
return html`
<ha-paper-dialog with-backdrop opened>
<h2>
${this.hass!.localize("ui.panel.lovelace.editor.suggest_card.header")}
</h2>
<paper-dialog-scrollable>
<ha-dialog
open
scrimClickAction
@closed=${this.closeDialog}
.heading=${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.header"
)}
>
<div>
${this._cardConfig
? html`
<div class="element-preview">
@ -80,37 +91,39 @@ export class HuiDialogSuggestCard extends LitElement {
</div>
`
: ""}
</paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<mwc-button @click="${this._close}">
${this._params.yaml
? this.hass!.localize("ui.common.close")
: this.hass!.localize("ui.common.cancel")}
</mwc-button>
${!this._params.yaml
? html`
<mwc-button @click="${this._pickCard}"
>${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.create_own"
)}</mwc-button
>
<mwc-button ?disabled="${this._saving}" @click="${this._save}">
${this._saving
? html`
<ha-circular-progress
active
title="Saving"
size="small"
></ha-circular-progress>
`
: this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.add"
)}
</mwc-button>
`
: ""}
</div>
</ha-paper-dialog>
<mwc-button slot="secondaryAction" @click="${this.closeDialog}">
${this._params.yaml
? this.hass!.localize("ui.common.close")
: this.hass!.localize("ui.common.cancel")}
</mwc-button>
${!this._params.yaml
? html`
<mwc-button slot="primaryAction" @click="${this._pickCard}"
>${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.create_own"
)}</mwc-button
>
<mwc-button
slot="primaryAction"
.disabled="${this._saving}"
@click="${this._save}"
>
${this._saving
? html`
<ha-circular-progress
active
title="Saving"
size="small"
></ha-circular-progress>
`
: this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.add"
)}
</mwc-button>
`
: ""}
</ha-dialog>
`;
}
@ -120,17 +133,17 @@ export class HuiDialogSuggestCard extends LitElement {
css`
@media all and (max-width: 450px), all and (max-height: 500px) {
/* overrule the ha-style-dialog max-height on small screens */
ha-paper-dialog {
ha-dialog {
max-height: 100%;
height: 100%;
}
}
@media all and (min-width: 850px) {
ha-paper-dialog {
ha-dialog {
width: 845px;
}
}
ha-paper-dialog {
ha-dialog {
max-width: 845px;
--dialog-z-index: 5;
}
@ -154,11 +167,6 @@ export class HuiDialogSuggestCard extends LitElement {
];
}
private _close(): void {
this._params = undefined;
this._cardConfig = undefined;
}
private _pickCard(): void {
if (
!this._params?.lovelaceConfig ||
@ -174,7 +182,7 @@ export class HuiDialogSuggestCard extends LitElement {
path: this._params!.path,
entities: this._params!.entities,
});
this._close();
this.closeDialog();
}
private async _save(): Promise<void> {
@ -196,7 +204,7 @@ export class HuiDialogSuggestCard extends LitElement {
);
this._saving = false;
showSaveSuccessToast(this, this.hass);
this._close();
this.closeDialog();
}
}

View File

@ -68,9 +68,7 @@ export class HuiEntityPickerTable extends LitElement {
<div @click=${this._handleEntityClicked} style="cursor: pointer;">
${name}
${narrow
? html`
<div class="secondary">${entity.stateObj.entity_id}</div>
`
? html` <div class="secondary">${entity.entity_id}</div> `
: ""}
</div>
`,

View File

@ -89,9 +89,9 @@ export class HuiUnusedEntities extends LitElement {
icon: "",
entity_id: entity,
stateObj,
name: computeStateName(stateObj),
name: stateObj ? computeStateName(stateObj) : "Unavailable",
domain: computeDomain(entity),
last_changed: stateObj!.last_changed,
last_changed: stateObj?.last_changed,
};
}) as DataTableRowData[]}
@selected-changed=${this._handleSelectedChanged}