Use ha-dialog for dialog-system-log-details, add close icon button (#7513)

src/panels/config/logs/dialog-system-log-detail.ts

@@ -1,6 +1,6 @@
+import "../../../components/ha-header-bar";
 import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiContentCopy } from "@mdi/js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import { mdiContentCopy, mdiClose } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { PaperTooltipElement } from "@polymer/paper-tooltip/paper-tooltip";
 import {
@@ -14,7 +14,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/dialog/ha-paper-dialog";
+import "../../../components/ha-dialog";
 import "../../../components/ha-svg-icon";
 import {
   domainToName,
@@ -23,7 +23,6 @@ import {
   IntegrationManifest,
 } from "../../../data/integration";
 import { getLoggedErrorIntegration } from "../../../data/system_log";
-import type { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
@@ -36,7 +35,7 @@ class DialogSystemLogDetail extends LitElement {
 
   @internalProperty() private _manifest?: IntegrationManifest;
 
-  @query("paper-tooltip", true) private _toolTip?: PaperTooltipElement;
+  @query("paper-tooltip") private _toolTip?: PaperTooltipElement;
 
   public async showDialog(params: SystemLogDetailDialogParams): Promise<void> {
     this._params = params;
@@ -69,23 +68,23 @@ class DialogSystemLogDetail extends LitElement {
     const integration = getLoggedErrorIntegration(item);
 
     return html`
-      <ha-paper-dialog
-        with-backdrop
-        opened
-        @opened-changed="${this._openedChanged}"
-      >
-        <div class="heading">
-          <h2>
+      <ha-dialog open @closed=${this.closeDialog} hideActions heading=${true}>
+        <ha-header-bar slot="heading">
+          <mwc-icon-button slot="navigationIcon" dialogAction="cancel">
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          </mwc-icon-button>
+          <span slot="title">
             ${this.hass.localize(
               "ui.panel.config.logs.details",
               "level",
               item.level
             )}
-          </h2>
-          <mwc-icon-button id="copy" @click=${this._copyLog}>
+          </span>
+          <mwc-icon-button id="copy" @click=${this._copyLog} slot="actionItems">
             <ha-svg-icon .path=${mdiContentCopy}></ha-svg-icon>
           </mwc-icon-button>
           <paper-tooltip
+            slot="actionItems"
             manual-mode
             for="copy"
             position="left"
@@ -93,8 +92,8 @@ class DialogSystemLogDetail extends LitElement {
             offset="4"
             >${this.hass.localize("ui.common.copied")}</paper-tooltip
           >
-        </div>
-        <paper-dialog-scrollable>
+        </ha-header-bar>
+        <div class="contents">
           <p>
             Logger: ${item.name}<br />
             Source: ${item.source.join(":")}
@@ -150,8 +149,8 @@ class DialogSystemLogDetail extends LitElement {
               `
             : item.message[0]}
           ${item.exception ? html` <pre>${item.exception}</pre> ` : html``}
-        </paper-dialog-scrollable>
-      </ha-paper-dialog>
+        </div>
+      </ha-dialog>
     `;
   }
 
@@ -163,15 +162,9 @@ class DialogSystemLogDetail extends LitElement {
     }
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    if (!(ev.detail as any).value) {
-      this.closeDialog();
-    }
-  }
-
   private _copyLog(): void {
     const copyElement = this.shadowRoot?.querySelector(
-      "paper-dialog-scrollable"
+      ".contents"
     ) as HTMLElement;
 
     const selection = window.getSelection()!;
@@ -192,9 +185,6 @@ class DialogSystemLogDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-paper-dialog {
-          direction: ltr;
-        }
         a {
           color: var(--primary-color);
         }
@@ -205,13 +195,19 @@ class DialogSystemLogDetail extends LitElement {
           margin-bottom: 0;
           font-family: var(--code-font-family, monospace);
         }
-        .heading {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
+
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
-        .heading ha-svg-icon {
-          cursor: pointer;
+
+        @media all and (min-width: 451px) and (min-height: 501px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 90vw;
+          }
         }
       `,
     ];