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 { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -215,6 +215,12 @@ class ViewMountDialog extends LitElement {
@closed=${this.closeDialog}
>
<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"
>${this._existing
? this.hass.localize(
@ -261,30 +267,34 @@ class ViewMountDialog extends LitElement {
@value-changed=${this._valueChanged}
dialogInitialFocus
></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
.progress=${this._waiting}
slot="primaryAction"
@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>
${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
.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>
`;
}
@ -389,9 +399,6 @@ class ViewMountDialog extends LitElement {
ha-icon-button {
color: var(--primary-text-color);
}
.delete-btn {
--mdc-theme-primary: var(--error-color);
}
`,
];
}