diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 099c7f70be..32139fa557 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -28,7 +28,7 @@ import { getLovelaceCollection, LovelaceConfig, } from "../../../../src/data/lovelace"; -import "../../../../src/layouts/loading-screen"; +import "../../../../src/layouts/hass-loading-screen"; import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config"; import "./hc-layout"; import "@material/mwc-button/mwc-button"; @@ -47,7 +47,7 @@ class HcCast extends LitElement { protected render(): TemplateResult { if (this.lovelaceConfig === undefined) { - return html` > `; + return html` > `; } const error = diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index 048a69f403..2aa72385e9 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/cast/src/launcher/layout/hc-connect.ts @@ -27,7 +27,7 @@ import { saveTokens, } from "../../../../src/common/auth/token_storage"; import "../../../../src/components/ha-icon"; -import "../../../../src/layouts/loading-screen"; +import "../../../../src/layouts/hass-loading-screen"; import { registerServiceWorker } from "../../../../src/util/register-service-worker"; import "./hc-layout"; @@ -98,7 +98,7 @@ export class HcConnect extends LitElement { } if (this.castManager === undefined || this.loading) { - return html` `; + return html` `; } if (this.castManager === null) { diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 80f210b6e3..88dfb115c6 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -19,7 +19,7 @@ import { reloadHassioAddons, } from "../../../src/data/hassio/addon"; import "../../../src/layouts/hass-tabs-subpage"; -import "../../../src/layouts/loading-screen"; +import "../../../src/layouts/hass-loading-screen"; import { HomeAssistant, Route } from "../../../src/types"; import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories"; import { supervisorTabs } from "../hassio-tabs"; @@ -108,7 +108,7 @@ class HassioAddonStore extends LitElement { ${repos.length === 0 - ? html`` + ? html`` : html`
${this._content ? html`` - : html``} + : html``}
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index af3b94665d..d9f3218a7a 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -13,7 +13,7 @@ import { } from "lit-element"; import "../../../src/components/ha-card"; import { fetchHassioLogs } from "../../../src/data/hassio/supervisor"; -import "../../../src/layouts/loading-screen"; +import "../../../src/layouts/hass-loading-screen"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; import "../components/hassio-ansi-to-html"; @@ -98,7 +98,7 @@ class HassioSupervisorLog extends LitElement { ? html`` - : html``} + : html``}
Refresh diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index f8838eff85..eab453b29e 100644 --- a/src/layouts/hass-error-screen.ts +++ b/src/layouts/hass-error-screen.ts @@ -12,29 +12,56 @@ import "./hass-subpage"; @customElement("hass-error-screen") class HassErrorScreen extends LitElement { - @property() - public error?: string; + @property({ type: Boolean }) public toolbar = true; + + @property() public error?: string; protected render(): TemplateResult { return html` - -
-

${this.error}

- - go back - -
- + ${this.toolbar + ? html`
+ +
` + : ""} +
+

${this.error}

+ + go back + +
`; } - private _backTapped(): void { + private _handleBack(): void { history.back(); } static get styles(): CSSResultArray { return [ css` + :host { + display: block; + height: 100%; + background-color: var(--primary-background-color); + } + .toolbar { + display: flex; + align-items: center; + font-size: 20px; + height: 65px; + padding: 0 16px; + pointer-events: none; + background-color: var(--app-header-background-color); + font-weight: 400; + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + box-sizing: border-box; + } + ha-icon-button-arrow-prev { + pointer-events: auto; + } .content { height: calc(100% - 64px); display: flex; diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index 83021927d9..c8cdf24d97 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -16,7 +16,10 @@ import { HomeAssistant } from "../types"; @customElement("hass-loading-screen") class HassLoadingScreen extends LitElement { - @property({ type: Boolean }) public rootnav? = false; + @property({ type: Boolean, attribute: "no-toolbar" }) + public noToolbar = false; + + @property({ type: Boolean }) public rootnav = false; @property() public hass?: HomeAssistant; @@ -24,20 +27,22 @@ class HassLoadingScreen extends LitElement { protected render(): TemplateResult { return html` - - ${this.rootnav - ? html` - - ` - : html` - - `} - + ${this.noToolbar + ? "" + : html`
+ ${this.rootnav + ? html` + + ` + : html` + + `} +
`}
@@ -57,6 +62,23 @@ class HassLoadingScreen extends LitElement { height: 100%; background-color: var(--primary-background-color); } + .toolbar { + display: flex; + align-items: center; + font-size: 20px; + height: 65px; + padding: 0 16px; + pointer-events: none; + background-color: var(--app-header-background-color); + font-weight: 400; + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + box-sizing: border-box; + } + ha-menu-button, + ha-icon-button-arrow-prev { + pointer-events: auto; + } .content { height: calc(100% - 64px); display: flex; diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts index d463b86ca6..450e331a73 100644 --- a/src/layouts/hass-router-page.ts +++ b/src/layouts/hass-router-page.ts @@ -169,9 +169,9 @@ export class HassRouterPage extends UpdatingElement { } // Show error screen - const errorEl = document.createElement("hass-error-screen"); - errorEl.error = `Error while loading page ${newPage}.`; - this.appendChild(errorEl); + this.appendChild( + this.createErrorScreen(`Error while loading page ${newPage}.`) + ); }); // If we don't show loading screen, just show the panel. @@ -252,6 +252,12 @@ export class HassRouterPage extends UpdatingElement { return document.createElement("hass-loading-screen"); } + protected createErrorScreen(error: string) { + const errorEl = document.createElement("hass-error-screen"); + errorEl.error = error; + return errorEl; + } + /** * Rebuild the current panel. * diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 4eb7a3153e..2039b7654f 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -36,7 +36,7 @@ class HassSubpage extends LitElement { class=${classMap({ hidden: !this.showBackButton })} > -
${this.header}
+
${this.header}
@@ -74,7 +74,6 @@ class HassSubpage extends LitElement { box-sizing: border-box; } - ha-menu-button, ha-icon-button-arrow-prev, ::slotted([slot="toolbar-icon"]) { pointer-events: auto; @@ -84,7 +83,7 @@ class HassSubpage extends LitElement { visibility: hidden; } - [main-title] { + .main-title { margin: 0 0 0 24px; line-height: 20px; flex-grow: 1; diff --git a/src/layouts/loading-screen.ts b/src/layouts/loading-screen.ts deleted file mode 100644 index 5d0270c261..0000000000 --- a/src/layouts/loading-screen.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { - css, - CSSResult, - customElement, - html, - LitElement, - TemplateResult, -} from "lit-element"; -import "../components/ha-circular-progress"; - -@customElement("loading-screen") -class LoadingScreen extends LitElement { - protected render(): TemplateResult { - return html` `; - } - - static get styles(): CSSResult { - return css` - :host { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "loading-screen": LoadingScreen; - } -} diff --git a/src/panels/developer-tools/developer-tools-router.ts b/src/panels/developer-tools/developer-tools-router.ts index 26337446b3..e7f4e78c2a 100644 --- a/src/panels/developer-tools/developer-tools-router.ts +++ b/src/panels/developer-tools/developer-tools-router.ts @@ -40,6 +40,18 @@ class DeveloperToolsRouter extends HassRouterPage { }, }; + protected createLoadingScreen() { + const loadingScreen = super.createLoadingScreen(); + loadingScreen.noToolbar = true; + return loadingScreen; + } + + protected createErrorScreen(error: string) { + const errorEl = super.createErrorScreen(error); + errorEl.toolbar = false; + return errorEl; + } + protected updatePageEl(el) { if ("setProperties" in el) { // As long as we have Polymer pages diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 98542c9365..b306a5fe33 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -1,6 +1,6 @@ -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 "../../layouts/ha-app-layout"; import "../../components/ha-icon-button"; import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; @@ -36,7 +36,7 @@ class PanelDeveloperTools extends LitElement { protected render(): TemplateResult { const page = this._page; return html` - + - + `; } @@ -107,6 +107,10 @@ class PanelDeveloperTools extends LitElement { color: var(--primary-text-color); --paper-card-header-color: var(--primary-text-color); } + developer-tools-router { + display: block; + height: calc(100vh - 112px); + } paper-tabs { margin-left: 12px; --paper-tabs-selection-bar-color: #fff;