diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 737346c6f4..f935abe1d9 100644 --- a/src/layouts/ha-init-page.ts +++ b/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); diff --git a/src/layouts/hass-error-screen.js b/src/layouts/hass-error-screen.js deleted file mode 100644 index 9c326c0e90..0000000000 --- a/src/layouts/hass-error-screen.js +++ /dev/null @@ -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` - - -
-
[[title]]
 -
-

[[error]]

- go back -
-
- `; - } - - 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); diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts new file mode 100644 index 0000000000..db5138b38c --- /dev/null +++ b/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` + +
+

${this.error}

+ + go back + +
+ + `; + } + + 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; + } +} diff --git a/src/layouts/hass-loading-screen.js b/src/layouts/hass-loading-screen.js deleted file mode 100644 index d97813833b..0000000000 --- a/src/layouts/hass-loading-screen.js +++ /dev/null @@ -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` - - -
- - -
[[title]]
- -
- -
-
- `; - } - - static get properties() { - return { - narrow: { - type: Boolean, - value: false, - }, - - showMenu: { - type: Boolean, - value: false, - }, - - title: { - type: String, - value: "", - }, - }; - } -} - -customElements.define("hass-loading-screen", HassLoadingScreen); diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts new file mode 100644 index 0000000000..6c96a88026 --- /dev/null +++ b/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` + + + +
+ +
+ `; + } + + 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; + } +} diff --git a/src/layouts/hass-subpage.js b/src/layouts/hass-subpage.js deleted file mode 100644 index ef3ba4409e..0000000000 --- a/src/layouts/hass-subpage.js +++ /dev/null @@ -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` - - - - - -
[[header]]
- - - - - - - `; - } - - static get properties() { - return { - header: String, - }; - } - - _backTapped() { - history.back(); - } -} - -customElements.define("hass-subpage", HassSubpage); diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts new file mode 100644 index 0000000000..25b4b5a794 --- /dev/null +++ b/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` + + + + +
${this.header}
+ + + + + + + `; + } + + private _backTapped(): void { + history.back(); + } + + static get styles(): CSSResult { + return haStyle; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hass-subpage": HassSubpage; + } +} diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts index db43495ebb..3503c79a2c 100644 --- a/src/layouts/partial-panel-resolver.ts +++ b/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` + > `; } @@ -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) => { diff --git a/src/panels/config/ha-panel-config.js b/src/panels/config/ha-panel-config.js index 8bfd4fdb3e..726e46ae85 100644 --- a/src/panels/config/ha-panel-config.js +++ b/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"; diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index 0c7e1f45ae..8d903f96cc 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -172,6 +172,7 @@ documentContainer.innerHTML = ` --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;