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,30 +267,34 @@ 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>
<ha-progress-button ${this._existing
.progress=${this._waiting} ? html`<ha-button
slot="primaryAction" @click=${this._deleteMount}
@click=${this._connectMount} destructive
> slot="secondaryAction"
${this._existing >
? this.hass.localize( ${this.hass.localize("ui.common.delete")}
"ui.panel.config.storage.network_mounts.update" </ha-button>`
) : nothing}
: this.hass.localize(
"ui.panel.config.storage.network_mounts.connect" <div slot="primaryAction">
)} <ha-button @click=${this.closeDialog} dialogInitialFocus>
</ha-progress-button> ${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-progress-button
.progress=${this._waiting}
@click=${this._connectMount}
>
${this._existing
? this.hass.localize(
"ui.panel.config.storage.network_mounts.update"
)
: this.hass.localize(
"ui.panel.config.storage.network_mounts.connect"
)}
</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);
}
`, `,
]; ];
} }