Migrate panels to app elements

bower.json

@@ -17,7 +17,9 @@
     "google-apis": "GoogleWebComponents/google-apis#~1.1.6",
     "font-roboto-local": "^1.0.1",
     "iron-flex-layout": "^1.3.1",
-    "paper-scroll-header-panel": "1.0.16"
+    "paper-scroll-header-panel": "1.0.16",
+    "app-elements": "^0.9.0",
+    "app-layout": "^0.10.1"
   },
   "_comment": "added to get min version for iron-flex-layout, paper-scroll-header-panel"
 }

panels/dev-event/ha-panel-dev-event.html

@@ -5,23 +5,29 @@
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <link rel="import" href="./events-list.html">
 
 <dom-module id="ha-panel-dev-event">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
-      .content {
+      :host {
-        @apply(--paper-font-body1);
-        margin-top: 64px;
-        padding: 24px;
         background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
+      .content {
+        @apply(--paper-font-body1);
+        padding: 24px;
+      }
 
       .ha-form {
         margin-right: 16px;
@@ -32,8 +38,13 @@
       }
     </style>
 
-    <partial-base narrow="{{narrow}}" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>Events</span>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Events</div>
+        </app-toolbar>
+      </app-header>
 
       <div class$='[[computeFormClasses(narrow)]]'>
         <div class='flex'>
@@ -53,7 +64,7 @@
           <events-list on-event-selected='eventSelected' hass='[[hass]]'></event-list>
         </div>
       </div>
-    </partial-base>
+    </events-list>
 
   </template>
 </dom-module>

panels/dev-info/ha-panel-dev-info.html

@@ -2,22 +2,28 @@
 
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <dom-module id="ha-panel-dev-info">
   <template>
-    <style is="custom-style" include="iron-positioning"></style>
+    <style include="iron-positioning ha-style">
-    <style>
+      :host {
-      .content {
-        margin-top: 64px;
-        padding: 24px;
         background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
 
+      .content {
+        padding: 24px;
+      }
+
       .about {
         text-align: center;
         line-height: 2em;
@@ -52,8 +58,13 @@
       }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>About</span>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>About</div>
+        </app-toolbar>
+      </app-header>
 
       <div class='content fit'>
         <div class='about'>
@@ -88,7 +99,7 @@
         </p>
         <div class='error-log'>[[errorLog]]</div>
       </div>
-    </partial-base>
+    </app-header-layout>
     </template>
 </dom-module>
 

panels/dev-service/ha-panel-dev-service.html

@@ -5,24 +5,29 @@
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <link rel="import" href="./services-list.html">
 
 <dom-module id="ha-panel-dev-service">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style include="iron-flex iron-positioning ha-style">
-    <style>
+      :host {
-      .content {
-        @apply(--paper-font-body1);
-        margin-top: 64px;
-        padding: 24px;
         background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
 
+      .content {
+        padding: 24px;
+      }
+
       .ha-form {
         margin-right: 16px;
       }
@@ -37,8 +42,13 @@
       }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>Services</span>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Services</div>
+        </app-toolbar>
+      </app-header>
 
       <div class$='[[computeFormClasses(narrow)]]'>
         <div class='flex'>
@@ -60,7 +70,7 @@
           <services-list on-service-selected='serviceSelected' hass='[[hass]]'></services-list>
         </div>
       </div>
-    </partial-base>
+    </app-header-layout>
   </template>
 </dom-module>
 

panels/dev-state/entity-list.html

@@ -1,60 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../../src/util/hass-behavior.html">
-
-<dom-module id="entity-list">
-  <template>
-    <style>
-      ul {
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        list-style: none;
-        line-height: 2em;
-      }
-
-      a {
-        color: var(--dark-primary-color);
-      }
-    </style>
-
-    <ul>
-      <template is='dom-repeat' items='[[entities]]' as='entity'>
-        <li><a href='#' on-click='entitySelected'>[[entity.entityId]]</a></li>
-      </template>
-    </ul>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'entity-list',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    entities: {
-      type: Array,
-      bindNuclear: function (hass) {
-        return [
-          hass.entityGetters.entityMap,
-          function (map) {
-            return map.valueSeq().sortBy(function (entity) { return entity.entityId; }).toArray();
-          },
-        ];
-      },
-    },
-  },
-
-  entitySelected: function (ev) {
-    ev.preventDefault();
-    this.fire('entity-selected', { entityId: ev.model.entity.entityId });
-  },
-});
-</script>

panels/dev-state/ha-panel-dev-state.html

@@ -4,58 +4,85 @@
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="./entity-list.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/util/hass-behavior.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <dom-module id="ha-panel-dev-state">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style include="ha-style">
-    <style>
+      :host {
-      .content {
-        @apply(--paper-font-body1);
-        margin-top: 64px;
-        padding: 24px;
         background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
 
-      .ha-form {
+      .content {
-        margin-right: 16px;
+        padding: 24px;
       }
 
-      .header {
+      .entities th {
-        @apply(--paper-font-title);
+        text-align: left;
+      }
+
+      .entities td:nth-child(3) {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .entities a {
+        color: var(--primary-color);
       }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>States</span>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>States</div>
+        </app-toolbar>
+      </app-header>
 
-      <div class$='[[computeFormClasses(narrow)]]'>
+      <div class='content'>
-        <div class='flex'>
+        <div>
-          <p>
           Set the representation of a device within Home Assistant.<br />
           This will not communicate with the actual device.
-          </p>
 
-          <div class='ha-form'>
+          <paper-input label="Entity ID" autofocus required value='{{_entityId}}'></paper-input>
-            <paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
+          <paper-input label="State" required value='{{_state}}'></paper-input>
-            <paper-input label="State" required value='{{state}}'></paper-input>
+          <paper-textarea label="State attributes (JSON, optional)" value='{{_stateAttributes}}'></paper-textarea>
-            <paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
           <paper-button on-tap='handleSetState' raised>Set State</paper-button>
         </div>
-        </div>
 
-        <div>
+        <h1>Current entities</h1>
-          <div class='header'>Current entities</div>
+        <table class='entities'>
-          <entity-list on-entity-selected='entitySelected' hass='[[hass]]'></entity-list>
+          <tr>
+            <th>Entity</th>
+            <th>State</th>
+            <th hidden$='[[narrow]]'>
+              Attributes
+              <paper-checkbox checked='{{_showAttributes}}'></paper-checkbox>
+            </th>
+          </tr>
+          <template is='dom-repeat' items='[[_entities]]' as='entity'>
+            <tr>
+              <td><a href='#' on-tap='entitySelected'>[[entity.entityId]]</a></td>
+              <td>[[entity.state]]</td>
+              <template is='dom-if' if='[[computeShowAttributes(narrow, _showAttributes)]]'>
+                <td>[[attributeString(entity)]]</td>
+              </template>
+            </tr>
+          </template>
+        </table>
       </div>
-      </div>
+    </app-header-layout>
-    </partial-base>
   </template>
 </dom-module>
 
@@ -63,6 +90,8 @@
 Polymer({
   is: 'ha-panel-dev-state',
 
+  behaviors: [window.hassBehavior],
+
   properties: {
     hass: {
       type: Object,
@@ -78,43 +107,51 @@ Polymer({
       value: false,
     },
 
-    entityId: {
+    _entityId: {
       type: String,
       value: '',
     },
 
-    state: {
+    _state: {
       type: String,
       value: '',
     },
 
-    stateAttributes: {
+    _stateAttributes: {
       type: String,
       value: '',
     },
+
+    _showAttributes: {
+      type: Boolean,
+      value: true,
     },
 
-  setStateData: function (stateData) {
+    _entities: {
-    var value = stateData ? JSON.stringify(stateData, null, '  ') : '';
+      type: Array,
-
+      bindNuclear: function (hass) {
-    this.$.inputData.value = value;
+        return [
-
+          hass.entityGetters.entityMap,
-    // not according to the spec but it works...
+          function (map) {
-    this.$.inputDataWrapper.update(this.$.inputData);
+            return map.valueSeq().sortBy(function (entity) { return entity.entityId; }).toArray();
+          },
+        ];
+      },
+    },
   },
 
   entitySelected: function (ev) {
-    var state = this.hass.reactor.evaluate(this.hass.entityGetters.byId(ev.detail.entityId));
+    var state = ev.model.entity;
-
+    this._entityId = state.entityId;
-    this.entityId = state.entityId;
+    this._state = state.state;
-    this.state = state.state;
+    this._stateAttributes = JSON.stringify(state.attributes, null, '  ');
-    this.stateAttributes = JSON.stringify(state.attributes, null, '  ');
+    ev.preventDefault();
   },
 
   handleSetState: function () {
     var attr;
     try {
-      attr = this.stateAttributes ? JSON.parse(this.stateAttributes) : {};
+      attr = this.stateAttributes ? JSON.parse(this._stateAttributes) : {};
     } catch (err) {
       /* eslint-disable no-alert */
       alert('Error parsing JSON: ' + err);
@@ -123,15 +160,28 @@ Polymer({
     }
 
     this.hass.entityActions.save({
-      entityId: this.entityId,
+      entityId: this._entityId,
-      state: this.state,
+      state: this._state,
       attributes: attr,
     });
   },
 
-  computeFormClasses: function (narrow) {
+  computeShowAttributes: function (narrow, _showAttributes) {
-    return narrow ?
+    return !narrow && _showAttributes;
-      'content fit' : 'content fit layout horizontal';
+  },
+
+  attributeString: function (entity) {
+    var output = '';
+    var i;
+    var keys;
+    var key;
+
+    for (i = 0, keys = Object.keys(entity.attributes); i < keys.length; i++) {
+      key = keys[i];
+      output += key + ': ' + entity.attributes[key] + '\n';
+    }
+
+    return output;
   },
 });
 </script>

panels/dev-template/ha-panel-dev-template.html

@@ -4,23 +4,29 @@
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <dom-module id="ha-panel-dev-template">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
-      .content {
+      :host {
-        @apply(--paper-font-body1);
-        margin-top: 64px;
-        padding: 16px;
         background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
 
+      .content {
+        padding: 24px;
+      }
+
       .edit-pane {
         margin-right: 16px;
       }
@@ -55,8 +61,13 @@
       }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>Template Editor</span>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Templates</div>
+        </app-toolbar>
+      </app-header>
 
       <div class$='[[computeFormClasses(narrow)]]'>
         <div class='edit-pane'>
@@ -75,7 +86,7 @@
           <pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
         </div>
       </div>
-    </partial-base>
+    </app-header-layout>
   </template>
 </dom-module>
 

panels/history/ha-panel-history.html

@@ -2,15 +2,19 @@
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="../../src/components/state-history-charts.html">
 <link rel="import" href="../../src/resources/pikaday-js.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <dom-module id="ha-panel-history">
   <template>
-    <style is="custom-style" include="iron-flex"></style>
+    <style include="iron-flex ha-style">
-    <style>
       .content {
         background-color: white;
       }
@@ -28,11 +32,17 @@
       }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>History</span>
+      <app-header fixed>
-
+        <app-toolbar>
-      <paper-icon-button icon="mdi:refresh" header-buttons
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-        on-tap="handleRefreshClick"></paper-icon-button>
+          <div main-title>History</div>
+          <paper-icon-button
+            icon="mdi:refresh"
+            on-tap="handleRefreshClick"
+          ></paper-icon-button>
+        </app-toolbar>
+      </app-header>
 
       <div class$="[[computeContentClasses(narrow)]]">
         <paper-input
@@ -45,7 +55,7 @@
         <state-history-charts state-history="[[stateHistory]]"
           is-loading-data="[[isLoadingData]]"></state-history-charts>
       </div>
-    </partial-base>
+    </app-header-layout>
   </template>
 </dom-module>
 

panels/iframe/ha-panel-iframe.html

@@ -1,19 +1,23 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
-<link rel="import" href="../../src/layouts/partial-base.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
+<link rel="import" href="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <dom-module id='ha-panel-iframe'>
   <template>
-    <style>
+    <style include='ha-style'>
       iframe {
         border: 0;
         width: 100%;
-        height: 100%;
+        height: calc(100% - 64px);
       }
     </style>
-
+    <app-toolbar>
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-      <span header-title>[[panel.title]]</span>
+      <div main-title>[[panel.title]]</div>
+    </app-toolbar>
 
     <iframe
       src='[[panel.config.url]]'

panels/logbook/ha-panel-logbook.html

@@ -3,16 +3,21 @@
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 
-<link rel="import" href="../../src/layouts/partial-base.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="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/components/loading-box.html">
 <link rel="import" href="../../src/resources/pikaday-js.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <link rel="import" href="./ha-logbook.html">
 
 <dom-module id="ha-panel-logbook">
   <template>
-    <style>
+    <style include="ha-style">
     .selected-date-container {
       padding: 0 16px;
     }
@@ -26,11 +31,17 @@
     }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+    <app-header-layout has-scrolling-region>
-      <span header-title>Logbook</span>
+      <app-header fixed>
-
+        <app-toolbar>
-      <paper-icon-button icon="mdi:refresh" header-buttons
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-        on-tap="handleRefresh"></paper-icon-button>
+          <div main-title>Logbook</div>
+          <paper-icon-button
+            icon="mdi:refresh"
+            on-tap="handleRefresh"
+          ></paper-icon-button>
+        </app-toolbar>
+      </app-header>
 
       <div>
         <div class='selected-date-container'>
@@ -45,7 +56,7 @@
         </div>
         <ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
       </div>
-    </partial-base>
+    </app-header-layout>
   </template>
 </dom-module>
 

panels/map/ha-panel-map.html

@@ -4,11 +4,14 @@
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
 
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
 <link rel="import" href="../../bower_components/leaflet-map/leaflet-map.html">
 
 <!-- temp work around -->
 <link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
 
+<link rel="import" href="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
 
 <link rel="import" href="./ha-entity-marker.html">
@@ -22,25 +25,19 @@
 
 <dom-module id="ha-panel-map">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style include="ha-style">
-    <style>
+      leaflet-map {
-      .map {
+        height: calc(100% - 64px);
-        position: relative;
+        width: 100%;
-      }
-
-      .menu-icon {
-        margin-right: 24px;
       }
     </style>
 
-    <div class='layout vertical fit'>
+    <app-toolbar>
-      <paper-toolbar>
+      <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
+      <div main-title>Map</div>
-        <div class='title'>Map</div>
+    </app-toolbar>
-      </paper-toolbar>
 
-      <div class="flex map">
+    <leaflet-map fit-to-markers id="map" max-zoom="17">
-        <leaflet-map class="fit" fit-to-markers id="map" max-zoom="17">
       <leaflet-tilelayer max-zoom="18"
         url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png">
         &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>
@@ -82,8 +79,6 @@
         </template>
       </template>
     </leaflet-map>
-      </div>
-    </div>
   </template>
 </dom-module>
 

src/home-assistant.html

@@ -12,8 +12,7 @@
 <link rel='import' href='./layouts/login-form.html'>
 <link rel='import' href='./layouts/home-assistant-main.html'>
 <link rel='import' href='./resources/home-assistant-style.html'>
-<!-- to support panels -->
+<link rel="import" href="./resources/panel-imports.html">
-<link rel="import" href="./layouts/partial-base.html">
 
 <dom-module id='home-assistant'>
   <template>

src/layouts/partial-base.html

@@ -1,55 +0,0 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
-
-<link rel='import' href='../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html'>
-
-<link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
-<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
-
-<link rel='import' href='../components/ha-menu-button.html'>
-
-<dom-module id='partial-base'>
-  <template>
-    <style is="custom-style" include="iron-positioning"></style>
-    <style>
-      :host {
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-      }
-
-      .title {
-        margin-left: 24px !important;
-      }
-    </style>
-
-    <paper-scroll-header-panel class='fit'>
-      <paper-toolbar>
-        <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-        <div class="title">
-          <content select='[header-title]'></content>
-        </div>
-        <content select='[header-buttons]'></content>
-      </paper-toolbar>
-
-      <content></content>
-    </paper-scroll-header-panel>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'partial-base',
-
-  properties: {
-    narrow: {
-      type: Boolean,
-      value: false,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-  },
-});
-</script>

src/resources/home-assistant-style.html

@@ -49,3 +49,27 @@
     animation: ha-spin 2s infinite linear;
   }
 </style>
+
+<dom-module id='ha-style'>
+  <template>
+    <style>
+      :host {
+        @apply(--paper-font-body1);
+      }
+
+      app-toolbar {
+        background-color: var(--primary-color);
+        font-weight: 400;
+        color: white;
+      }
+
+      app-toolbar ha-menu-button + [main-title] {
+        margin-left: 24px;
+      }
+
+      h1 {
+        @apply(--paper-font-title);
+      }
+    </style>
+  </template>
+</dom-module>

src/resources/panel-imports.html

@@ -0,0 +1,3 @@
+<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">