mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
Convert suggest-card dialog to ha-dialog
(#10000)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
9c1153ef37
commit
fcac3fa164
@ -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;
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
`,
|
||||
|
@ -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}
|
||||
|
Loading…
x
Reference in New Issue
Block a user