Convert lit ts layout (#2742)

* Convert layout to TS/Lit

* Further cleanup

* Apply suggestions from code review

Co-Authored-By: balloob <paulus@home-assistant.io>

* Simplify error screen

src/layouts/ha-init-page.ts

@@ -1,4 +1,5 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
+import "@polymer/paper-button/paper-button";
 
 import {
   LitElement,
@@ -8,9 +9,6 @@ import {
   css,
 } from "lit-element";
 
-/*
- * @appliesMixin LocalizeMixin
- */
 class HaInitPage extends LitElement {
   public error?: boolean;
 
@@ -37,15 +35,14 @@ class HaInitPage extends LitElement {
     `;
   }
 
+  private _retry() {
+    location.reload();
+  }
+
   static get styles(): CSSResult {
     return css`
       div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
+        height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -60,17 +57,6 @@ class HaInitPage extends LitElement {
       }
     `;
   }
-
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("error") && this.error) {
-      import(/* webpackChunkName: "paper-button" */ "@polymer/paper-button/paper-button");
-    }
-  }
-
-  private _retry() {
-    location.reload();
-  }
 }
 
 customElements.define("ha-init-page", HaInitPage);

src/layouts/hass-error-screen.js

@@ -1,56 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HassErrorScreen extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        .placeholder {
-          height: 100%;
-        }
-
-        .layout {
-          height: calc(100% - 64px);
-        }
-
-        paper-button {
-          font-weight: bold;
-          color: var(--primary-color);
-        }
-      </style>
-
-      <div class="placeholder">
-        <app-toolbar> <div main-title="">[[title]]</div> </app-toolbar>
-        <div class="layout vertical center-center">
-          <h3>[[error]]</h3>
-          <slot
-            ><paper-button on-click="backTapped">go back</paper-button></slot
-          >
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      title: {
-        type: String,
-        value: "Home Assistant",
-      },
-
-      error: {
-        type: String,
-        value: "Oops! It looks like something went wrong.",
-      },
-    };
-  }
-
-  backTapped() {
-    history.back();
-  }
-}
-
-customElements.define("hass-error-screen", HassErrorScreen);

src/layouts/hass-error-screen.ts

@@ -0,0 +1,58 @@
+import {
+  LitElement,
+  CSSResultArray,
+  css,
+  TemplateResult,
+  html,
+  property,
+  customElement,
+} from "lit-element";
+import "./hass-subpage";
+
+@customElement("hass-error-screen")
+class HassErrorScreen extends LitElement {
+  @property()
+  public error?: string;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <hass-subpage>
+        <div class="content">
+          <h3>${this.error}</h3>
+          <slot>
+            <paper-button @click=${this._backTapped}>go back</paper-button>
+          </slot>
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  private _backTapped(): void {
+    history.back();
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      css`
+        .content {
+          height: calc(100% - 64px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        paper-button {
+          font-weight: bold;
+          color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hass-error-screen": HassErrorScreen;
+  }
+}

src/layouts/hass-loading-screen.js

@@ -1,57 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-spinner/paper-spinner-lite";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/ha-menu-button";
-
-class HassLoadingScreen extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        .placeholder {
-          height: 100%;
-        }
-
-        .layout {
-          height: calc(100% - 64px);
-        }
-      </style>
-
-      <div class="placeholder">
-        <app-toolbar>
-          <ha-menu-button
-            narrow="[[narrow]]"
-            show-menu="[[showMenu]]"
-          ></ha-menu-button>
-          <div main-title>[[title]]</div>
-        </app-toolbar>
-        <div class="layout horizontal center-center">
-          <paper-spinner-lite active></paper-spinner-lite>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
-      title: {
-        type: String,
-        value: "",
-      },
-    };
-  }
-}
-
-customElements.define("hass-loading-screen", HassLoadingScreen);

src/layouts/hass-loading-screen.ts

@@ -0,0 +1,56 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  property,
+  CSSResultArray,
+  css,
+  customElement,
+} from "lit-element";
+import "../components/ha-menu-button";
+import { haStyle } from "../resources/ha-style";
+
+@customElement("hass-loading-screen")
+class HassLoadingScreen extends LitElement {
+  @property({ type: Boolean })
+  public narrow?: boolean;
+
+  @property({ type: Boolean })
+  public showMenu?: boolean;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <app-toolbar>
+        <ha-menu-button
+          .narrow=${this.narrow}
+          .showMenu=${this.showMenu}
+        ></ha-menu-button>
+      </app-toolbar>
+      <div class="content">
+        <paper-spinner-lite active></paper-spinner-lite>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        .content {
+          height: calc(100% - 64px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hass-loading-screen": HassLoadingScreen;
+  }
+}

src/layouts/hass-subpage.js

@@ -1,40 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HassSubpage extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="ha-style"></style>
-      <app-header-layout has-scrolling-region="">
-        <app-header slot="header" fixed="">
-          <app-toolbar>
-            <paper-icon-button
-              icon="hass:arrow-left"
-              on-click="_backTapped"
-            ></paper-icon-button>
-            <div main-title="">[[header]]</div>
-            <slot name="toolbar-icon"></slot>
-          </app-toolbar>
-        </app-header>
-
-        <slot></slot>
-      </app-header-layout>
-    `;
-  }
-
-  static get properties() {
-    return {
-      header: String,
-    };
-  }
-
-  _backTapped() {
-    history.back();
-  }
-}
-
-customElements.define("hass-subpage", HassSubpage);

src/layouts/hass-subpage.ts

@@ -0,0 +1,52 @@
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+} from "lit-element";
+import { haStyle } from "../resources/ha-style";
+
+@customElement("hass-subpage")
+class HassSubpage extends LitElement {
+  @property()
+  public header?: string;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <app-header-layout has-scrolling-region>
+        <app-header slot="header" fixed>
+          <app-toolbar>
+            <paper-icon-button
+              icon="hass:arrow-left"
+              @click=${this._backTapped}
+            ></paper-icon-button>
+            <div main-title>${this.header}</div>
+            <slot name="toolbar-icon"></slot>
+          </app-toolbar>
+        </app-header>
+
+        <slot></slot>
+      </app-header-layout>
+    `;
+  }
+
+  private _backTapped(): void {
+    history.back();
+  }
+
+  static get styles(): CSSResult {
+    return haStyle;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hass-subpage": HassSubpage;
+  }
+}

src/layouts/partial-panel-resolver.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, PropertyValues, property } from "lit-element";
 
 import "./hass-loading-screen";
+import "./hass-error-screen";
 import { HomeAssistant, Panel, PanelElement, Route } from "../types";
 
 // Cache of panel loading promises.
@@ -122,11 +123,10 @@ class PartialPanelResolver extends LitElement {
     if (this._error) {
       return html`
         <hass-error-screen
-          title=""
           error="Error while loading this panel."
           .narrow=${this.narrow}
           .showMenu=${this.showMenu}
-        />
+        ></hass-error-screen>
       `;
     }
 
@@ -144,13 +144,6 @@ class PartialPanelResolver extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    // Load it before it's needed, because it will be shown if user is offline
-    // and a panel has to be loaded.
-    import(/* webpackChunkName: "hass-error-screen" */ "./hass-error-screen");
-  }
-
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (!this.hass) {
@@ -214,6 +207,7 @@ class PartialPanelResolver extends LitElement {
               this._cache[panel.component_name] = this._panelEl;
             }
 
+            this._error = false;
             this._updatePanel();
           },
           (err) => {

src/panels/config/ha-panel-config.js

@@ -3,8 +3,6 @@ import "@polymer/iron-media-query/iron-media-query";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../layouts/hass-error-screen";
-
 import isComponentLoaded from "../../common/config/is_component_loaded";
 import EventsMixin from "../../mixins/events-mixin";
 import NavigateMixin from "../../mixins/navigate-mixin";

src/resources/ha-style.ts

@@ -172,6 +172,7 @@ documentContainer.innerHTML = `<custom-style>
       --google-blue-500: #4285f4;
       --google-green-500: #0f9d58;
       --google-yellow-500: #f4b400;
+      --paper-spinner-color: var(--primary-color);
 
       /* for paper-slider */
       --paper-green-400: #66bb6a;