From 7488eb782d0c9cffec6d9b10c0927e4fb8620592 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 19 Oct 2021 22:56:49 +0200 Subject: [PATCH] Migrate all paper dialogs to mwc (#10333) --- .../markdown/dialog-hassio-markdown.ts | 18 --- package.json | 3 - .../dialog/ha-iron-focusables-helper.js | 89 ----------- src/components/dialog/ha-paper-dialog.ts | 31 ---- src/components/ha-dialog.ts | 8 +- .../config-flow/dialog-data-entry-flow.ts | 1 - .../ha-voice-command-dialog.ts | 149 ++++++------------ src/mixins/dialog-mixin.js | 25 --- .../areas/dialog-area-registry-detail.ts | 1 - .../automation/thingtalk/dialog-thingtalk.ts | 71 ++++----- .../thingtalk/ha-thingtalk-placeholders.ts | 54 +++---- .../blueprint/dialog-import-blueprint.ts | 1 - .../dialog-cloud-certificate.ts | 51 +++--- .../dialog-manage-cloudhook.ts | 75 ++++----- .../zha/zha-add-group-page.ts | 6 +- .../integration-panels/zha/zha-group-page.ts | 8 +- .../zwave/zwave-log-dialog.js | 31 ++-- .../card-editor/hui-dialog-delete-card.ts | 2 - .../card-editor/hui-dialog-suggest-card.ts | 2 - .../lovelace/editor/hui-dialog-save-config.ts | 15 -- .../hui-dialog-edit-lovelace.ts | 103 ++++-------- .../select-view/hui-dialog-select-view.ts | 1 - .../mailbox/ha-dialog-show-audio-message.js | 67 +++----- src/panels/profile/ha-change-password-card.ts | 1 - src/resources/ha-style.ts | 19 --- src/resources/styles.ts | 51 ------ yarn.lock | 38 ----- 27 files changed, 230 insertions(+), 691 deletions(-) delete mode 100644 src/components/dialog/ha-iron-focusables-helper.js delete mode 100644 src/components/dialog/ha-paper-dialog.ts delete mode 100644 src/mixins/dialog-mixin.js diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts index b936a70f97..1a1c5dfe13 100644 --- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts +++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts @@ -47,11 +47,6 @@ class HassioMarkdownDialog extends LitElement { haStyleDialog, hassioStyle, css` - ha-paper-dialog { - min-width: 350px; - font-size: 14px; - border-radius: 2px; - } app-toolbar { margin: 0; padding: 0 16px; @@ -62,19 +57,6 @@ class HassioMarkdownDialog extends LitElement { margin-left: 16px; } @media all and (max-width: 450px), all and (max-height: 500px) { - ha-paper-dialog { - max-height: 100%; - } - ha-paper-dialog::before { - content: ""; - position: fixed; - z-index: -1; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: inherit; - } app-toolbar { color: var(--text-primary-color); background-color: var(--primary-color); diff --git a/package.json b/package.json index 16c2a47c0f..ee71475cdb 100644 --- a/package.json +++ b/package.json @@ -75,9 +75,6 @@ "@polymer/iron-input": "^3.0.1", "@polymer/iron-overlay-behavior": "^3.0.3", "@polymer/iron-resizable-behavior": "^3.0.1", - "@polymer/paper-dialog": "^3.0.1", - "@polymer/paper-dialog-behavior": "^3.0.1", - "@polymer/paper-dialog-scrollable": "^3.0.1", "@polymer/paper-dropdown-menu": "^3.2.0", "@polymer/paper-input": "^3.2.1", "@polymer/paper-item": "^3.0.1", diff --git a/src/components/dialog/ha-iron-focusables-helper.js b/src/components/dialog/ha-iron-focusables-helper.js deleted file mode 100644 index 1f75e82c52..0000000000 --- a/src/components/dialog/ha-iron-focusables-helper.js +++ /dev/null @@ -1,89 +0,0 @@ -/** -@license -Copyright (c) 2016 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at -http://polymer.github.io/LICENSE.txt The complete set of authors may be found at -http://polymer.github.io/AUTHORS.txt The complete set of contributors may be -found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as -part of the polymer project is also subject to an additional IP rights grant -found at http://polymer.github.io/PATENTS.txt -*/ -/* - Fixes issue with not using shadow dom properly in iron-overlay-behavior/icon-focusables-helper.js -*/ -import { IronFocusablesHelper } from "@polymer/iron-overlay-behavior/iron-focusables-helper"; -import { dom } from "@polymer/polymer/lib/legacy/polymer.dom"; - -export const HaIronFocusablesHelper = { - /** - * Returns a sorted array of tabbable nodes, including the root node. - * It searches the tabbable nodes in the light and shadow dom of the chidren, - * sorting the result by tabindex. - * @param {!Node} node - * @return {!Array} - */ - getTabbableNodes: function (node) { - const result = []; - // If there is at least one element with tabindex > 0, we need to sort - // the final array by tabindex. - const needsSortByTabIndex = this._collectTabbableNodes(node, result); - if (needsSortByTabIndex) { - return IronFocusablesHelper._sortByTabIndex(result); - } - return result; - }, - - /** - * Searches for nodes that are tabbable and adds them to the `result` array. - * Returns if the `result` array needs to be sorted by tabindex. - * @param {!Node} node The starting point for the search; added to `result` - * if tabbable. - * @param {!Array} result - * @return {boolean} - * @private - */ - _collectTabbableNodes: function (node, result) { - // If not an element or not visible, no need to explore children. - if ( - node.nodeType !== Node.ELEMENT_NODE || - !IronFocusablesHelper._isVisible(node) - ) { - return false; - } - const element = /** @type {!HTMLElement} */ (node); - const tabIndex = IronFocusablesHelper._normalizedTabIndex(element); - let needsSort = tabIndex > 0; - if (tabIndex >= 0) { - result.push(element); - } - - // In ShadowDOM v1, tab order is affected by the order of distrubution. - // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B]; - // in ShadowDOM v0 tab order is not affected by the distrubution order, - // in fact getTabbableNodes(#root) returns [#B, #A]. - //
- // - // - // - // - // - // - //
- // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0. - let children; - if (element.localName === "content" || element.localName === "slot") { - children = dom(element).getDistributedNodes(); - } else { - // ///////////////////////// - // Use shadow root if possible, will check for distributed nodes. - // THIS IS THE CHANGED LINE - children = dom(element.shadowRoot || element.root || element).children; - // ///////////////////////// - } - for (let i = 0; i < children.length; i++) { - // Ensure method is always invoked to collect tabbable children. - needsSort = this._collectTabbableNodes(children[i], result) || needsSort; - } - return needsSort; - }, -}; diff --git a/src/components/dialog/ha-paper-dialog.ts b/src/components/dialog/ha-paper-dialog.ts deleted file mode 100644 index edaeff9315..0000000000 --- a/src/components/dialog/ha-paper-dialog.ts +++ /dev/null @@ -1,31 +0,0 @@ -import "@polymer/paper-dialog/paper-dialog"; -import type { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; -import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class"; -import type { Constructor } from "../../types"; -import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper"; - -const paperDialogClass = customElements.get( - "paper-dialog" -) as Constructor; - -// behavior that will override existing iron-overlay-behavior and call the fixed implementation -const haTabFixBehaviorImpl = { - get _focusableNodes() { - return HaIronFocusablesHelper.getTabbableNodes(this); - }, -}; - -// paper-dialog that uses the haTabFixBehaviorImpl behavior -// export class HaPaperDialog extends paperDialogClass {} -// @ts-ignore -export class HaPaperDialog - extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass) - implements PaperDialogElement {} - -declare global { - interface HTMLElementTagNameMap { - "ha-paper-dialog": HaPaperDialog; - } -} -// @ts-ignore -customElements.define("ha-paper-dialog", HaPaperDialog); diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index d5f9abcc67..0b1633845d 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -24,7 +24,7 @@ export const createCloseHeading = ( // @ts-expect-error export class HaDialog extends Dialog { public scrollToPos(x: number, y: number) { - this.contentElement.scrollTo(x, y); + this.contentElement?.scrollTo(x, y); } protected renderHeading() { @@ -44,6 +44,12 @@ export class HaDialog extends Dialog { justify-content: var(--justify-action-buttons, flex-end); padding-bottom: max(env(safe-area-inset-bottom), 8px); } + .mdc-dialog__actions span:nth-child(1) { + flex: var(--secondary-action-button-flex, unset); + } + .mdc-dialog__actions span:nth-child(2) { + flex: var(--primary-action-button-flex, unset); + } .mdc-dialog__container { align-items: var(--vertial-align-dialog, center); } diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index b31095e2c1..e7fcb1572b 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import { mdiClose } from "@mdi/js"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 7f6cb5e486..4c8fa20780 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -1,7 +1,5 @@ /* eslint-disable lit/prefer-static-styles */ import { mdiMicrophone } from "@mdi/js"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { @@ -17,7 +15,6 @@ import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../common/dom/fire_event"; import { SpeechRecognition } from "../../common/dom/speech-recognition"; import { uid } from "../../common/util/uid"; -import "../../components/dialog/ha-paper-dialog"; import "../../components/ha-icon-button"; import { AgentInfo, @@ -27,6 +24,9 @@ import { } from "../../data/conversation"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; +import "../../components/ha-dialog"; +import type { HaDialog } from "../../components/ha-dialog"; +import "@material/mwc-button/mwc-button"; interface Message { who: string; @@ -56,7 +56,7 @@ export class HaVoiceCommandDialog extends LitElement { @state() private _agentInfo?: AgentInfo; - @query("#messages", true) private messages!: PaperDialogScrollableElement; + @query("ha-dialog", true) private _dialog!: HaDialog; private recognition!: SpeechRecognition; @@ -70,74 +70,42 @@ export class HaVoiceCommandDialog extends LitElement { this._agentInfo = await getAgentInfo(this.hass); } + public async closeDialog(): Promise { + this._opened = false; + if (this.recognition) { + this.recognition.abort(); + } + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + protected render(): TemplateResult { - // CSS custom property mixins only work in render https://github.com/Polymer/lit-element/issues/633 + if (!this._opened) { + return html``; + } return html` - - - ${this._agentInfo && this._agentInfo.onboarding - ? html` -
- ${this._agentInfo.onboarding.text} -
- ${this.hass.localize("ui.common.yes")}! - ${this.hass.localize("ui.common.no")} + +
+ ${this._agentInfo && this._agentInfo.onboarding + ? html` +
+ ${this._agentInfo.onboarding.text} +
+ ${this.hass.localize("ui.common.yes")}! + ${this.hass.localize("ui.common.no")} +
-
- ` - : ""} - + ` + : ""} ${this._conversation.map( (message) => html`
@@ -157,8 +125,8 @@ export class HaVoiceCommandDialog extends LitElement {
` : ""} - -
+
+
- + `; } @@ -346,18 +314,7 @@ export class HaVoiceCommandDialog extends LitElement { } private _scrollMessagesBottom() { - this.messages.scrollTarget.scrollTop = - this.messages.scrollTarget.scrollHeight; - if (this.messages.scrollTarget.scrollTop === 0) { - fireEvent(this.messages, "iron-resize"); - } - } - - private _openedChanged(ev: CustomEvent) { - this._opened = ev.detail.value; - if (!this._opened && this.recognition) { - this.recognition.abort(); - } + this._dialog.scrollToPos(0, 99999); } private _computeMessageClasses(message: Message) { @@ -368,10 +325,6 @@ export class HaVoiceCommandDialog extends LitElement { return [ haStyleDialog, css` - :host { - z-index: 103; - } - ha-icon-button { color: var(--secondary-text-color); } @@ -380,13 +333,12 @@ export class HaVoiceCommandDialog extends LitElement { color: var(--primary-color); } - .input { - margin: 0 0 16px 0; + ha-dialog { + --primary-action-button-flex: 1; + --secondary-action-button-flex: 0; + --mdc-dialog-max-width: 450px; } - ha-paper-dialog { - width: 450px; - } a.button { text-decoration: none; } @@ -394,16 +346,7 @@ export class HaVoiceCommandDialog extends LitElement { width: 100%; } .onboarding { - padding: 0 24px; - } - paper-dialog-scrollable.top-border::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: var(--divider-color); + border-bottom: 1px solid var(--divider-color); } .side-by-side { display: flex; diff --git a/src/mixins/dialog-mixin.js b/src/mixins/dialog-mixin.js deleted file mode 100644 index cc8103935a..0000000000 --- a/src/mixins/dialog-mixin.js +++ /dev/null @@ -1,25 +0,0 @@ -import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior"; -import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class"; -import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin"; -import { EventsMixin } from "./events-mixin"; -/** - * @polymerMixin - * @appliesMixin EventsMixin - * @appliesMixin PaperDialogBehavior - */ -export default dedupingMixin( - (superClass) => - class extends mixinBehaviors( - [EventsMixin, PaperDialogBehavior], - superClass - ) { - static get properties() { - return { - withBackdrop: { - type: Boolean, - value: true, - }, - }; - } - } -); diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index 5daf53b5e0..217a330d49 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { property, state } from "lit/decorators"; diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts index 3c6752ad46..a19ccbed10 100644 --- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts +++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts @@ -1,20 +1,18 @@ import "@material/mwc-button"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/dialog/ha-paper-dialog"; import "../../../../components/ha-circular-progress"; import type { AutomationConfig } from "../../../../data/automation"; import { convertThingTalk } from "../../../../data/cloud"; -import type { PolymerChangedEvent } from "../../../../polymer-types"; import { haStyle, haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "./ha-thingtalk-placeholders"; import type { PlaceholderValues } from "./ha-thingtalk-placeholders"; import type { ThingtalkDialogParams } from "./show-dialog-thingtalk"; +import "../../../../components/ha-dialog"; export interface Placeholder { name: string; @@ -38,8 +36,6 @@ class DialogThingtalk extends LitElement { @state() private _submitting = false; - @state() private _opened = false; - @state() private _placeholders?: PlaceholderContainer; @query("#input") private _input?: PaperInputElement; @@ -51,7 +47,6 @@ class DialogThingtalk extends LitElement { public async showDialog(params: ThingtalkDialogParams): Promise { this._params = params; this._error = undefined; - this._opened = true; if (params.input) { this._value = params.input; await this.updateComplete; @@ -61,10 +56,10 @@ class DialogThingtalk extends LitElement { public closeDialog() { this._placeholders = undefined; + this._params = undefined; if (this._input) { this._input.value = null; } - this._opened = false; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -77,26 +72,22 @@ class DialogThingtalk extends LitElement { `; } return html` - -

- ${this.hass.localize( - `ui.panel.config.automation.thingtalk.task_selection.header` - )} -

- +
${this._error ? html`
${this._error}
` : ""} ${this.hass.localize( `ui.panel.config.automation.thingtalk.task_selection.introduction` @@ -143,23 +134,25 @@ class DialogThingtalk extends LitElement { class="attribution" >Powered by Almond - -
- - ${this.hass.localize(`ui.common.skip`)} - - - ${this._submitting - ? html`` - : ""} - ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)} -
- + + ${this.hass.localize(`ui.common.skip`)} + + + ${this._submitting + ? html`` + : ""} + ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)} + + `; } @@ -234,12 +227,6 @@ class DialogThingtalk extends LitElement { this.closeDialog(); }; - private _openedChanged(ev: PolymerChangedEvent): void { - if (!ev.detail.value) { - this.closeDialog(); - } - } - private _handleKeyUp(ev: KeyboardEvent) { if (ev.keyCode === 13) { this._generate(); @@ -255,7 +242,7 @@ class DialogThingtalk extends LitElement { haStyle, haStyleDialog, css` - ha-paper-dialog { + ha-dialog { max-width: 500px; } mwc-button.left { diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts index 0f62bb0f39..9731a96394 100644 --- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts +++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts @@ -25,7 +25,6 @@ import { import { subscribeEntityRegistry } from "../../../../data/entity_registry"; import { domainToName } from "../../../../data/integration"; import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; -import { PolymerChangedEvent } from "../../../../polymer-types"; import { haStyleDialog } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; import { Placeholder, PlaceholderContainer } from "./dialog-thingtalk"; @@ -124,18 +123,14 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { protected render(): TemplateResult { return html` - -

- ${this.hass.localize( - `ui.panel.config.automation.thingtalk.link_devices.header` - )} -

- +
${this._error ? html`
${this._error}
` : ""} ${Object.entries(this.placeholders).map( ([type, placeholders]) => @@ -243,16 +238,18 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { })} ` )} - -
- - ${this.hass.localize(`ui.common.skip`)} - - - ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)} -
- + + ${this.hass.localize(`ui.common.skip`)} + + + ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)} + + `; } @@ -440,11 +437,6 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { this.requestUpdate("_placeholderValues"); } }); - - fireEvent( - this.shadowRoot!.querySelector("ha-paper-dialog")! as HTMLElement, - "iron-resize" - ); } private _entityPicked(ev: Event): void { @@ -465,24 +457,16 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { fireEvent(this, "placeholders-filled", { value: this._placeholderValues }); } - private _openedChanged(ev: PolymerChangedEvent): void { - // The opened-changed event doesn't leave the shadowdom so we re-dispatch it - this.dispatchEvent(new CustomEvent(ev.type, ev)); - } - static get styles(): CSSResultGroup { return [ haStyleDialog, css` - ha-paper-dialog { + ha-dialog { max-width: 500px; } mwc-button.left { margin-right: auto; } - paper-dialog-scrollable { - margin-top: 10px; - } h3 { margin: 10px 0 0 0; font-weight: 500; diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts index e9d9a4f0ea..ad2cb1eb6c 100644 --- a/src/panels/config/blueprint/dialog-import-blueprint.ts +++ b/src/panels/config/blueprint/dialog-import-blueprint.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts index a91261914e..0616c0edd9 100644 --- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts +++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts @@ -2,8 +2,7 @@ import "@material/mwc-button"; import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { formatDateTime } from "../../../../common/datetime/format_date_time"; -import "../../../../components/dialog/ha-paper-dialog"; -import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog"; +import { fireEvent } from "../../../../common/dom/fire_event"; import { haStyle } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate"; @@ -15,11 +14,13 @@ class DialogCloudCertificate extends LitElement { @property() private _params?: CloudCertificateDialogParams; - public async showDialog(params: CloudCertificateDialogParams) { + public showDialog(params: CloudCertificateDialogParams) { this._params = params; - // Wait till dialog is rendered. - await this.updateComplete; - this._dialog.open(); + } + + public closeDialog() { + this._params = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); } protected render() { @@ -29,12 +30,12 @@ class DialogCloudCertificate extends LitElement { const { certificateInfo } = this._params; return html` - -

- ${this.hass!.localize( - "ui.panel.config.cloud.dialog_certificate.certificate_information" - )} -

+

${this.hass!.localize( @@ -56,31 +57,21 @@ class DialogCloudCertificate extends LitElement {

-
- ${this.hass!.localize( - "ui.panel.config.cloud.dialog_certificate.close" - )} -
- + + ${this.hass!.localize( + "ui.panel.config.cloud.dialog_certificate.close" + )} + + `; } - private get _dialog(): HaPaperDialog { - return this.shadowRoot!.querySelector("ha-paper-dialog")!; - } - - private _closeDialog() { - this._dialog.close(); - } - static get styles(): CSSResultGroup { return [ haStyle, css` - ha-paper-dialog { - width: 535px; + ha-dialog { + --mdc-dialog-max-width: 535px; } .break-word { overflow-wrap: break-word; diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts index ce44207e7c..b018af2959 100644 --- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts +++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts @@ -1,11 +1,9 @@ import "@material/mwc-button"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement } from "lit"; import { state } from "lit/decorators"; -import "../../../../components/dialog/ha-paper-dialog"; -import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog"; +import { fireEvent } from "../../../../common/dom/fire_event"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; import { haStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; @@ -19,11 +17,13 @@ export class DialogManageCloudhook extends LitElement { @state() private _params?: WebhookDialogParams; - public async showDialog(params: WebhookDialogParams) { + public showDialog(params: WebhookDialogParams) { this._params = params; - // Wait till dialog is rendered. - await this.updateComplete; - this._dialog.open(); + } + + public closeDialog() { + this._params = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); } protected render() { @@ -39,14 +39,14 @@ export class DialogManageCloudhook extends LitElement { ) : documentationUrl(this.hass!, `/integrations/${webhook.domain}/`); return html` - -

- ${this.hass!.localize( - "ui.panel.config.cloud.dialog_cloudhook.webhook_for", - "name", - webhook.name - )} -

+

${this.hass!.localize( @@ -79,36 +79,29 @@ export class DialogManageCloudhook extends LitElement {

-
- - ${this.hass!.localize( - "ui.panel.config.cloud.dialog_cloudhook.view_documentation" - )} - - ${this.hass!.localize( - "ui.panel.config.cloud.dialog_cloudhook.close" - )} -
- + + + ${this.hass!.localize( + "ui.panel.config.cloud.dialog_cloudhook.view_documentation" + )} + + + + ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")} + + `; } - private get _dialog(): HaPaperDialog { - return this.shadowRoot!.querySelector("ha-paper-dialog")!; - } - private get _paperInput(): PaperInputElement { return this.shadowRoot!.querySelector("paper-input")!; } - private _closeDialog() { - this._dialog.close(); - } - private async _disableWebhook() { showConfirmationDialog(this, { text: this.hass!.localize( @@ -118,7 +111,7 @@ export class DialogManageCloudhook extends LitElement { confirmText: this.hass!.localize("ui.common.disable"), confirm: () => { this._params!.disableHook(); - this._closeDialog(); + this.closeDialog(); }, }); } @@ -147,7 +140,7 @@ export class DialogManageCloudhook extends LitElement { return [ haStyle, css` - ha-paper-dialog { + ha-dialog { width: 650px; } paper-input { @@ -156,7 +149,7 @@ export class DialogManageCloudhook extends LitElement { button.link { color: var(--primary-color); } - .paper-dialog-buttons a { + a { text-decoration: none; } `, diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index 067648de05..4c18a4e2b9 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -90,7 +90,7 @@ export class ZHAAddGroupPage extends LitElement { > -
+
-
+
-
+
- -

OpenZwave internal logfile

- + + 
[[_ozwLog]]
- - +
+ `; } @@ -56,7 +54,6 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) { this._opened = true; this._dialogClosedCallback = dialogClosedCallback; this._numLogLines = _numLogLines; - setTimeout(() => this.$.pwaDialog.center(), 0); if (_tail) { this.setProperties({ _intervalId: setInterval(() => { @@ -66,6 +63,14 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) { } } + closeDialog() { + clearInterval(this._intervalId); + this._opened = false; + const closedEvent = true; + this._dialogClosedCallback({ closedEvent }); + this._dialogClosedCallback = null; + } + async _refreshLog() { const info = await this.hass.callApi( "GET", @@ -73,16 +78,6 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) { ); this.setProperties({ _ozwLog: info }); } - - _dialogClosed(ev) { - if (ev.target.nodeName === "ZWAVE-LOG-DIALOG") { - clearInterval(this._intervalId); - this._opened = false; - const closedEvent = true; - this._dialogClosedCallback({ closedEvent }); - this._dialogClosedCallback = null; - } - } } customElements.define("zwave-log-dialog", ZwaveLogDialog); diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts index af540b58d5..724b04a3d7 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts @@ -1,9 +1,7 @@ -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import deepFreeze from "deep-freeze"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/dialog/ha-paper-dialog"; import type { LovelaceCardConfig } from "../../../../data/lovelace"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts index 7116d09d05..3ba941d61e 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts @@ -1,9 +1,7 @@ -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import deepFreeze from "deep-freeze"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/dialog/ha-paper-dialog"; import "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import { LovelaceCardConfig } from "../../../../data/lovelace"; diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index 961f20cd8e..5b2a00fc09 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -197,21 +197,6 @@ export class HuiSaveConfig extends LitElement implements HassDialog { 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; - } ha-switch { padding-bottom: 16px; } diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts index 7465d3d757..606d822967 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts @@ -1,16 +1,14 @@ import "@material/mwc-button"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/dialog/ha-paper-dialog"; -import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog"; import "../../../../components/ha-circular-progress"; import type { LovelaceConfig } from "../../../../data/lovelace"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import type { Lovelace } from "../../types"; import "./hui-lovelace-editor"; +import "../../../../components/ha-dialog"; @customElement("hui-dialog-edit-lovelace") export class HuiDialogEditLovelace extends LitElement { @@ -20,44 +18,31 @@ export class HuiDialogEditLovelace extends LitElement { private _config?: LovelaceConfig; - private _saving: boolean; + private _saving = false; - public constructor() { - super(); - this._saving = false; - } - - public async showDialog(lovelace: Lovelace): Promise { + public showDialog(lovelace: Lovelace): void { this._lovelace = lovelace; - if (this._dialog == null) { - await this.updateComplete; - } - const { views, ...lovelaceConfig } = this._lovelace!.config; this._config = lovelaceConfig as LovelaceConfig; - - this._dialog.open(); } public closeDialog(): void { this._config = undefined; - this._dialog.close(); fireEvent(this, "dialog-closed", { dialog: this.localName }); } - private get _dialog(): HaPaperDialog { - return this.shadowRoot!.querySelector("ha-paper-dialog")!; - } - protected render(): TemplateResult { + if (!this._config) { + return html``; + } return html` - -

- ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_lovelace.header" - )} -

- + +
${this.hass!.localize( "ui.panel.lovelace.editor.edit_lovelace.explanation" )} @@ -65,27 +50,26 @@ export class HuiDialogEditLovelace extends LitElement { .hass=${this.hass} .config=${this._config} @lovelace-config-changed=${this._ConfigChanged} - > -
- ${this.hass!.localize("ui.common.cancel")} - - ${this._saving - ? html`` - : ""} - ${this.hass!.localize("ui.common.save")} + >
- + + ${this.hass!.localize("ui.common.cancel")} + + + ${this._saving + ? html`` + : ""} + ${this.hass!.localize("ui.common.save")} + `; } @@ -128,26 +112,7 @@ export class HuiDialogEditLovelace extends LitElement { } static get styles(): CSSResultGroup { - 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; - } - `, - ]; + return haStyleDialog; } } diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts index b29222a70e..c6ede3156c 100644 --- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts +++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts @@ -5,7 +5,6 @@ import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/dialog/ha-paper-dialog"; import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-icon"; import "../../../../components/ha-paper-dropdown-menu"; diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js index 3b999d8f49..83d3d5bdf0 100644 --- a/src/panels/mailbox/ha-dialog-show-audio-message.js +++ b/src/panels/mailbox/ha-dialog-show-audio-message.js @@ -2,7 +2,7 @@ import "@material/mwc-button"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../components/dialog/ha-paper-dialog"; +import "../../components/ha-dialog"; import "../../components/ha-circular-progress"; import "../../components/ha-icon"; import "../../components/ha-icon-button"; @@ -19,41 +19,19 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) { .error { color: red; } - @media all and (max-width: 500px) { - ha-paper-dialog { - margin: 0; - width: 100%; - max-height: calc(100% - var(--header-height)); - - position: fixed !important; - bottom: 0px; - left: 0px; - right: 0px; - overflow: scroll; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - } - } - - ha-paper-dialog { - border-radius: 2px; - } - ha-paper-dialog p { + p { color: var(--secondary-text-color); } - .icon { - float: right; + text-align: right; } - -

- [[localize('ui.panel.mailbox.playback_title')]] +