Make Lovelace the default! (#2181)

* Make Lovelace the default!

* Move states panel to panels

src/components/ha-cards.js

@@ -159,7 +159,6 @@ class HaCards extends PolymerElement {
       },
 
       states: Object,
-      panelVisible: Boolean,
 
       viewVisible: {
         type: Boolean,
@@ -173,19 +172,11 @@ class HaCards extends PolymerElement {
   }
 
   static get observers() {
-    return [
+    return ["updateCards(columns, states, viewVisible, orderedGroupEntities)"];
-      "updateCards(columns, states, panelVisible, viewVisible, orderedGroupEntities)",
-    ];
   }
 
-  updateCards(
+  updateCards(columns, states, viewVisible, orderedGroupEntities) {
-    columns,
+    if (!viewVisible) {
-    states,
-    panelVisible,
-    viewVisible,
-    orderedGroupEntities
-  ) {
-    if (!panelVisible || !viewVisible) {
       if (this.$.main.parentNode) {
         this.$.main._parentNode = this.$.main.parentNode;
         this.$.main.parentNode.removeChild(this.$.main);
@@ -200,7 +191,7 @@ class HaCards extends PolymerElement {
       timeOut.after(10),
       () => {
         // Things might have changed since it got scheduled.
-        if (this.panelVisible && this.viewVisible) {
+        if (this.viewVisible) {
           this.cards = this.computeCards(columns, states, orderedGroupEntities);
         }
       }

src/layouts/app/home-assistant.js

@@ -94,7 +94,7 @@ class HomeAssistant extends ext(PolymerElement, [
   }
 
   computePanelUrl(routeData) {
-    return (routeData && routeData.panel) || "states";
+    return (routeData && routeData.panel) || "lovelace";
   }
 
   panelUrlChanged(newPanelUrl) {

src/layouts/home-assistant-main.js

@@ -2,13 +2,11 @@ import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
 import "@polymer/app-route/app-route";
 import "@polymer/iron-media-query/iron-media-query";
-import "@polymer/iron-pages/iron-pages";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../util/ha-url-sync";
 
-import "./partial-cards";
 import "./partial-panel-resolver";
 import EventsMixin from "../mixins/events-mixin";
 import NavigateMixin from "../mixins/navigate-mixin";
@@ -31,21 +29,16 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
         :host([rtl]) {
           direction: rtl;
         }
-        iron-pages,
+        partial-panel-resolver,
         ha-sidebar {
           /* allow a light tap highlight on the actual interface elements  */
           -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
         }
-        iron-pages {
+        partial-panel-resolver {
           height: 100%;
         }
       </style>
       <ha-url-sync hass="[[hass]]"></ha-url-sync>
-      <app-route
-        route="{{route}}"
-        pattern="/states"
-        tail="{{statesRouteTail}}"
-      ></app-route>
       <ha-voice-command-dialog
         hass="[[hass]]"
         id="voiceDialog"
@@ -73,29 +66,12 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
           ></ha-sidebar>
         </app-drawer>
 
-        <iron-pages
+        <partial-panel-resolver
-          attr-for-selected="id"
+          narrow="[[narrow]]"
-          fallback-selection="panel-resolver"
+          hass="[[hass]]"
-          selected="[[hass.panelUrl]]"
+          route="[[route]]"
-          selected-attribute="panel-visible"
+          show-menu="[[dockedSidebar]]"
-        >
+        ></partial-panel-resolver>
-          <partial-cards
-            id="states"
-            narrow="[[narrow]]"
-            hass="[[hass]]"
-            show-menu="[[dockedSidebar]]"
-            route="[[statesRouteTail]]"
-            show-tabs=""
-          ></partial-cards>
-
-          <partial-panel-resolver
-            id="panel-resolver"
-            narrow="[[narrow]]"
-            hass="[[hass]]"
-            route="[[route]]"
-            show-menu="[[dockedSidebar]]"
-          ></partial-panel-resolver>
-        </iron-pages>
       </app-drawer-layout>
     `;
   }
@@ -108,7 +84,6 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
         type: Object,
         observer: "_routeChanged",
       },
-      statesRouteTail: Object,
       dockedSidebar: {
         type: Boolean,
         computed: "computeDockedSidebar(hass)",
@@ -123,7 +98,7 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
 
   ready() {
     super.ready();
-    this._defaultPage = localStorage.defaultPage || "states";
+    this._defaultPage = localStorage.defaultPage || "lovelace";
     this.addEventListener("hass-open-menu", () => this.handleOpenMenu());
     this.addEventListener("hass-close-menu", () => this.handleCloseMenu());
     this.addEventListener("hass-start-voice", (ev) =>
@@ -160,7 +135,7 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
   connectedCallback() {
     super.connectedCallback();
     if (document.location.pathname === "/") {
-      this.navigate(`/${localStorage.defaultPage || "states"}`, true);
+      this.navigate(`/${localStorage.defaultPage || "lovelace"}`, true);
     }
   }
 

src/layouts/partial-panel-resolver.js

@@ -54,6 +54,10 @@ function ensureLoaded(panel) {
       imported = import(/* webpackChunkName: "panel-lovelace" */ "../panels/lovelace/ha-panel-lovelace");
       break;
 
+    case "states":
+      imported = import(/* webpackChunkName: "panel-states" */ "../panels/states/ha-panel-states");
+      break;
+
     case "history":
       imported = import(/* webpackChunkName: "panel-history" */ "../panels/history/ha-panel-history");
       break;

src/panels/dev-info/ha-panel-dev-info.js

@@ -164,7 +164,7 @@ class HaPanelDevInfo extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </template>
           </p>
           <p>
-            <a href='/lovelace'>Try out the new Lovelace UI (experimental)</a>
+            <a href='/states'>Go back to the old states page</a>
             <div id="love" style="cursor:pointer;" on-click="_toggleDefaultPage">[[_defaultPageText()]]</div
           </p>
         </div>
@@ -364,15 +364,15 @@ class HaPanelDevInfo extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _defaultPageText() {
     return `>> ${
-      localStorage.defaultPage === "lovelace" ? "Remove" : "Set"
+      localStorage.defaultPage === "states" ? "Remove" : "Set"
-    } lovelace as default page on this device <<`;
+    } the old states as default page on this device <<`;
   }
 
   _toggleDefaultPage() {
-    if (localStorage.defaultPage === "lovelace") {
+    if (localStorage.defaultPage === "states") {
       delete localStorage.defaultPage;
     } else {
-      localStorage.defaultPage = "lovelace";
+      localStorage.defaultPage = "states";
     }
     this.$.love.innerText = this._defaultPageText();
   }

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

@@ -1,18 +1,18 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../layouts/partial-cards";
+import "../states/ha-panel-states";
 
 class HaPanelKiosk extends PolymerElement {
   static get template() {
     return html`
-      <partial-cards
+      <ha-panel-states
         id="kiosk-states"
         hass="[[hass]]"
         show-menu
         route="[[route]]"
         panel-visible
-      ></partial-cards>
+      ></ha-panel-states>
     `;
   }
 

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

@@ -1,3 +1,5 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
@@ -6,23 +8,21 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-pages/iron-pages";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-cards";
+import "../../components/ha-cards";
-import "../components/ha-icon";
+import "../../components/ha-icon";
-import "../components/ha-menu-button";
+import "../../components/ha-menu-button";
-import "../components/ha-start-voice-button";
+import "../../components/ha-start-voice-button";
 
-import "./ha-app-layout";
+import "../../layouts/ha-app-layout";
 
-import extractViews from "../common/entity/extract_views";
+import extractViews from "../../common/entity/extract_views";
-import getViewEntities from "../common/entity/get_view_entities";
+import getViewEntities from "../../common/entity/get_view_entities";
-import computeStateName from "../common/entity/compute_state_name";
+import computeStateName from "../../common/entity/compute_state_name";
-import computeStateDomain from "../common/entity/compute_state_domain";
+import computeStateDomain from "../../common/entity/compute_state_domain";
-import computeLocationName from "../common/config/location_name";
+import computeLocationName from "../../common/config/location_name";
-import NavigateMixin from "../mixins/navigate-mixin";
+import NavigateMixin from "../../mixins/navigate-mixin";
-import EventsMixin from "../mixins/events-mixin";
+import EventsMixin from "../../mixins/events-mixin";
 
 const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
 const ALWAYS_SHOW_DOMAIN = ["persistent_notification", "configurator"];
@@ -46,6 +46,10 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
           background-color: var(--secondary-background-color, #e5e5e5);
         }
 
+        iron-pages {
+          height: 100%;
+        }
+
         paper-tabs {
           margin-left: 12px;
           --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
@@ -205,7 +209,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
 
       showTabs: {
         type: Boolean,
-        value: false,
+        value: true,
       },
     };
   }
@@ -416,4 +420,4 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
   }
 }
 
-customElements.define("partial-cards", PartialCards);
+customElements.define("ha-panel-states", PartialCards);