From 5ca63a80522a867557de20fe7bda0592e8f06e7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Fri, 1 May 2020 16:52:03 +0200 Subject: [PATCH] Convert the rest of the panel (#5689) --- .../src/addon-view/hassio-addon-dashboard.ts | 2 +- hassio/src/hassio-main.ts | 7 +- hassio/src/hassio-pages-with-tabs.ts | 141 ------------------ ...-tabs-router.ts => hassio-panel-router.ts} | 44 ++---- hassio/src/hassio-panel.ts | 85 +++++++++++ 5 files changed, 105 insertions(+), 174 deletions(-) delete mode 100644 hassio/src/hassio-pages-with-tabs.ts rename hassio/src/{hassio-tabs-router.ts => hassio-panel-router.ts} (53%) create mode 100644 hassio/src/hassio-panel.ts diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index 23b05c935d..c614aced17 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -67,7 +67,7 @@ class HassioAddonDashboard extends LitElement { addonTabs.push({ name: "Documentation", path: `/hassio/addon/${this.addon.slug}/documentation`, - icon: "mdi:text-box", + icon: "mdi:file-document", }); } diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index a6f8bd9ca4..63a8aad5f0 100644 --- a/hassio/src/hassio-main.ts +++ b/hassio/src/hassio-main.ts @@ -32,7 +32,7 @@ import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin"; import "../../src/resources/ha-style"; import { HomeAssistant } from "../../src/types"; // Don't codesplit it, that way the dashboard always loads fast. -import "./hassio-pages-with-tabs"; +import "./hassio-panel"; // The register callback of the IronA11yKeysBehavior inside paper-icon-button // is not called, causing _keyBindings to be uninitiliazed for paper-icon-button, @@ -55,7 +55,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) { showLoading: true, routes: { dashboard: { - tag: "hassio-pages-with-tabs", + tag: "hassio-panel", cache: true, }, snapshots: "dashboard", @@ -132,8 +132,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) { protected updatePageEl(el) { // the tabs page does its own routing so needs full route. - const route = - el.nodeName === "HASSIO-PAGES-WITH-TABS" ? this.route : this.routeTail; + const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail; if ("setProperties" in el) { // As long as we have Polymer pages diff --git a/hassio/src/hassio-pages-with-tabs.ts b/hassio/src/hassio-pages-with-tabs.ts deleted file mode 100644 index ba646f42a1..0000000000 --- a/hassio/src/hassio-pages-with-tabs.ts +++ /dev/null @@ -1,141 +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 "@polymer/paper-tabs/paper-tab"; -import "@polymer/paper-tabs/paper-tabs"; -import { - css, - CSSResultArray, - customElement, - html, - LitElement, - property, - TemplateResult, -} from "lit-element"; -import scrollToTarget from "../../src/common/dom/scroll-to-target"; -import { navigate } from "../../src/common/navigate"; -import "../../src/components/ha-menu-button"; -import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host"; -import { - HassioHomeAssistantInfo, - HassioSupervisorInfo, -} from "../../src/data/hassio/supervisor"; -import "../../src/resources/ha-style"; -import { haStyle } from "../../src/resources/styles"; -import { HomeAssistant, Route } from "../../src/types"; -import "./hassio-tabs-router"; - -const HAS_REFRESH_BUTTON = ["store", "snapshots"]; - -@customElement("hassio-pages-with-tabs") -class HassioPagesWithTabs extends LitElement { - @property() public hass!: HomeAssistant; - - @property() public narrow!: boolean; - - @property() public route!: Route; - - @property() public supervisorInfo!: HassioSupervisorInfo; - - @property() public hostInfo!: HassioHostInfo; - - @property() public hassInfo!: HassioHomeAssistantInfo; - - @property() public hassOsInfo!: HassioHassOSInfo; - - protected render(): TemplateResult { - const page = this._page; - return html` - - - - -
Supervisor
- ${HAS_REFRESH_BUTTON.includes(page) - ? html` - - ` - : undefined} - - - Dashboard - Snapshots - Add-on store - System - - - - - `; - } - - private handlePageSelected(ev) { - const newPage = ev.detail.item.getAttribute("page-name"); - if (newPage !== this._page) { - navigate(this, `/hassio/${newPage}`); - } - - scrollToTarget( - this, - // @ts-ignore - this.shadowRoot!.querySelector("app-header-layout").header.scrollTarget - ); - } - - private refreshClicked() { - if (this._page === "snapshots") { - // @ts-ignore - this.shadowRoot.querySelector("hassio-snapshots").refreshData(); - } else { - // @ts-ignore - this.shadowRoot.querySelector("hassio-addon-store").refreshData(); - } - } - - private get _page() { - return this.route.path.substr(1); - } - - static get styles(): CSSResultArray { - return [ - haStyle, - css` - :host { - color: var(--primary-text-color); - --paper-card-header-color: var(--primary-text-color); - } - paper-tabs { - margin-left: 12px; - --paper-tabs-selection-bar-color: var(--text-primary-color, #fff); - text-transform: uppercase; - } - `, - ]; - } -} - -declare global { - interface HTMLElementTagNameMap { - "hassio-pages-with-tabs": HassioPagesWithTabs; - } -} diff --git a/hassio/src/hassio-tabs-router.ts b/hassio/src/hassio-panel-router.ts similarity index 53% rename from hassio/src/hassio-tabs-router.ts rename to hassio/src/hassio-panel-router.ts index dd4a66c270..fbfcda1b4b 100644 --- a/hassio/src/hassio-tabs-router.ts +++ b/hassio/src/hassio-panel-router.ts @@ -1,4 +1,3 @@ -import { PolymerElement } from "@polymer/polymer"; import { customElement, property } from "lit-element"; import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host"; import { @@ -17,29 +16,29 @@ import "./dashboard/hassio-dashboard"; import "./snapshots/hassio-snapshots"; import "./system/hassio-system"; -@customElement("hassio-tabs-router") -class HassioTabsRouter extends HassRouterPage { - @property() public hass!: HomeAssistant; +@customElement("hassio-panel-router") +class HassioPanelRouter extends HassRouterPage { + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public supervisorInfo: HassioSupervisorInfo; + @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo; - @property() public hostInfo: HassioHostInfo; + @property({ attribute: false }) public hostInfo: HassioHostInfo; - @property() public hassInfo: HassioHomeAssistantInfo; + @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo; - @property() public hassOsInfo!: HassioHassOSInfo; + @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo; protected routerOptions: RouterOptions = { routes: { dashboard: { tag: "hassio-dashboard", }, - snapshots: { - tag: "hassio-snapshots", - }, store: { tag: "hassio-addon-store", }, + snapshots: { + tag: "hassio-snapshots", + }, system: { tag: "hassio-system", }, @@ -47,27 +46,16 @@ class HassioTabsRouter extends HassRouterPage { }; protected updatePageEl(el) { - if ("setProperties" in el) { - // As long as we have Polymer pages - (el as PolymerElement).setProperties({ - hass: this.hass, - supervisorInfo: this.supervisorInfo, - hostInfo: this.hostInfo, - hassInfo: this.hassInfo, - hassOsInfo: this.hassOsInfo, - }); - } else { - el.hass = this.hass; - el.supervisorInfo = this.supervisorInfo; - el.hostInfo = this.hostInfo; - el.hassInfo = this.hassInfo; - el.hassOsInfo = this.hassOsInfo; - } + el.hass = this.hass; + el.supervisorInfo = this.supervisorInfo; + el.hostInfo = this.hostInfo; + el.hassInfo = this.hassInfo; + el.hassOsInfo = this.hassOsInfo; } } declare global { interface HTMLElementTagNameMap { - "hassio-tabs-router": HassioTabsRouter; + "hassio-panel-router": HassioPanelRouter; } } diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts new file mode 100644 index 0000000000..16a75af7ff --- /dev/null +++ b/hassio/src/hassio-panel.ts @@ -0,0 +1,85 @@ +import { + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; + +import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host"; +import { + HassioHomeAssistantInfo, + HassioSupervisorInfo, +} from "../../src/data/hassio/supervisor"; +import "../../src/resources/ha-style"; +import { HomeAssistant, Route } from "../../src/types"; +import "./hassio-panel-router"; +import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage"; +import "../../src/layouts/hass-tabs-subpage"; + +@customElement("hassio-panel") +class HassioPanel extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ type: Boolean }) public narrow!: boolean; + + @property({ attribute: false }) public route!: Route; + + @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo; + + @property({ attribute: false }) public hostInfo!: HassioHostInfo; + + @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo; + + @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo; + + protected render(): TemplateResult { + const supervisorTabs: PageNavigation[] = [ + { + name: "Dashboard", + path: `/hassio/dashboard`, + icon: "mdi:view-dashboard", + }, + { + name: "Add-on store", + path: `/hassio/store`, + icon: "mdi:store", + }, + { + name: "Snapshots", + path: `/hassio/snapshots`, + icon: "mdi:backup-restore", + }, + { + name: "System", + path: `/hassio/system`, + icon: "mdi:cogs", + }, + ]; + + return html` + + Supervisor + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-panel": HassioPanel; + } +}