Fix header on take control dialog (#20123)
This commit is contained in:
parent
6ee2bfed36
commit
10cc3bdd3f
|
@ -139,12 +139,12 @@ export class HaDialog extends DialogBase {
|
||||||
}
|
}
|
||||||
.header_button {
|
.header_button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -8px;
|
right: -12px;
|
||||||
top: -8px;
|
top: -12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
inset-inline-start: initial;
|
inset-inline-start: initial;
|
||||||
inset-inline-end: -8px;
|
inset-inline-end: -12px;
|
||||||
direction: var(--direction);
|
direction: var(--direction);
|
||||||
}
|
}
|
||||||
.dialog-actions {
|
.dialog-actions {
|
||||||
|
|
|
@ -220,7 +220,6 @@ export class HuiDialogEditCard
|
||||||
? html`
|
? html`
|
||||||
<a
|
<a
|
||||||
slot="actionItems"
|
slot="actionItems"
|
||||||
class="header_button"
|
|
||||||
href=${this._documentationURL}
|
href=${this._documentationURL}
|
||||||
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
@ -518,7 +517,7 @@ export class HuiDialogEditCard
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.header_button {
|
ha-dialog-header a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import { mdiHelpCircle } from "@mdi/js";
|
import { mdiClose, mdiHelpCircle } from "@mdi/js";
|
||||||
import { CSSResultGroup, html, LitElement, nothing } from "lit";
|
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||||
import { customElement, property, 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 "../../../components/ha-circular-progress";
|
import "../../../components/ha-circular-progress";
|
||||||
import "../../../components/ha-dialog";
|
import "../../../components/ha-dialog";
|
||||||
|
import "../../../components/ha-dialog-header";
|
||||||
import "../../../components/ha-formfield";
|
import "../../../components/ha-formfield";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-switch";
|
import "../../../components/ha-switch";
|
||||||
|
@ -49,27 +50,39 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
|
||||||
if (!this._params) {
|
if (!this._params) {
|
||||||
return nothing;
|
return nothing;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const heading = this.hass!.localize(
|
||||||
|
"ui.panel.lovelace.editor.save_config.header"
|
||||||
|
);
|
||||||
return html`
|
return html`
|
||||||
<ha-dialog
|
<ha-dialog
|
||||||
open
|
open
|
||||||
scrimClickAction
|
scrimClickAction
|
||||||
escapeKeyAction
|
escapeKeyAction
|
||||||
@closed=${this._close}
|
@closed=${this._close}
|
||||||
.heading=${html`${this.hass!.localize(
|
.heading=${heading}
|
||||||
"ui.panel.lovelace.editor.save_config.header"
|
>
|
||||||
)}<a
|
<ha-dialog-header slot="heading">
|
||||||
class="header_button"
|
<ha-icon-button
|
||||||
|
slot="navigationIcon"
|
||||||
|
dialogAction="cancel"
|
||||||
|
.label=${this.hass!.localize("ui.common.close")}
|
||||||
|
.path=${mdiClose}
|
||||||
|
></ha-icon-button>
|
||||||
|
<span slot="title">${heading}</span>
|
||||||
|
<a
|
||||||
href=${documentationUrl(this.hass!, "/lovelace/")}
|
href=${documentationUrl(this.hass!, "/lovelace/")}
|
||||||
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
|
slot="actionItems"
|
||||||
>
|
>
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
.path=${mdiHelpCircle}
|
.path=${mdiHelpCircle}
|
||||||
.label=${this.hass!.localize("ui.common.help")}
|
.label=${this.hass!.localize("ui.common.help")}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
</a>`}
|
</a>
|
||||||
>
|
</ha-dialog-header>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
|
${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
|
||||||
|
@ -183,7 +196,19 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return [haStyleDialog];
|
return [
|
||||||
|
haStyleDialog,
|
||||||
|
css`
|
||||||
|
ha-dialog {
|
||||||
|
--dialog-content-padding: 0 24px 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ha-dialog-header a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue