Move lovelace card edit dialog to mwc-dialog (#6130)

src/components/ha-dialog.ts

@@ -13,7 +13,7 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
   <mwc-icon-button
     aria-label=${hass.localize("ui.dialogs.generic.close")}
     dialogAction="close"
-    class="close_button"
+    class="header_button"
   >
     <ha-svg-icon path=${mdiClose}></ha-svg-icon>
   </mwc-icon-button>
@@ -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;
         }
       `,
     ];

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");
     }
   }
 

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`
-      <ha-paper-dialog with-backdrop opened modal @keyup=${this._handleKeyUp}>
-        <div class="header">
-          <h2>
-            ${heading}
-          </h2>
-          ${this._documentationURL !== undefined
-            ? html`
-                <a
-                  class="help-icon"
-                  href=${this._documentationURL}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <ha-icon-button
-                    icon="hass:help-circle"
-                    .title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
-                  ></ha-icon-button>
-                </a>
-              `
-            : ""}
-        </div>
-        <paper-dialog-scrollable>
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        @keyup=${this._handleKeyUp}
+        .heading=${html`${heading}
+        ${this._documentationURL !== undefined
+          ? html`
+              <a
+                class="header_button"
+                href=${this._documentationURL}
+                title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <mwc-icon-button>
+                  <ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>
+                </mwc-icon-button>
+              </a>
+            `
+          : ""}`}
+      >
+        <div>
           ${this._cardConfig === undefined
             ? html`
                 <hui-card-picker
@@ -174,42 +175,40 @@ export class HuiDialogEditCard extends LitElement {
                   </div>
                 </div>
               `}
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          ${this._cardConfig !== undefined
-            ? html`
-                <mwc-button
-                  @click=${this._toggleMode}
-                  .disabled=${!this._guiModeAvailable}
-                  class="gui-mode-button"
-                >
-                  ${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"
-                  )}
-                </mwc-button>
-              `
-            : ""}
-          <mwc-button @click=${this._close}>
-            ${this.hass!.localize("ui.common.cancel")}
-          </mwc-button>
-          ${this._cardConfig !== undefined
-            ? html`
-                <mwc-button
-                  ?disabled=${!this._canSave || this._saving}
-                  @click=${this._save}
-                >
-                  ${this._saving
-                    ? html`
-                        <paper-spinner active alt="Saving"></paper-spinner>
-                      `
-                    : this.hass!.localize("ui.common.save")}
-                </mwc-button>
-              `
-            : ``}
         </div>
-      </ha-paper-dialog>
+        ${this._cardConfig !== undefined
+          ? html`
+              <mwc-button
+                slot="secondaryAction"
+                @click=${this._toggleMode}
+                .disabled=${!this._guiModeAvailable}
+                class="gui-mode-button"
+              >
+                ${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"
+                )}
+              </mwc-button>
+            `
+          : ""}
+        <mwc-button slot="primaryAction" @click=${this._close}>
+          ${this.hass!.localize("ui.common.cancel")}
+        </mwc-button>
+        ${this._cardConfig !== undefined
+          ? html`
+              <mwc-button
+                slot="primaryAction"
+                ?disabled=${!this._canSave || this._saving}
+                @click=${this._save}
+              >
+                ${this._saving
+                  ? html` <paper-spinner active alt="Saving"></paper-spinner> `
+                  : this.hass!.localize("ui.common.save")}
+              </mwc-button>
+            `
+          : ``}
+      </ha-dialog>
     `;
   }
 
@@ -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;
-        }
       `,
     ];
   }