Entity dialogs: Remove paper element and align dialog header style (#6370)

* Entity dialogs: Remove paper element and align dialog header style * Remove centerTitle
2025-04-25 13:57:21 +00:00 · 2020-07-13 19:37:48 +02:00 · 2020-07-13 19:37:48 +02:00 · 1c73007ae6
commit 1c73007ae6
parent 2f7d744228
6 changed files with 228 additions and 84 deletions
--- a/package.json
+++ b/package.json
@ -37,6 +37,9 @@
    "@material/mwc-menu": "^0.17.2",
    "@material/mwc-ripple": "^0.17.2",
    "@material/mwc-switch": "^0.17.2",
+    "@material/mwc-tab": "^0.17.2",
+    "@material/mwc-tab-bar": "^0.17.2",
+    "@material/top-app-bar": "=8.0.0-canary.a78ceb112.0",
    "@mdi/js": "5.3.45",
    "@mdi/svg": "5.3.45",
    "@polymer/app-layout": "^3.0.2",
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@ -57,7 +57,7 @@ export class HaDialog extends MwcDialog {
        .header_button {
          position: absolute;
          right: 16px;
-          top: 12px;
+          top: 10px;
          text-decoration: none;
          color: inherit;
        }
--- a/src/components/ha-header-bar.ts
+++ b/src/components/ha-header-bar.ts
@ -0,0 +1,47 @@
+import { customElement, LitElement, html, unsafeCSS, css } from "lit-element";
+// @ts-ignore
+import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+
+@customElement("ha-header-bar")
+export class HaHeaderBar extends LitElement {
+  protected render() {
+    return html`<header class="mdc-top-app-bar">
+      <div class="mdc-top-app-bar__row">
+        <section
+          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
+          id="navigation"
+        >
+          <slot name="navigationIcon"></slot>
+          <span class="mdc-top-app-bar__title">
+            <slot name="title"></slot>
+          </span>
+        </section>
+        <section
+          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
+          id="actions"
+          role="toolbar"
+        >
+          <slot name="actionItems"></slot>
+        </section>
+      </div>
+    </header>`;
+  }
+
+  static get styles() {
+    return [
+      unsafeCSS(topAppBarStyles),
+      css`
+        .mdc-top-app-bar {
+          position: static;
+          color: var(--mdc-theme-on-primary, #fff);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-header-bar": HaHeaderBar;
+  }
+}
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@ -1,7 +1,6 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "../../components/ha-header-bar";
 import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@ -94,18 +93,20 @@ export class MoreInfoDialog extends LitElement {
        hideActions
        data-domain=${domain}
      >
-        <app-toolbar slot="heading">
+        <ha-header-bar slot="heading">
          <mwc-icon-button
+            slot="navigationIcon"
            .label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")}
            dialogAction="cancel"
          >
            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
          </mwc-icon-button>
-          <div class="main-title" main-title @click=${this._enlarge}>
+          <div slot="title" class="main-title" @click=${this._enlarge}>
            ${computeStateName(stateObj)}
          </div>
          ${this.hass.user!.is_admin
            ? html`<mwc-icon-button
+                slot="actionItems"
                .label=${this.hass.localize(
                  "ui.dialogs.more_info_control.settings"
                )}
@ -119,6 +120,7 @@ export class MoreInfoDialog extends LitElement {
            stateObj.attributes.id) ||
            EDITABLE_DOMAINS.includes(domain))
            ? html` <mwc-icon-button
+                slot="actionItems"
                .label=${this.hass.localize(
                  "ui.dialogs.more_info_control.edit"
                )}
@ -127,7 +129,7 @@ export class MoreInfoDialog extends LitElement {
                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
              </mwc-icon-button>`
            : ""}
-        </app-toolbar>
+        </ha-header-bar>
        <div class="content">
          ${DOMAINS_NO_INFO.includes(domain)
            ? ""
@ -247,29 +249,19 @@ export class MoreInfoDialog extends LitElement {
          --dialog-content-position: static;
        }

-        app-toolbar {
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--card-background-color);
          flex-shrink: 0;
-          color: var(--primary-text-color);
-          background-color: var(--secondary-background-color);
-        }
-
-        app-toolbar [main-title] {
-          /* Design guideline states 24px, changed to 16 to align with state info */
-          margin-left: 16px;
-          line-height: 1.3em;
-          max-height: 2.6em;
-          overflow: hidden;
-          /* webkit and blink still support simple multiline text-overflow */
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          text-overflow: ellipsis;
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
        }

        @media all and (max-width: 450px), all and (max-height: 500px) {
-          app-toolbar {
-            background-color: var(--app-header-background-color);
-            color: var(--app-header-text-color, white);
+          ha-header-bar {
+            --mdc-theme-primary: var(--app-header-background-color);
+            --mdc-theme-on-primary: var(--app-header-text-color, white);
+            border-bottom: none;
          }
        }

@ -287,7 +279,6 @@ export class MoreInfoDialog extends LitElement {
          }

          .main-title {
-            pointer-events: auto;
            cursor: default;
          }

--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/src/panels/config/entities/dialog-entity-editor.ts
@ -1,6 +1,5 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
+import "@material/mwc-tab-bar";
+import "@material/mwc-tab";
 import "@material/mwc-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
@ -17,6 +16,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-dialog";
+import "../../../components/ha-header-bar";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-related-items";
 import {
@ -51,7 +51,7 @@ export class DialogEntityEditor extends LitElement {
    | ExtEntityRegistryEntry
    | null;

-  @property() private _curTab?: string;
+  @property() private _curTab = "tab-settings";

  @property() private _extraTabs: Tabs = {};

@ -92,19 +92,21 @@ export class DialogEntityEditor extends LitElement {
        @close-dialog=${this.closeDialog}
      >
        <div slot="heading">
-          <app-toolbar>
+          <ha-header-bar>
            <mwc-icon-button
+              slot="navigationIcon"
              .label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
              dialogAction="cancel"
            >
              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
            </mwc-icon-button>
-            <div class="main-title" main-title>
+            <span slot="title">
              ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
-            </div>
+            </span>
            ${stateObj
              ? html`
                  <mwc-icon-button
+                    slot="actionItems"
                    .label=${this.hass.localize(
                      "ui.dialogs.entity_registry.control"
                    )}
@ -114,25 +116,34 @@ export class DialogEntityEditor extends LitElement {
                  </mwc-icon-button>
                `
              : ""}
-          </app-toolbar>
-          <paper-tabs
-            .selected=${this._curTabIndex}
-            @selected-item-changed=${this._handleTabSelected}
+          </ha-header-bar>
+          <mwc-tab-bar
+            .activeIndex=${this._curTabIndex}
+            @MDCTabBar:activated=${this._handleTabActivated}
+            @MDCTab:interacted=${this._handleTabInteracted}
          >
-            <paper-tab id="tab-settings">
-              ${this.hass.localize("ui.dialogs.entity_registry.settings")}
-            </paper-tab>
+            <mwc-tab
+              id="tab-settings"
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.settings"
+              )}
+            >
+            </mwc-tab>
            ${Object.entries(this._extraTabs).map(
              ([key, tab]) => html`
-                <paper-tab id=${key}>
-                  ${this.hass.localize(tab.translationKey) || key}
-                </paper-tab>
+                <mwc-tab
+                  id=${key}
+                  .label=${this.hass.localize(tab.translationKey) || key}
+                >
+                </mwc-tab>
              `
            )}
-            <paper-tab id="tab-related">
-              ${this.hass.localize("ui.dialogs.entity_registry.related")}
-            </paper-tab>
-          </paper-tabs>
+            <mwc-tab
+              id="tab-related"
+              .label=${this.hass.localize("ui.dialogs.entity_registry.related")}
+            >
+            </mwc-tab>
+          </mwc-tab-bar>
        </div>
        <div class="wrapper">
          ${cache(this._renderTab())}
@ -187,11 +198,12 @@ export class DialogEntityEditor extends LitElement {
    }
  }

-  private _handleTabSelected(ev: CustomEvent): void {
-    if (!ev.detail.value) {
-      return;
+  private _handleTabActivated(ev: CustomEvent): void {
+    this._curTabIndex = ev.detail.index;
  }
-    this._curTab = ev.detail.value.id;
+
+  private _handleTabInteracted(ev: CustomEvent): void {
+    this._curTab = ev.detail.tabId;
  }

  private async _loadPlatformSettingTabs(): Promise<void> {
@ -220,24 +232,15 @@ export class DialogEntityEditor extends LitElement {
    return [
      haStyleDialog,
      css`
-        app-toolbar {
-          color: var(--primary-text-color);
-          background-color: var(--secondary-background-color);
-          margin: 0;
-          padding: 0 16px;
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--card-background-color);
+          flex-shrink: 0;
        }

-        app-toolbar [main-title] {
-          /* Design guideline states 24px, changed to 16 to align with state info */
-          margin-left: 16px;
-          line-height: 1.3em;
-          max-height: 2.6em;
-          overflow: hidden;
-          /* webkit and blink still support simple multiline text-overflow */
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          text-overflow: ellipsis;
+        mwc-tab-bar {
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
        }

        ha-dialog {
@ -245,10 +248,6 @@ export class DialogEntityEditor extends LitElement {
        }

        @media all and (min-width: 451px) and (min-height: 501px) {
-          .main-title {
-            pointer-events: auto;
-            cursor: default;
-          }
          .wrapper {
            width: 400px;
          }
@ -261,9 +260,9 @@ export class DialogEntityEditor extends LitElement {

        /* overrule the ha-style-dialog max-height on small screens */
        @media all and (max-width: 450px), all and (max-height: 500px) {
-          app-toolbar {
-            background-color: var(--app-header-background-color);
-            color: var(--app-header-text-color, white);
+          ha-header-bar {
+            --mdc-theme-primary: var(--app-header-background-color);
+            --mdc-theme-on-primary: var(--app-header-text-color, white);
          }
        }

@ -275,15 +274,6 @@ export class DialogEntityEditor extends LitElement {
          direction: rtl;
          text-align: right;
        }
-        :host {
-          --paper-font-title_-_white-space: normal;
-        }
-        paper-tabs {
-          --paper-tabs-selection-bar-color: var(--primary-color);
-          text-transform: uppercase;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-          margin-top: 0;
-        }
      `,
    ];
  }
--- a/yarn.lock
+++ b/yarn.lock
@ -1658,6 +1658,54 @@
    lit-element "^2.3.0"
    tslib "^1.10.0"

+"@material/mwc-tab-bar@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.2.tgz#d89a290d4dda5f854ee51a539b69020c6634d1db"
+  integrity sha512-QsHOmxj6FM7jKYM9Dt6u7jKQv8r13z7/ryocQAAqyd13+LwAc+ec2o0hE6lTFpqNPAdlIhosip5Y3GDHdoKT5w==
+  dependencies:
+    "@material/mwc-base" "^0.17.2"
+    "@material/mwc-tab" "^0.17.2"
+    "@material/mwc-tab-scroller" "^0.17.2"
+    "@material/tab" "=8.0.0-canary.a78ceb112.0"
+    "@material/tab-bar" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    tslib "^1.10.0"
+
+"@material/mwc-tab-indicator@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-indicator/-/mwc-tab-indicator-0.17.2.tgz#fc3ac2c7a53df20acc99e71599dd38e8abbc2cda"
+  integrity sha512-JaAyWLhU/FO1v0wX1LLk4nTph13kFla14tYzMNg1rK6DcHdU19FgpjO7T1D61AJXQUmOMJ5q1qX/8dWd7BLlXg==
+  dependencies:
+    "@material/mwc-base" "^0.17.2"
+    "@material/tab-indicator" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    lit-html "^1.1.2"
+    tslib "^1.10.0"
+
+"@material/mwc-tab-scroller@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-scroller/-/mwc-tab-scroller-0.17.2.tgz#1f90691fe1bb91058cb884a72056951484967654"
+  integrity sha512-T03XsOQH457yhqeoZojMb2cfBshnBYCW4KIF8h2XqZiL9d47/E1OQqpWT/r1BbSZ7ysVhpH0TiwHvIaPzNW4ZA==
+  dependencies:
+    "@material/dom" "=8.0.0-canary.a78ceb112.0"
+    "@material/mwc-base" "^0.17.2"
+    "@material/tab-scroller" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    tslib "^1.10.0"
+
+"@material/mwc-tab@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab/-/mwc-tab-0.17.2.tgz#5629164b9099acd6d3d1109232b99ff23088f0ba"
+  integrity sha512-M8+T4jXL/noG3MAoxXNuN/or2Ky3Zozxa9XsgK4vGHK3rN5tB1w0t2ZMjmVgp8qJ4JIqgnYtsiM0Z1P/MLV4lw==
+  dependencies:
+    "@material/mwc-base" "^0.17.2"
+    "@material/mwc-ripple" "^0.17.2"
+    "@material/mwc-tab-indicator" "^0.17.2"
+    "@material/tab" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    lit-html "^1.1.2"
+    tslib "^1.10.0"
+
 "@material/progress-indicator@8.0.0-canary.a78ceb112.0":
  version "8.0.0-canary.a78ceb112.0"
  resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-8.0.0-canary.a78ceb112.0.tgz#70a769d413910daf8ea1c4d51712487e381eaeab"
@ -1724,6 +1772,56 @@
    "@material/theme" "8.0.0-canary.a78ceb112.0"
    tslib "^1.9.3"

+"@material/tab-bar@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-bar/-/tab-bar-8.0.0-canary.a78ceb112.0.tgz#f15dc55be11dbfe9d42d5a924e5ebe0e122fd430"
+  integrity sha512-OrrieVHPPdBPm7Nsc2rdjLWIH5S1+immZxDe3zmn8eX0kw+EZf1HucFUwPWYFVTj1bFQfAk+P5AOHbrpu0UeAA==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/density" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/tab" "8.0.0-canary.a78ceb112.0"
+    "@material/tab-scroller" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
+"@material/tab-indicator@8.0.0-canary.a78ceb112.0", "@material/tab-indicator@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a78ceb112.0.tgz#24ad5d88b9fd652c91cfdb0c4f86eae7b7f48c4f"
+  integrity sha512-LPh3RZwzbyoaCnCkRw2GvEdH1m3m49H+jzJaA56vP7XCrSqlFD0UvGHM622ObkFbJb3xV+SKtq+jcRzHcSlQQw==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/theme" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
+"@material/tab-scroller@8.0.0-canary.a78ceb112.0", "@material/tab-scroller@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a78ceb112.0.tgz#393b79ed32bb6ceda87be8d4a6f64506b35e009d"
+  integrity sha512-of9L0foIN+jec1QRDnygTJ2vbK6MLGcJV1kPAFxBehObXo7MMisP8jZtxLCLaV5sdPpVvfIPdGdvvemYWUsysw==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/dom" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/tab" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
+"@material/tab@8.0.0-canary.a78ceb112.0", "@material/tab@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab/-/tab-8.0.0-canary.a78ceb112.0.tgz#0591ce259891e2a6b121af40b9fb182da2911ad6"
+  integrity sha512-lExmfj6Hw2Q9rSVTmjc+ruipoFZIgta9CAATRgxbuhCapXO7BUDkBihQbcxwTqH6qe4G80hRnUcsqm2PzsAEVA==
+  dependencies:
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/ripple" "8.0.0-canary.a78ceb112.0"
+    "@material/rtl" "8.0.0-canary.a78ceb112.0"
+    "@material/tab-indicator" "8.0.0-canary.a78ceb112.0"
+    "@material/theme" "8.0.0-canary.a78ceb112.0"
+    "@material/typography" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
 "@material/theme@8.0.0-canary.a78ceb112.0":
  version "8.0.0-canary.a78ceb112.0"
  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-8.0.0-canary.a78ceb112.0.tgz#0a32294d806f16ebfab42025d35056a6954863a0"
@ -1731,6 +1829,21 @@
  dependencies:
    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"

+"@material/top-app-bar@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/top-app-bar/-/top-app-bar-8.0.0-canary.a78ceb112.0.tgz#d84baf4a91cbaaf83b4bc7e798cbae0adff1b1b9"
+  integrity sha512-27bm0xPxepKSVh04FK7m0zUSP9FveIXv/qa2vJI3XTZWkFiNPrF+MGwkMPo83Z5TMqMFDRhDcjzSJlo9H4IrOg==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/elevation" "8.0.0-canary.a78ceb112.0"
+    "@material/ripple" "8.0.0-canary.a78ceb112.0"
+    "@material/rtl" "8.0.0-canary.a78ceb112.0"
+    "@material/shape" "8.0.0-canary.a78ceb112.0"
+    "@material/theme" "8.0.0-canary.a78ceb112.0"
+    "@material/typography" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
 "@material/touch-target@8.0.0-canary.a78ceb112.0":
  version "8.0.0-canary.a78ceb112.0"
  resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-8.0.0-canary.a78ceb112.0.tgz#dcacd182c99e3eae5547ffe26bc758fca252cfae"