diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index bffab35560..1af4d63882 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -13,7 +13,7 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html` @@ -35,10 +35,12 @@ export class HaDialog extends MwcDialog { display: block; height: 20px; } - .close_button { + .header_button { position: absolute; right: 16px; top: 12px; + text-decoration: none; + color: inherit; } `, ]; diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts index 490222ae80..4d884e469c 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts @@ -187,7 +187,6 @@ export class HuiCardEditor extends LitElement { // Refresh code editor when switching to yaml mode this._refreshYamlEditor(true); } - fireEvent(this as HTMLElement, "iron-resize"); } if (this._configElement && changedProperties.has("hass")) { @@ -207,7 +206,6 @@ export class HuiCardEditor extends LitElement { this._yamlEditor.codemirror.focus(); } } - fireEvent(this as HTMLElement, "iron-resize"); }, 1); } @@ -279,7 +277,6 @@ export class HuiCardEditor extends LitElement { this.GUImode = false; } finally { this._loading = false; - fireEvent(this, "iron-resize"); } } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 0c832dc73d..93ae17ff3f 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import deepFreeze from "deep-freeze"; import { css, @@ -12,7 +11,7 @@ import { PropertyValues, } from "lit-element"; import type { HASSDomEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/dialog/ha-paper-dialog"; +import "../../../../components/ha-dialog"; import type { LovelaceCardConfig, LovelaceViewConfig, @@ -28,6 +27,7 @@ import "./hui-card-picker"; import "./hui-card-preview"; import type { EditCardDialogParams } from "./show-edit-card-dialog"; import { getCardDocumentationURL } from "../get-card-documentation-url"; +import { mdiHelpCircle } from "@mdi/js"; declare global { // for fire event @@ -116,28 +116,29 @@ export class HuiDialogEditCard extends LitElement { } return html` - -
-

- ${heading} -

- ${this._documentationURL !== undefined - ? html` - - - - ` - : ""} -
- + + + + + + ` + : ""}`} + > +
${this._cardConfig === undefined ? html`
`} -
-
- ${this._cardConfig !== undefined - ? html` - - ${this.hass!.localize( - !this._cardEditorEl || this._GUImode - ? "ui.panel.lovelace.editor.edit_card.show_code_editor" - : "ui.panel.lovelace.editor.edit_card.show_visual_editor" - )} - - ` - : ""} - - ${this.hass!.localize("ui.common.cancel")} - - ${this._cardConfig !== undefined - ? html` - - ${this._saving - ? html` - - ` - : this.hass!.localize("ui.common.save")} - - ` - : ``}
-
+ ${this._cardConfig !== undefined + ? html` + + ${this.hass!.localize( + !this._cardEditorEl || this._GUImode + ? "ui.panel.lovelace.editor.edit_card.show_code_editor" + : "ui.panel.lovelace.editor.edit_card.show_visual_editor" + )} + + ` + : ""} + + ${this.hass!.localize("ui.common.cancel")} + + ${this._cardConfig !== undefined + ? html` + + ${this._saving + ? html` ` + : this.hass!.localize("ui.common.save")} + + ` + : ``} + `; } @@ -223,20 +222,20 @@ export class HuiDialogEditCard extends LitElement { @media all and (max-width: 450px), all and (max-height: 500px) { /* overrule the ha-style-dialog max-height on small screens */ - ha-paper-dialog { - max-height: 100%; + ha-dialog { + --mdc-dialog-max-height: 100%; height: 100%; } } @media all and (min-width: 850px) { - ha-paper-dialog { - width: 845px; + ha-dialog { + --mdc-dialog-min-width: 845px; } } - ha-paper-dialog { - max-width: 845px; + ha-dialog { + --mdc-dialog-max-width: 845px; } .center { @@ -258,9 +257,9 @@ export class HuiDialogEditCard extends LitElement { } @media (min-width: 1200px) { - ha-paper-dialog { - max-width: none; - width: 1000px; + ha-dialog { + --mdc-dialog-max-width: calc(100% - 32px); + --mdc-dialog-min-width: 1000px; } .content { @@ -317,10 +316,6 @@ export class HuiDialogEditCard extends LitElement { align-items: center; justify-content: space-between; } - .help-icon { - text-decoration: none; - color: inherit; - } `, ]; }