Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Migrate change/show backup encryption key to ha-wa-dialog (#28428)

Browse Source 
* Migrate dialog-change-backup-encryption-key.ts from ha-md-dialog to ha-wa-dialog

* Remove open render nothing, remove custom css size

* Migrate show backup key

* Apply suggestion from @MindFreeze

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Aidan Timson
2025-12-09 07:24:43 +00:00
committed by GitHub
parent e59e83fffe
commit 47d1fdf673
2 changed files with 101 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
View File

@@ -1,15 +1,14 @@
import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js"; import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } 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 { copyToClipboard } from "../../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-button-prev"; import "../../../../components/ha-icon-button-prev";
import "../../../../components/ha-md-dialog"; import "../../../../components/ha-wa-dialog";
import type { HaMdDialog } from "../../../../components/ha-md-dialog";
import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-password-field"; import "../../../../components/ha-password-field";
@@ -31,20 +30,18 @@ type Step = (typeof STEPS)[number];
class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog { class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@state() private _opened = false; @state() private _open = false;
@state() private _step?: Step; @state() private _step?: Step;
@state() private _params?: ChangeBackupEncryptionKeyDialogParams; @state() private _params?: ChangeBackupEncryptionKeyDialogParams;
@query("ha-md-dialog") private _dialog!: HaMdDialog;
@state() private _newEncryptionKey?: string; @state() private _newEncryptionKey?: string;
public showDialog(params: ChangeBackupEncryptionKeyDialogParams): void { public showDialog(params: ChangeBackupEncryptionKeyDialogParams): void {
this._params = params; this._params = params;
this._step = STEPS[0]; this._step = STEPS[0];
this._opened = true; this._open = true;
this._newEncryptionKey = generateEncryptionKey(); this._newEncryptionKey = generateEncryptionKey();
} }
@@ -52,10 +49,10 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
if (this._params!.cancel) { if (this._params!.cancel) {
this._params!.cancel(); this._params!.cancel();
} }
if (this._opened) { if (this._open) {
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
this._opened = false; this._open = false;
this._step = undefined; this._step = undefined;
this._params = undefined; this._params = undefined;
this._newEncryptionKey = undefined; this._newEncryptionKey = undefined;
@@ -64,7 +61,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
private _done() { private _done() {
this._params?.submit!(true); this._params?.submit!(true);
this._dialog.close(); this.closeDialog();
} }
private _previousStep() { private _previousStep() {
@@ -84,10 +81,6 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
} }
protected render() { protected render() {
if (!this._opened || !this._params) {
return nothing;
}
const dialogTitle = const dialogTitle =
this._step === "current" || this._step === "new" this._step === "current" || this._step === "new"
? this.hass.localize( ? this.hass.localize(
@@ -96,36 +89,40 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
: ""; : "";
return html` return html`
<ha-md-dialog disable-cancel-action open @closed=${this.closeDialog}> <ha-wa-dialog
<ha-dialog-header slot="headline"> .hass=${this.hass}
.open=${this._open}
header-title=${dialogTitle}
prevent-scrim-close
@closed=${this.closeDialog}
>
${this._step === "new" ${this._step === "new"
? html` ? html`
<ha-icon-button-prev <ha-icon-button-prev
slot="navigationIcon" slot="headerNavigationIcon"
@click=${this._previousStep} @click=${this._previousStep}
></ha-icon-button-prev> ></ha-icon-button-prev>
` `
: html` : html`
<ha-icon-button <ha-icon-button
slot="navigationIcon" slot="headerNavigationIcon"
data-dialog="close"
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
@click=${this.closeDialog}
></ha-icon-button> ></ha-icon-button>
`} `}
<span slot="title">${dialogTitle}</span> ${this._renderStepContent()}
</ha-dialog-header> <ha-dialog-footer slot="footer">
<div slot="content">${this._renderStepContent()}</div>
<div slot="actions">
${this._step === "current" ${this._step === "current"
? html` ? html`
<ha-button @click=${this._nextStep}> <ha-button slot="primaryAction" @click=${this._nextStep}>
${this.hass.localize("ui.common.next")} ${this.hass.localize("ui.common.next")}
</ha-button> </ha-button>
` `
: this._step === "new" : this._step === "new"
? html` ? html`
<ha-button <ha-button
slot="primaryAction"
@click=${this._submit} @click=${this._submit}
.disabled=${!this._newEncryptionKey} .disabled=${!this._newEncryptionKey}
variant="danger" variant="danger"
@@ -136,14 +133,14 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
</ha-button> </ha-button>
` `
: html` : html`
<ha-button @click=${this._done}> <ha-button slot="primaryAction" @click=${this._done}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.dialogs.change_encryption_key.actions.done" "ui.panel.config.backup.dialogs.change_encryption_key.actions.done"
)} )}
</ha-button> </ha-button>
`} `}
</div> </ha-dialog-footer>
</ha-md-dialog> </ha-wa-dialog>
`; `;
} }
@@ -287,10 +284,8 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-md-dialog { ha-wa-dialog {
width: 90vw; --dialog-content-padding: var(--ha-space-2) var(--ha-space-6);
max-width: 560px;
--dialog-content-padding: 8px 24px;
} }
ha-md-list { ha-md-list {
background: none; background: none;
@@ -321,14 +316,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
flex: none; flex: none;
margin: -16px; margin: -16px;
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-md-dialog {
max-width: none;
}
div[slot="content"] {
margin-top: 0;
}
}
p { p {
margin-top: 0; margin-top: 0;
} }

78
src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
View File

@@ -1,15 +1,14 @@
import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js"; import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } 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 { copyToClipboard } from "../../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-button-prev"; import "../../../../components/ha-icon-button-prev";
import "../../../../components/ha-md-dialog"; import "../../../../components/ha-wa-dialog";
import type { HaMdDialog } from "../../../../components/ha-md-dialog";
import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-password-field"; import "../../../../components/ha-password-field";
@@ -24,22 +23,22 @@ import type { ShowBackupEncryptionKeyDialogParams } from "./show-dialog-show-bac
class DialogShowBackupEncryptionKey extends LitElement implements HassDialog { class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@state() private _params?: ShowBackupEncryptionKeyDialogParams; @state() private _open = false;
@query("ha-md-dialog") private _dialog!: HaMdDialog; @state() private _params?: ShowBackupEncryptionKeyDialogParams;
public showDialog(params: ShowBackupEncryptionKeyDialogParams): void { public showDialog(params: ShowBackupEncryptionKeyDialogParams): void {
this._params = params; this._params = params;
this._open = true;
} }
public closeDialog() { public closeDialog() {
this._params = undefined; if (this._open) {
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
return true;
} }
this._open = false;
private _closeDialog() { this._params = undefined;
this._dialog.close(); return true;
} }
protected render() { protected render() {
@@ -48,21 +47,21 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
} }
return html` return html`
<ha-md-dialog disable-cancel-action open @closed=${this.closeDialog}> <ha-wa-dialog
<ha-dialog-header slot="headline"> .hass=${this.hass}
<ha-icon-button .open=${this._open}
slot="navigationIcon" header-title=${this.hass.localize(
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
@click=${this._closeDialog}
></ha-icon-button>
<span slot="title">
${this.hass.localize(
"ui.panel.config.backup.dialogs.show_encryption_key.title" "ui.panel.config.backup.dialogs.show_encryption_key.title"
)} )}
</span> prevent-scrim-close
</ha-dialog-header> @closed=${this.closeDialog}
<div slot="content"> >
<ha-icon-button
slot="headerNavigationIcon"
data-dialog="close"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<p> <p>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.dialogs.show_encryption_key.description" "ui.panel.config.backup.dialogs.show_encryption_key.description"
@@ -87,12 +86,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
"ui.panel.config.backup.encryption_key.download_emergency_kit_description" "ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)} )}
</span> </span>
<ha-button <ha-button slot="end" @click=${this._download}>
size="small"
appearance="plain"
slot="end"
@click=${this._download}
>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon> <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action" "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
@@ -100,13 +94,12 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
</ha-button> </ha-button>
</ha-md-list-item> </ha-md-list-item>
</ha-md-list> </ha-md-list>
</div> <ha-dialog-footer slot="footer">
<div slot="actions"> <ha-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button @click=${this._closeDialog}>
${this.hass.localize("ui.common.close")} ${this.hass.localize("ui.common.close")}
</ha-button> </ha-button>
</div> </ha-dialog-footer>
</ha-md-dialog> </ha-wa-dialog>
`; `;
} }
@@ -135,10 +128,8 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-md-dialog { ha-wa-dialog {
width: 90vw; --dialog-content-padding: var(--ha-space-2) var(--ha-space-6);
max-width: 560px;
--dialog-content-padding: 8px 24px;
} }
ha-md-list { ha-md-list {
background: none; background: none;
@@ -169,14 +160,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
flex: none; flex: none;
margin: -16px; margin: -16px;
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-md-dialog {
max-width: none;
}
div[slot="content"] {
margin-top: 0;
}
}
p { p {
margin-top: 0; margin-top: 0;
} }