Hass.io switch to tab navigation (#879)

* Hass.io switch to tab navigation

* Fixes

* Changes based on feedback

* Fix main

* move header back to main

* Remove space

* Navigation as suggested, replaced iron-pages

hassio/addon-store/hassio-addon-store.html

@@ -1,8 +1,4 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
 <link rel='import' href='../../src/util/hass-mixins.html'>
 
@@ -12,46 +8,21 @@
 <dom-module id="hassio-addon-store">
   <template>
     <style include="iron-flex ha-style">
-      paper-card {
-        display: block;
-      }
-      .content {
-        padding: 24px 0 32px;
-        max-width: 600px;
-        margin: 0 auto;
-      }
-
       hassio-addon-repository {
         margin-top: 24px;
       }
     </style>
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <paper-icon-button
-            icon='mdi:arrow-left'
-            on-tap='backTapped'
-          ></paper-icon-button>
-          <div main-title>Add-on store</div>
-          <paper-icon-button
-            icon="mdi:refresh"
-            on-tap="refreshTapped"
-          ></paper-icon-button>
-        </app-toolbar>
-      </app-header>
+    <hassio-repositories-editor
+      hass='[[hass]]'
+      repos='[[repos]]'
+    ></hassio-repositories-editor>
 
-      <hassio-repositories-editor
-        hass='[[hass]]'
-        repos='[[repos]]'
-      ></hassio-repositories-editor>
-
-      <template is='dom-repeat' items='[[repos]]' as='repo' sort='sortRepos'>
-        <hassio-addon-repository
-          repo='[[repo]]'
-          addons='[[computeAddons(repo.slug)]]'
-        ></hassio-addon-repository>
-      </template>
-    </app-header-layout>
+    <template is='dom-repeat' items='[[repos]]' as='repo' sort='sortRepos'>
+      <hassio-addon-repository
+        repo='[[repo]]'
+        addons='[[computeAddons(repo.slug)]]'
+      ></hassio-addon-repository>
+    </template>
   </template>
 </dom-module>
 
@@ -64,10 +35,6 @@ class HassioAddonStore extends Polymer.Element {
       hass: Object,
       addons: Array,
       repos: Array,
-      visible: {
-        type: Boolean,
-        observer: 'visibleChanged',
-      },
     };
   }
 
@@ -75,6 +42,7 @@ class HassioAddonStore extends Polymer.Element {
     super.ready();
     this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
     this.addEventListener('hassio-store-refresh', ev => this.refreshData(ev));
+    this.loadData();
   }
 
   apiCalled(ev) {
@@ -102,12 +70,6 @@ class HassioAddonStore extends Polymer.Element {
     });
   }
 
-  visibleChanged(visible) {
-    if (visible) {
-      this.loadData();
-    }
-  }
-
   loadData() {
     this.hass.callApi('get', 'hassio/addons')
       .then((info) => {
@@ -126,14 +88,6 @@ class HassioAddonStore extends Polymer.Element {
         this.loadData();
       });
   }
-
-  refreshTapped() {
-    this.fire('hassio-store-refresh');
-  }
-
-  backTapped() {
-    history.back();
-  }
 }
 
 customElements.define(HassioAddonStore.is, HassioAddonStore);

hassio/addon-view/hassio-addon-view.html

@@ -1,8 +1,12 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/app-route/app-route.html">
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../bower_components/app-route/app-route.html'>
+<link rel='import' href='../../bower_components/app-layout/app-header-layout/app-header-layout.html'>
+<link rel='import' href='../../bower_components/app-layout/app-header/app-header.html'>
+<link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
+<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
+
+<link rel='import' href='../../src/components/ha-menu-button.html'>
+<link rel='import' href='../../src/resources/ha-style.html'>
 
 <link rel="import" href="./hassio-addon-info.html">
 <link rel="import" href="./hassio-addon-config.html">
@@ -30,16 +34,16 @@
       active='{{routeMatches}}'
     ></app-route>
     <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
+      <app-header fixed slot='header'>
+        <app-toolbar>            
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <paper-icon-button
             icon='mdi:arrow-left'
             on-tap='backTapped'
           ></paper-icon-button>
-          <div main-title>[[addon.name]]</div>
+          <div main-title>Hass.io: add-on details</div>
         </app-toolbar>
       </app-header>
-
       <div class='content'>
         <hassio-addon-info
           hass='[[hass]]'
@@ -79,6 +83,8 @@ class HassioAddonView extends Polymer.Element {
   static get properties() {
     return {
       hass: Object,
+      showMenu: Boolean,
+      narrow: Boolean,
       route: Object,
       routeData: {
         type: Object,

hassio/advanced/hassio-advanced.html

@@ -1,11 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-
-<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-host-info.html">
 <link rel="import" href="./hassio-hass-info.html">
@@ -31,38 +25,26 @@
         margin-right: 24px;
       }
     </style>
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <paper-icon-button
-            icon='mdi:arrow-left'
-            on-tap='backTapped'
-          ></paper-icon-button>
-          <div main-title>Advanced Settings</div>
-        </app-toolbar>
-      </app-header>
+    <div class='content'>
+      <div class='status'>
+        <hassio-supervisor-info
+          hass='[[hass]]'
+          data='[[supervisorInfo]]'
+        ></hassio-supervisor-info>
 
-      <div class='content'>
-        <div class='status'>
-          <hassio-supervisor-info
-            hass='[[hass]]'
-            data='[[supervisorInfo]]'
-          ></hassio-supervisor-info>
-
-          <hassio-host-info
-            hass='[[hass]]'
-            data='[[hostInfo]]'
-          ></hassio-host-info>
-        </div>
-        <div class='status'>
-          <hassio-hass-info
-            hass='[[hass]]'
-            data='[[hassInfo]]'
-          ></hassio-hass-info>
-          <div></div>
-        </div>
+        <hassio-host-info
+          hass='[[hass]]'
+          data='[[hostInfo]]'
+        ></hassio-host-info>
       </div>
-    </app-header-layout>
+      <div class='status'>
+        <hassio-hass-info
+          hass='[[hass]]'
+          data='[[hassInfo]]'
+        ></hassio-hass-info>
+        <div></div>
+      </div>
+    </div>
   </template>
 </dom-module>
 
@@ -72,30 +54,12 @@ class HassioAdvanced extends Polymer.Element {
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      supervisorInfo: {
-        type: Object,
-        value: {},
-      },
-
-      hostInfo: {
-        type: Object,
-        value: {},
-      },
-
-      hassInfo: {
-        type: Object,
-        value: {},
-      },
+      hass: Object,
+      supervisorInfo: Object,
+      hostInfo: Object,
+      hassInfo: Object,
     };
   }
-
-  backTapped() {
-    history.back();
-  }
 }
 
 customElements.define(HassioAdvanced.is, HassioAdvanced);

hassio/dashboard/hassio-dashboard.html

@@ -1,17 +1,4 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
-<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel='import' href='../../src/util/hass-mixins.html'>
-<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-addons.html">
 <link rel="import" href="./hassio-hass-update.html">
@@ -22,65 +9,17 @@
       .content {
         margin: 0 auto;
       }
-      .status {
-        @apply(--layout-horizontal);
-        margin-bottom: 24px;
-      }
-      .status > * {
-        @apply(--layout-flex);
-      }
-
-      .status > *:first-child {
-        margin-right: 24px;
-      }
-
-      paper-listbox paper-item {
-        cursor: pointer;
-      }
     </style>
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>Hass.io</div>
-          <paper-icon-button
-            icon="mdi:shopping"
-            on-tap="_openStore"
-          ></paper-icon-button>
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-          >
-            <paper-icon-button
-              icon="mdi:dots-vertical"
-              slot="dropdown-trigger"
-            ></paper-icon-button>
-            <paper-listbox slot="dropdown-content">
-              <paper-item
-                on-tap='_restartHomeAssistant'
-              >Restart Home Assistant</paper-item>
-              <paper-item
-                on-tap='_openSnapshot'
-              >Snapshots</paper-item>
-              <paper-item
-                on-tap='_openAdvanced'
-              >Advanced Settings</paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </app-toolbar>
-      </app-header>
-
-      <div class='content'>
-        <hassio-hass-update
-          hass='[[hass]]'
-          hass-info='[[hassInfo]]'
-        ></hassio-hass-update>
-        <hassio-addons
-          hass='[[hass]]'
-          addons='[[supervisorInfo.addons]]'
-        ></hassio-addons>
-      </div>
-    </app-header-layout>
+    <div class='content'>
+      <hassio-hass-update
+        hass='[[hass]]'
+        hass-info='[[hassInfo]]'
+      ></hassio-hass-update>
+      <hassio-addons
+        hass='[[hass]]'
+        addons='[[supervisorInfo.addons]]'
+      ></hassio-addons>
+    </div>
   </template>
 </dom-module>
 
@@ -90,56 +29,11 @@ class HassioDashboard extends window.hassMixins.EventsMixin(Polymer.Element) {
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
-      supervisorInfo: {
-        type: Object,
-        value: {},
-      },
-
-      hassInfo: {
-        type: Object,
-        value: {},
-      },
+      hass: Object,
+      supervisorInfo: Object,
+      hassInfo: Object,
     };
   }
-
-  _openStore(ev) {
-    history.pushState(null, null, '/hassio/store');
-    this.fire('location-changed');
-    ev.target.blur();
-  }
-
-  _openAdvanced(ev) {
-    history.pushState(null, null, '/hassio/advanced');
-    this.fire('location-changed');
-    ev.target.blur();
-  }
-
-  _openSnapshot(ev) {
-    history.pushState(null, null, '/hassio/snapshot');
-    this.fire('location-changed');
-    ev.target.blur();
-  }
-
-  _restartHomeAssistant(ev) {
-    ev.target.blur();
-    // eslint-disable-next-line no-alert
-    if (confirm('Are you sure you want to restart Home Assistant?')) {
-      this.hass.callApi('POST', 'hassio/homeassistant/restart');
-    }
-  }
 }
 
 customElements.define(HassioDashboard.is, HassioDashboard);

hassio/hassio-data.html

@@ -8,19 +8,16 @@ class HassioData extends Polymer.Element {
     return {
       supervisor: {
         type: Object,
-        value: {},
         notify: true,
       },
 
       host: {
         type: Object,
-        value: {},
         notify: true,
       },
 
       homeassistant: {
         type: Object,
-        value: {},
         notify: true,
       },
     };
@@ -41,23 +38,23 @@ class HassioData extends Polymer.Element {
 
   fetchSupervisorInfo() {
     return this.hass.callApi('get', 'hassio/supervisor/info')
-      .then(function (info) {
+      .then((info) => {
         this.supervisor = info.data;
-      }.bind(this));
+      });
   }
 
   fetchHostInfo() {
     return this.hass.callApi('get', 'hassio/host/info')
-      .then(function (info) {
+      .then((info) => {
         this.host = info.data;
-      }.bind(this));
+      });
   }
 
   fetchHassInfo() {
     return this.hass.callApi('get', 'hassio/homeassistant/info')
-      .then(function (info) {
+      .then((info) => {
         this.homeassistant = info.data;
-      }.bind(this));
+      });
   }
 }
 

hassio/hassio-main.html

@@ -1,33 +1,19 @@
 <link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../bower_components/app-route/app-route.html">
-<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
 
 <link rel="import" href="../src/layouts/hass-loading-screen.html">
-<link rel="import" href="../src/layouts/hass-error-screen.html">
-<link rel='import' href='../src/util/hass-mixins.html'>
 <link rel='import' href='../src/util/hass-util.html'>
-<link rel='import' href='../src/resources/ha-style.html'>
 
-<link rel="import" href="./dashboard/hassio-dashboard.html">
-<link rel="import" href="./advanced/hassio-advanced.html">
-<link rel="import" href="./addon-view/hassio-addon-view.html">
-<link rel="import" href="./addon-store/hassio-addon-store.html">
-<link rel="import" href="./supervisor/hassio-supervisor.html">
-<link rel="import" href="./snapshots/hassio-snapshots.html">
-<link rel="import" href="./hassio-data.html">
+<link rel='import' href='./hassio-data.html'>
+<link rel='import' href='./hassio-pages-with-tabs.html'>
+<link rel='import' href='./addon-view/hassio-addon-view.html'>
 
 <dom-module id="hassio-main">
-  <template>
-    <style>
-      iron-pages {
-        height: 100%;
-      }
-    </style>
+  <template>  
     <app-route
       route='[[route]]'
       pattern='/:page'
-      data="{{_routeData}}"
-      tail="{{_routeTail}}"
+      data="{{routeData}}"
     ></app-route>
     <hassio-data
       id='data'
@@ -43,59 +29,27 @@
         show-menu='[[showMenu]]'
       ></hass-loading-screen>
     </template>
+
     <template is='dom-if' if='[[loaded]]'>
-      <iron-pages
-        selected='[[_routeData.page]]'
-        attr-for-selected='page-name'
-        fallback-selection='not-found'
-        selected-attribute='visible'
-      >
-        <hassio-addon-view
-          page-name='addon'
-          route='[[route]]'
-          hass='[[hass]]'
-        ></hassio-addon-view>
-
-        <hassio-addon-store
-          page-name='store'
-          hass='[[hass]]'
-        ></hassio-addon-store>
-
-        <hassio-supervisor
-          page-name='supervisor'
-          hass='[[hass]]'
-          supervisor-info='[[supervisorInfo]]'
-        ></hassio-supervisor>
-
-        <hassio-dashboard
-          page-name='dashboard'
+      <template is='dom-if' if='[[!equalsAddon(routeData.page)]]'>
+        <hassio-pages-with-tabs
           hass='[[hass]]'
           narrow='[[narrow]]'
           show-menu='[[showMenu]]'
+          page='[[routeData.page]]'
           supervisor-info='[[supervisorInfo]]'
           hass-info='[[hassInfo]]'
-        ></hassio-dashboard>
-
-        <hassio-advanced
-          page-name='advanced'
+          host-info='[[hostInfo]]'        
+        ></hassio-pages-with-tabs>
+      </template>
+      <template is='dom-if' if='[[equalsAddon(routeData.page)]]'>
+        <hassio-addon-view
           hass='[[hass]]'
-          supervisor-info='[[supervisorInfo]]'
-          host-info='[[hostInfo]]'
-          hass-info='[[hassInfo]]'
-        ></hassio-advanced>
-
-        <hassio-snapshots
-          page-name='snapshot'
-          hass='[[hass]]'
-          installed-addons='[[supervisorInfo.addons]]'
-        ></hassio-snapshots>
-
-        <hass-error-screen
-          page-name='not-found'
-          error='Page not found.'
-          title='Hass.io'
-        ></hass-error-screen>
-      </iron-pages>
+          narrow='[[narrow]]'
+          show-menu='[[showMenu]]'
+          route='[[route]]'          
+        ></hassio-addon-view>
+      </template>        
     </template>
   </template>
 </dom-module>
@@ -117,34 +71,15 @@ class HassioMain extends window.hassMixins.EventsMixin(Polymer.Element) {
           path: '/dashboard',
           __queryParams: {}
         },
-        observer: '_routeChanged',
+        observer: 'routeChanged',
       },
-      _routeData: Object,
-      _routeTail: Object,
-
-      addon: {
-        type: String,
-        value: '',
-      },
-
-      supervisorInfo: {
-        type: Object,
-        value: null,
-      },
-
-      hostInfo: {
-        type: Object,
-        value: null,
-      },
-
-      hassInfo: {
-        type: Object,
-        value: null,
-      },
-
+      routeData: Object,
+      supervisorInfo: Object,
+      hostInfo: Object,
+      hassInfo: Object,
       loaded: {
         type: Boolean,
-        computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
+        computed: 'computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
       },
     };
   }
@@ -152,41 +87,45 @@ class HassioMain extends window.hassMixins.EventsMixin(Polymer.Element) {
   ready() {
     super.ready();
     window.hassUtil.applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
-    this.addEventListener('hass-api-called', ev => this._apiCalled(ev));
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this._routeChanged(this.route);
+    this.routeChanged(this.route);
   }
 
-  _apiCalled(ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
-      var tries = 1;
+      let tries = 1;
 
-      var tryUpdate = function () {
+      const tryUpdate = () => {
         this.$.data.refresh().catch(function () {
           tries += 1;
           setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
         });
-      }.bind(this);
+      };
 
       tryUpdate();
     }
   }
 
-  _computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
+  computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
     return (supervisorInfo !== null &&
             hostInfo !== null &&
             hassInfo !== null);
   }
 
-  _routeChanged(route) {
+  routeChanged(route) {
     if (route.path === '' && route.prefix === '/hassio') {
       history.replaceState(null, null, '/hassio/dashboard');
       this.fire('location-changed');
     }
   }
+
+  equalsAddon(page) {
+    return page && page === 'addon';
+  }
 }
 
 customElements.define(HassioMain.is, HassioMain);

hassio/hassio-pages-with-tabs.html

@@ -0,0 +1,103 @@
+<link rel='import' href='../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../bower_components/app-layout/app-header-layout/app-header-layout.html'>
+<link rel='import' href='../bower_components/app-layout/app-header/app-header.html'>
+<link rel='import' href='../bower_components/app-layout/app-toolbar/app-toolbar.html'>
+<link rel='import' href='../bower_components/paper-tabs/paper-tabs.html'>
+<link rel='import' href='../bower_components/paper-tabs/paper-tab.html'>
+
+<link rel='import' href='../src/components/ha-menu-button.html'>
+<link rel='import' href='../src/util/hass-mixins.html'>
+<link rel='import' href='../src/resources/ha-style.html'>
+
+<link rel='import' href='./dashboard/hassio-dashboard.html'>
+<link rel='import' href='./snapshots/hassio-snapshots.html'>
+<link rel='import' href='./addon-store/hassio-addon-store.html'>
+<link rel='import' href='./system/hassio-system.html'>
+
+<dom-module id='hassio-pages-with-tabs'>
+  <template>
+    <style include='iron-flex iron-positioning ha-style'>
+      paper-tabs {
+        margin-left: 12px;
+        --paper-tabs-selection-bar-color: #FFF;
+        text-transform: uppercase;
+      }
+    </style>
+    <app-header-layout has-scrolling-region>
+      <app-header fixed slot='header'>
+        <app-toolbar>            
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Hass.io</div>
+        </app-toolbar>
+        <paper-tabs
+          scrollable
+          selected='[[page]]'
+          attr-for-selected='page-name'
+          on-iron-activate='handlePageSelected'
+        >
+          <paper-tab page-name='dashboard'>Dashboard</paper-tab>
+          <paper-tab page-name='snapshots'>Snapshots</paper-tab>
+          <paper-tab page-name='store'>Add-on store</paper-tab>          
+          <paper-tab page-name='system'>System</paper-tab>
+        </paper-tabs>
+      </app-header>
+      <template is='dom-if' if='[[equals(page, "dashboard")]]'>
+        <hassio-dashboard
+          hass='[[hass]]'
+          supervisor-info='[[supervisorInfo]]'
+          hass-info='[[hassInfo]]'
+        ></hassio-dashboard>
+      </template>
+      <template is='dom-if' if='[[equals(page, "snapshots")]]'>
+        <hassio-snapshots
+          hass='[[hass]]'
+          installed-addons='[[supervisorInfo.addons]]'
+        ></hassio-snapshots>
+      </template>
+      <template is='dom-if' if='[[equals(page, "store")]]'>
+        <hassio-addon-store
+          hass='[[hass]]'
+        ></hassio-addon-store>
+      </template>
+      <template is='dom-if' if='[[equals(page, "system")]]'>
+        <hassio-system
+          hass='[[hass]]'
+          supervisor-info='[[supervisorInfo]]'
+          host-info='[[hostInfo]]'
+          hass-info='[[hassInfo]]'
+        ></hassio-system>
+      </template>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+class HassioPagesWithTabs extends window.hassMixins.NavigateMixin(Polymer.Element) {
+  static get is() { return 'hassio-pages-with-tabs'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      showMenu: Boolean,
+      narrow: Boolean,
+      page: String,
+      supervisorInfo: Object,
+      hostInfo: Object,
+      hassInfo: Object,
+    };
+  }
+
+  handlePageSelected(ev) {
+    const newPage = ev.detail.item.getAttribute('page-name');
+    if (newPage !== this.page) {
+      this.navigate(`/hassio/${newPage}`);
+    }
+  }
+
+  equals(a, b) {
+    return a === b;
+  }
+}
+
+customElements.define(HassioPagesWithTabs.is, HassioPagesWithTabs);
+</script>

hassio/snapshots/hassio-snapshot.html

@@ -31,7 +31,7 @@
         }
       }
     </style>
-    <paper-dialog id='dialog' with-backdrop on-iron-overlay-closed='dialogClosed'>
+    <paper-dialog id='dialog' on-iron-overlay-closed='dialogClosed'>
       <h2>[[computeName(snapshot)]]</h2>
       <div>
         <div class='snapshot-details'>

hassio/snapshots/hassio-snapshots.html

@@ -1,8 +1,4 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
@@ -30,92 +26,76 @@
         display: none;
       }
     </style>
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <paper-icon-button
-            icon='mdi:arrow-left'
-            on-tap='_backTapped'
-          ></paper-icon-button>
-          <div main-title>Snapshots</div>
-          <paper-icon-button
-            icon="mdi:refresh"
-            on-tap="_refreshTapped"
-          ></paper-icon-button>
-        </app-toolbar>
-      </app-header>
-
-      <div class='content'>
-        <div class='card-group'>
-          <div class='title'>
-            New snapshot
-            <div class='description'>
-              Snapshots allow you to easily backup and
-              restore all data of your Hass.io instance.
-            </div>
+    <div class='content'>
+      <div class='card-group'>
+        <div class='title'>
+          New snapshot
+          <div class='description'>
+            Snapshots allow you to easily backup and
+            restore all data of your Hass.io instance.
           </div>
-          <paper-card>
-            <div class='card-content'>
-              <paper-input autofocus label='Name' value='{{snapshotName}}'>
-              </paper-input>
-              <label id='lbltype'>Type:</label>
-              <paper-radio-group selected='{{snapshotType}}' aria-labelledby='lbltype' on-paper-radio-group-changed='typeChanged'>
-                <paper-radio-button name='full'>
-                  Full snapshot
-                </paper-radio-button>
-                <paper-radio-button name='partial'>
-                  Partial snapshot
-                </paper-radio-button>
-              </paper-radio-group>
-              <div id='folders' class='hidden'>
-                Folders:
-                <template is='dom-repeat' items='[[folderList]]'>
-                  <paper-checkbox checked='{{item.checked}}'>
-                    [[item.name]]
-                  </paper-checkbox>
-                </template>
-              </div>
-              <div id='addons' class='hidden'>
-                Add-ons:
-                <template is='dom-repeat' items='[[addonList]]' sort='sortAddons'>
-                  <paper-checkbox checked='{{item.checked}}'>
-                    [[item.name]]
-                  </paper-checkbox>
-                </template>
-              </div>
-            </div>
-            <div class='card-actions'>
-              <paper-button disabled='[[creatingSnapshot]]' on-tap='createSnapshot'>Create</paper-button>
-              <template is='dom-if' if='[[error]]'>
-                <p class='error'>[[error]]</p>
+        </div>
+        <paper-card>
+          <div class='card-content'>
+            <paper-input autofocus label='Name' value='{{snapshotName}}'>
+            </paper-input>
+            <label id='lbltype'>Type:</label>
+            <paper-radio-group selected='{{snapshotType}}' aria-labelledby='lbltype' on-paper-radio-group-changed='typeChanged'>
+              <paper-radio-button name='full'>
+                Full snapshot
+              </paper-radio-button>
+              <paper-radio-button name='partial'>
+                Partial snapshot
+              </paper-radio-button>
+            </paper-radio-group>
+            <div id='folders' class='hidden'>
+              Folders:
+              <template is='dom-repeat' items='[[folderList]]'>
+                <paper-checkbox checked='{{item.checked}}'>
+                  [[item.name]]
+                </paper-checkbox>
               </template>
             </div>
-          </paper-card>
-        </div>
-  
-        <div class='card-group'>
-          <div class='title'>Available snapshots</div>
-          <template is='dom-if' if='[[!snapshots.length]]'>
-            <paper-card>
-              <div class='card-content'>You don't have any snapshots yet.</div>
-            </paper-card>
-          </template>
-          <template is='dom-repeat' items='[[snapshots]]' as='snapshot' sort='sortSnapshots'>
-            <paper-card class='pointer' on-click='snapshotTapped'>
-              <div class='card-content'>
-                <hassio-card-content
-                  title='[[computeName(snapshot)]]'
-                  description='[[computeType(snapshot.type)]]'
-                  datetime='[[snapshot.date]]+00:00'
-                  icon='[[computeIcon(snapshot.type)]]'
-                  icon-class='snapshot'
-                ></hassio-card-content>
-              </div>
-            </paper-card>
-          </template>
-        </div>
+            <div id='addons' class='hidden'>
+              Add-ons:
+              <template is='dom-repeat' items='[[addonList]]' sort='sortAddons'>
+                <paper-checkbox checked='{{item.checked}}'>
+                  [[item.name]]
+                </paper-checkbox>
+              </template>
+            </div>
+          </div>
+          <div class='card-actions'>
+            <paper-button disabled='[[creatingSnapshot]]' on-tap='createSnapshot'>Create</paper-button>
+            <template is='dom-if' if='[[error]]'>
+              <p class='error'>[[error]]</p>
+            </template>
+          </div>
+        </paper-card>
       </div>
-    </app-header-layout>    
+
+      <div class='card-group'>
+        <div class='title'>Available snapshots</div>
+        <template is='dom-if' if='[[!snapshots.length]]'>
+          <paper-card>
+            <div class='card-content'>You don't have any snapshots yet.</div>
+          </paper-card>
+        </template>
+        <template is='dom-repeat' items='[[snapshots]]' as='snapshot' sort='sortSnapshots'>
+          <paper-card class='pointer' on-click='snapshotTapped'>
+            <div class='card-content'>
+              <hassio-card-content
+                title='[[computeName(snapshot)]]'
+                description='[[computeType(snapshot.type)]]'
+                datetime='[[snapshot.date]]+00:00'
+                icon='[[computeIcon(snapshot.type)]]'
+                icon-class='snapshot'
+              ></hassio-card-content>
+            </div>
+          </paper-card>
+        </template>
+      </div>
+    </div>
     <hassio-snapshot      
       hass='[[hass]]'
       snapshot-slug='[[selectedSnapshot]]'
@@ -132,10 +112,6 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
   static get properties() {
     return {
       hass: Object,
-      visible: {
-        type: Boolean,
-        observer: 'visibleChanged',
-      },
       snapshotName: String,
       snapshotType: {
         type: String,
@@ -173,12 +149,7 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
   ready() {
     super.ready();
     this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
-  }
-
-  visibleChanged(visible) {
-    if (visible) {
-      this.updateSnapshots();
-    }
+    this.updateSnapshots();
   }
 
   apiCalled(ev) {
@@ -274,17 +245,6 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
       this.updateOverview = false;
     }
   }
-
-  backTapped() {
-    history.back();
-  }
-
-  refreshTapped() {
-    this.hass.callApi('post', 'hassio/snapshots/reload')
-      .then(() => {
-        this.updateSnapshots();
-      });
-  }
 }
 
 customElements.define(HassioSnapshots.is, HassioSnapshots);

hassio/supervisor/hassio-supervisor.html

@@ -1,11 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel="import" href="../../src/components/ha-menu-button.html">
-
 <dom-module id="hassio-supervisor">
   <template>
     <style include="iron-flex ha-style">
@@ -14,24 +9,18 @@
         margin: 0;
         white-space: pre-wrap;
       }
+      paper-icon-button {
+        color: var(--primary-color);
+        position: sticky;
+        top: 0;
+        float: right;
+      }
     </style>
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <paper-icon-button
-            icon='mdi:arrow-left'
-            on-tap='_backTapped'
-          ></paper-icon-button>
-          <div main-title>Supervisor Logs</div>
-          <paper-icon-button
-            icon="mdi:refresh"
-            on-tap="_refreshTapped"
-          ></paper-icon-button>
-        </app-toolbar>
-      </app-header>
-
-      <pre class='content'>[[logs]]</pre>
-    </app-header-layout>
+    <paper-icon-button
+      icon='mdi:refresh'
+      on-tap='refreshTapped'
+    ></paper-icon-button>
+    <pre class='content'>[[log]]</pre>
   </template>
 </dom-module>
 
@@ -41,43 +30,27 @@ class HassioSupervisor extends Polymer.Element {
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      visible: {
-        type: Boolean,
-        observer: '_visibleChanged',
-      },
-
-      logs: {
-        type: String,
-        value: '',
-      },
+      hass: Object,
+      log: String,
     };
   }
 
-  _visibleChanged(visible) {
-    if (visible) {
-      this._loadData();
-    }
+  ready() {
+    super.ready();
+    this.loadData();
   }
 
-  _loadData() {
+  loadData() {
     this.hass.callApi('get', 'hassio/supervisor/logs')
-      .then(function (info) {
-        this.logs = info;
-      }.bind(this), function () {
-        this.logs = 'Error fetching logs';
-      }.bind(this));
+      .then((info) => {
+        this.log = info;
+      }, () => {
+        this.log = 'Error fetching logs';
+      });
   }
 
-  _refreshTapped() {
-    this._loadData();
-  }
-
-  _backTapped() {
-    history.back();
+  refreshTapped() {
+    this.loadData();
   }
 }