Align view mount dialog with design guidelines (#24060)

Align view mount dialog with design requirements
This commit is contained in:
Jan-Philipp Benecke 2025-02-04 13:25:59 +01:00 committed by GitHub
parent 7dbc78f1d6
commit 85fe2213c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,4 @@
import { mdiHelpCircle } from "@mdi/js"; import { mdiClose, mdiHelpCircle } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@ -215,6 +215,12 @@ class ViewMountDialog extends LitElement {
@closed=${this.closeDialog} @closed=${this.closeDialog}
> >
<ha-dialog-header slot="heading"> <ha-dialog-header slot="heading">
<ha-icon-button
slot="navigationIcon"
dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<span slot="title" <span slot="title"
>${this._existing >${this._existing
? this.hass.localize( ? this.hass.localize(
@ -261,20 +267,23 @@ class ViewMountDialog extends LitElement {
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
dialogInitialFocus dialogInitialFocus
></ha-form> ></ha-form>
<div slot="secondaryAction">
<mwc-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
${this._existing
? html`<mwc-button @click=${this._deleteMount} class="delete-btn">
${this.hass.localize("ui.common.delete")}
</mwc-button>`
: nothing}
</div>
${this._existing
? html`<ha-button
@click=${this._deleteMount}
destructive
slot="secondaryAction"
>
${this.hass.localize("ui.common.delete")}
</ha-button>`
: nothing}
<div slot="primaryAction">
<ha-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-progress-button <ha-progress-button
.progress=${this._waiting} .progress=${this._waiting}
slot="primaryAction"
@click=${this._connectMount} @click=${this._connectMount}
> >
${this._existing ${this._existing
@ -285,6 +294,7 @@ class ViewMountDialog extends LitElement {
"ui.panel.config.storage.network_mounts.connect" "ui.panel.config.storage.network_mounts.connect"
)} )}
</ha-progress-button> </ha-progress-button>
</div>
</ha-dialog> </ha-dialog>
`; `;
} }
@ -389,9 +399,6 @@ class ViewMountDialog extends LitElement {
ha-icon-button { ha-icon-button {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.delete-btn {
--mdc-theme-primary: var(--error-color);
}
`, `,
]; ];
} }