diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index a7c52bda2a..227c1b0ab8 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -99,9 +99,9 @@ class DialogZoneDetail extends LitElement { return html` { - // Wait till dialog is rendered. + public showDialog(params: EditViewDialogParams): void { this._params = params; - if (this._dialog == null) { - await this.updateComplete; - } - if (this._params.viewIndex === undefined) { this._config = {}; this._badges = []; @@ -82,12 +75,13 @@ export class HuiDialogEditView extends LitElement { this._badges = badges ? processEditorEntities(badges) : []; this._cards = cards; } - - this._dialog.open(); } - private get _dialog(): HaPaperDialog { - return this.shadowRoot!.querySelector("ha-paper-dialog")!; + public closeDialog(): void { + this._curTabIndex = 0; + this._params = undefined; + this._config = {}; + this._badges = []; } private get _viewConfigTitle(): string { @@ -156,58 +150,69 @@ export class HuiDialogEditView extends LitElement { break; } return html` - -

- ${this._viewConfigTitle} -

- - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.tab_settings" - )} - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.tab_badges" - )} - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.tab_visibility" - )} - - ${content} -
- ${this._params.viewIndex !== undefined - ? html` - - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.delete" - )} - - ` - : ""} - ${this.hass!.localize("ui.common.cancel")} - - - ${this.hass!.localize("ui.common.save")} +
+

+ ${this._viewConfigTitle} +

+ + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_view.tab_settings" + )} + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_view.tab_badges" + )} + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_view.tab_visibility" + )} +
- + ${content} + ${this._params.viewIndex !== undefined + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_view.delete" + )} + + ` + : ""} + ${this.hass!.localize("ui.common.cancel")} + + + ${this.hass!.localize("ui.common.save")} + `; } @@ -219,7 +224,7 @@ export class HuiDialogEditView extends LitElement { await this._params.lovelace!.saveConfig( deleteView(this._params.lovelace!.config, this._params.viewIndex!) ); - this._closeDialog(); + this.closeDialog(); navigate(this, `/${window.location.pathname.split("/")[1]}`); } catch (err) { showAlertDialog(this, { @@ -248,25 +253,11 @@ export class HuiDialogEditView extends LitElement { }); } - private async _resizeDialog(): Promise { - await this.updateComplete; - fireEvent(this._dialog as HTMLElement, "iron-resize"); - } - - private _closeDialog(): void { - this._curTabIndex = 0; - this._params = undefined; - this._config = {}; - this._badges = []; - this._dialog.close(); - } - private _handleTabSelected(ev: CustomEvent): void { if (!ev.detail.value) { return; } this._curTab = ev.detail.value.id; - this._resizeDialog(); } private async _save(): Promise { @@ -274,7 +265,7 @@ export class HuiDialogEditView extends LitElement { return; } if (!this._isConfigChanged()) { - this._closeDialog(); + this.closeDialog(); return; } @@ -300,7 +291,7 @@ export class HuiDialogEditView extends LitElement { viewConf ); } - this._closeDialog(); + this.closeDialog(); } catch (err) { showAlertDialog(this, { text: `Saving failed: ${err.message}`, @@ -329,7 +320,6 @@ export class HuiDialogEditView extends LitElement { return; } this._badges = processEditorEntities(ev.detail.entities); - this._resizeDialog(); } private _isConfigChanged(): boolean { @@ -350,25 +340,49 @@ export class HuiDialogEditView extends LitElement { return [ haStyleDialog, css` - @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%; - height: 100%; - } - } - @media all and (min-width: 660px) { - ha-paper-dialog { - width: 650px; - } - } - ha-paper-dialog { - max-width: 650px; + h2 { + display: block; + line-height: normal; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + font-family: var( + --mdc-typography-headline6-font-family, + var(--mdc-typography-font-family, Roboto, sans-serif) + ); + font-size: 1.25rem; + font-size: var(--mdc-typography-headline6-font-size, 1.25rem); + line-height: 2rem; + line-height: var(--mdc-typography-headline6-line-height, 2rem); + font-weight: 500; + font-weight: var(--mdc-typography-headline6-font-weight, 500); + letter-spacing: 0.0125em; + letter-spacing: var( + --mdc-typography-headline6-letter-spacing, + 0.0125em + ); + text-decoration: inherit; + text-decoration: var( + --mdc-typography-headline6-text-decoration, + inherit + ); + text-transform: inherit; + text-transform: var( + --mdc-typography-headline6-text-transform, + inherit + ); + position: relative; + flex-shrink: 0; + box-sizing: border-box; + margin: 0; + padding: 20px 24px 9px; + border-bottom: 1px solid transparent; } paper-tabs { --paper-tabs-selection-bar-color: var(--primary-color); text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 0 20px; } mwc-button ha-circular-progress { width: 14px; @@ -384,9 +398,6 @@ export class HuiDialogEditView extends LitElement { ha-circular-progress[active] { display: block; } - paper-dialog-scrollable { - margin-top: 0; - } .hidden { display: none; }