Tweaks for the new drawer UI

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "9e0bb62c1e6376f8aa0dfdc17f9dfa7a"
+VERSION = "d7b5242370bf59018a6a4a2163d7daea"

homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="../components/state-info.html">
 
-<polymer-element name="state-card-configurator" attributes="stateObj api" noscript>
+<polymer-element name="state-card-configurator" attributes="stateObj" noscript>
   <template>
     <style>
     .state {

homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html

@@ -13,22 +13,35 @@
     }
   </style>
 
-  <div id='card'></div>
+  <div id='cardContainer'></div>
 </template>
 <script>
 Polymer({
-  stateObjChanged: function() {
+  stateObjChanged: function(oldVal, newVal) {
-    while (this.$.card.lastChild) {
+    var cardContainer = this.$.cardContainer;
-      this.$.card.removeChild(this.$.card.lastChild);
+
+    if (!newVal) {
+      if (cardContainer.lastChild) {
+        cardContainer.removeChild(cardContainer.lastChild);
+      }
+      return;
     }
 
-    if (!this.stateObj.cardType) return;
+    if (!oldVal || oldVal.cardType != newVal.cardType) {
+      if (cardContainer.lastChild) {
+        cardContainer.removeChild(cardContainer.lastChild);
+      }
 
-    var stateCard = document.createElement("state-card-" + this.stateObj.cardType);
+      var stateCard = document.createElement("state-card-" + newVal.cardType);
-    stateCard.api = this.api;
+      stateCard.stateObj = newVal;
-    stateCard.stateObj = this.stateObj;
+      cardContainer.appendChild(stateCard);
-    this.$.card.appendChild(stateCard);    
+
-  }
+    } else {
+
+      cardContainer.lastChild.stateObj = newVal;
+
+    }
+  },
 });
 </script>
 </polymer-element>

homeassistant/components/frontend/www_static/polymer/cards/state-card.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="state-card-content.html">
 
-<polymer-element name="state-card" attributes="api stateObj" on-click="cardClicked">
+<polymer-element name="state-card" attributes="stateObj" on-click="cardClicked">
 <template>
   <style>
     :host {
@@ -19,7 +19,7 @@
     }
   </style>
 
-  <state-card-content stateObj={{stateObj}} api={{api}}></state-card-content>
+  <state-card-content stateObj={{stateObj}}></state-card-content>
 </template>
 <script>
 Polymer({

homeassistant/components/frontend/www_static/polymer/components/entity-list.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
-<polymer-element name="entity-list" attributes="api cbEntityClicked">
+<polymer-element name="entity-list" attributes="cbEntityClicked">
   <template>
     <style>
     :host {

homeassistant/components/frontend/www_static/polymer/components/services-list.html

@@ -5,7 +5,7 @@
 
 <link rel="import" href="domain-icon.html">
 
-<polymer-element name="services-list" attributes="api cbServiceClicked">
+<polymer-element name="services-list" attributes="cbServiceClicked">
   <template>
     <style>
     :host {

homeassistant/components/frontend/www_static/polymer/dialogs/more-info-dialog.html

@@ -5,10 +5,9 @@
 <link rel="import" href="../components/state-timeline.html">
 <link rel="import" href="../more-infos/more-info-content.html">
 
-<polymer-element name="more-info-dialog" attributes="api">
+<polymer-element name="more-info-dialog">
 <template>
   <ha-action-dialog id="dialog">
-
     <style>
     .title-card {
       margin-bottom: 24px;
@@ -21,9 +20,6 @@
       <state-timeline stateObj="{{stateObj}}"></state-timeline>
       <more-info-content stateObj="{{stateObj}}"></more-info-content>
     </div>
-
-<!--     <paper-button dismissive on-click={{editClicked}}>Debug</paper-button>
-    <paper-button affirmative>Dismiss</paper-button> -->
   </ha-action-dialog>
 
 </template>
@@ -55,10 +51,6 @@ Polymer({
     }.bind(this));
   },
 
-  editClicked: function(ev) {
-    window.hass.uiActions.showSetStateDialog(this.stateObj.entity_id);
-  }
-
 });
 </script>
 </polymer-element>

homeassistant/components/frontend/www_static/polymer/home-assistant-js

@@ -1 +1 @@
-Subproject commit 0f7d9c5d63c869101a7c636509a0ea3b9967cade
+Subproject commit 68908b8dec636f9b0f87f7c929bf8546d19aa11f

homeassistant/components/frontend/www_static/polymer/home-assistant.html

@@ -1,10 +1,11 @@
 <link rel="import" href="bower_components/polymer/polymer.html">
 <link rel="import" href="bower_components/font-roboto/roboto.html">
 
+<link rel="import" href="resources/home-assistant-style.html">
+
 <link rel="import" href="home-assistant-api.html">
 <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">
 
 <polymer-element name="home-assistant" attributes="auth">
   <template>
@@ -17,7 +18,6 @@
 
     </style>
 
-    <home-assistant-style></home-assistant-style>
     <home-assistant-api auth="{{auth}}"></home-assistant-api>
 
     <template if="{{!loaded}}">

homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html

@@ -1,15 +1,11 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
 <link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
 <link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
 <link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
 <link rel="import" href="../bower_components/core-menu/core-menu.html">
-
 <link rel="import" href="../bower_components/core-style/core-style.html">
-
 <link rel="import" href="../bower_components/core-icon/core-icon.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="../bower_components/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../bower_components/paper-dropdown/paper-dropdown.html">
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 
 <link rel="import" href="../layouts/partial-states.html">
@@ -18,7 +14,7 @@
 <link rel="import" href="../layouts/partial-dev-call-service.html">
 <link rel="import" href="../layouts/partial-dev-set-state.html">
 
-<polymer-element name="home-assistant-main" attributes="api">
+<polymer-element name="home-assistant-main">
 <template>
   <core-style ref="ha-headers"></core-style>
 
@@ -58,8 +54,8 @@
       border-top: 1px solid #e0e0e0; 
     }
 
-    .seperator ~ paper-item {
+    .dev-tools {
-
+      padding: 0 8px;
     }
   </style>
 
@@ -68,7 +64,7 @@
       <core-toolbar>
         Home Assistant
       </core-toolbar>
-      <core-menu
+      <core-menu id="menu"
         selected="0" excludedLocalNames="div" on-core-select="{{menuSelect}}"
         layout vertical>
         <paper-item data-panel="states">
@@ -92,28 +88,30 @@
         </paper-item>
 
         <div class='seperator'>Developer Tools</div>
-        <paper-item data-panel="call-service">
+        <div class='dev-tools' layout horizontal justified>
-          <core-icon icon="settings-remote"></core-icon>
+          <paper-icon-button
-          Call Service
+            icon="settings-remote" data-panel='call-service'
-        </paper-item>
+            on-click="{{handleDevClick}}"></paper-icon-button>
-        <paper-item data-panel="set-state">
+          <paper-icon-button
-          <core-icon icon="settings-ethernet"></core-icon>
+            icon="settings-ethernet" data-panel='set-state'
-          Set State
+            on-click="{{handleDevClick}}"></paper-icon-button>
-        </paper-item>
+          <paper-icon-button
-        <paper-item data-panel="fire-event">
+            icon="settings-input-antenna" data-panel='fire-event'
-          <core-icon icon="settings-input-antenna"></core-icon>
+            on-click="{{handleDevClick}}"></paper-icon-button>
-          Fire Event
+        </div>
-        </paper-item>
       </core-menu>
     </core-header-panel>
 
-    <template if="{{selected == 'states' || selected == 'group'}}">
+    <!--
-      <partial-states
+        This is the main partial, never remove it from the DOM but hide it
-        main narrow="{{narrow}}"
+        to speed up when people click on states.
-        togglePanel="{{togglePanel}}"
+    -->
-        filter="{{selected == 'group' ? 'group' : null}}">
+    <partial-states hidden?="{{selected != 'states' && selected != 'group'}}"
-      </partial-states>
+      main narrow="{{narrow}}"
-    </template>
+      togglePanel="{{togglePanel}}"
+      filter="{{selected == 'group' ? 'group' : null}}">
+    </partial-states>
+
     <template if="{{selected == 'history'}}">
       <partial-history main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-history>
     </template>
@@ -140,12 +138,21 @@ Polymer({
 
   menuSelect: function(ev, detail, sender) {
     if (detail.isSelected) {
-      var newChoice = detail.item.dataset.panel;
+      this.selectPanel(detail.item);
+    }
+  },
 
-      if(newChoice !== this.selected) {
+  handleDevClick: function(ev, detail, sender) {
-        this.togglePanel();
+    this.$.menu.selected = -1;
-        this.selected = newChoice;
+    this.selectPanel(ev.target);
-      }
+  },
+
+  selectPanel: function(element) {
+    var newChoice = element.dataset.panel;
+
+    if(newChoice !== this.selected) {
+      this.togglePanel();
+      this.selected = newChoice;
     }
   },
 

homeassistant/components/frontend/www_static/polymer/layouts/login-form.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+
 <link rel="import" href="../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
 <link rel="import" href="../bower_components/core-input/core-input.html">
@@ -69,7 +70,6 @@
     spinnerMessage: "",
 
     ready: function() {
-      this.syncStore = window.hass.syncStore;
       this.authStore = window.hass.authStore;
 
       this.authChangeListener = this.authChangeListener.bind(this);

homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html

@@ -1,3 +1,5 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
 <link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
 <link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
@@ -8,12 +10,6 @@
 <template>
   <core-style ref="ha-headers"></core-style>
 
-  <style>
-    .content {
-      background-color: white;
-    }
-  </style>
-
   <core-scroll-header-panel fit fixed="{{!narrow}}">
     <core-toolbar>
       <paper-icon-button
@@ -25,9 +21,7 @@
       <content select="[header-buttons]"></content>
     </core-toolbar>
 
-    <div class='content'>
+    <content></content>
-      <content></content>
-    </div>
 
   </core-scroll-header-panel>
 </template>

homeassistant/components/frontend/www_static/polymer/layouts/partial-dev-call-service.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+
 <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-input-decorator.html">
@@ -14,36 +15,42 @@
   <style>
   .form {
     padding: 24px;
+    background-color: white;
   }
   </style>
 
   <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
     <span header-title>Call Service</span>
 
-    <div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}" class='form'  flex?="{{!narrow}}">
+    <div class='form' fit>
-      <div class='ha-form'>
+      <p>
-        <paper-input id="inputDomain" label="Domain" floatingLabel="true" autofocus required></paper-input>
+        Call a service from a component.
-        <paper-input id="inputService" label="Service" floatingLabel="true" required></paper-input>
+      </p>
-        <paper-input-decorator
-          label="Service Data (JSON, optional)"
-          floatingLabel="true">
-          
-          <paper-autogrow-textarea id="inputDataWrapper">
-            <textarea id="inputData"></textarea>
-          </paper-autogrow-textarea>
-          
-        </paper-input-decorator>
-        <paper-button on-click={{clickCallService}}>Call Service</paper-button>
-      </div>
 
-      <div class='sidebar'>
+      <div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}">
-        <b>Available services:</b>
+        <div class='ha-form' flex?="{{!narrow}}">
-        <services-list api={{api}} cbServiceClicked={{serviceSelected}}></event-list>        
+          <paper-input id="inputDomain" label="Domain" floatingLabel="true" autofocus required></paper-input>
+          <paper-input id="inputService" label="Service" floatingLabel="true" required></paper-input>
+          <paper-input-decorator
+            label="Service Data (JSON, optional)"
+            floatingLabel="true">
+
+            <paper-autogrow-textarea id="inputDataWrapper">
+              <textarea id="inputData"></textarea>
+            </paper-autogrow-textarea>
+
+          </paper-input-decorator>
+          <paper-button on-click={{clickCallService}}>Call Service</paper-button>
+        </div>
+
+        <div class='sidebar'>
+          <b>Available services:</b>
+          <services-list cbServiceClicked={{serviceSelected}}></event-list>
+        </div>
       </div>
     </div>
 
 
-
   </partial-base>
 
 </template>

homeassistant/components/frontend/www_static/polymer/layouts/partial-dev-fire-event.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+
 <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-input-decorator.html">
@@ -14,35 +15,41 @@
   <style>
   .form {
     padding: 24px;
+    background-color: white;
   }
   </style>
 
   <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
     <span header-title>Fire Event</span>
 
-    <div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}" class='form' flex>
+    <div class='form' fit>
-      <div class='ha-form'  flex?="{{!narrow}}">
+      <p>
-        <paper-input
+        Fire an event on the event bus.
-          id="inputType" label="Event Type" floatingLabel="true"
+      </p>
-          autofocus required></paper-input>
-        <paper-input-decorator
-          label="Event Data (JSON, optional)"
-          floatingLabel="true">
-          
-          <paper-autogrow-textarea id="inputDataWrapper">
-            <textarea id="inputData"></textarea>
-          </paper-autogrow-textarea>
-        </paper-input-decorator>
 
-        <paper-button on-click={{clickFireEvent}}>Fire Event</paper-button>
+      <div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}">
-      </div>
+        <div class='ha-form'  flex?="{{!narrow}}">
+          <paper-input
+            id="inputType" label="Event Type" floatingLabel="true"
+            autofocus required></paper-input>
+          <paper-input-decorator
+            label="Event Data (JSON, optional)"
+            floatingLabel="true">
 
-      <div class='sidebar'>
+            <paper-autogrow-textarea id="inputDataWrapper">
-        <b>Available events:</b>
+              <textarea id="inputData"></textarea>
-        <events-list api={{api}} cbEventClicked={{eventSelected}}></event-list>        
+            </paper-autogrow-textarea>
+          </paper-input-decorator>
+
+          <paper-button on-click={{clickFireEvent}}>Fire Event</paper-button>
+        </div>
+
+        <div class='sidebar'>
+          <b>Available events:</b>
+          <events-list cbEventClicked={{eventSelected}}></event-list>
+        </div>
       </div>
     </div>
-
   </partial-base>
 
 </template>

homeassistant/components/frontend/www_static/polymer/layouts/partial-dev-set-state.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+
 <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-input-decorator.html">
@@ -14,15 +15,16 @@
   <style>
   .form {
     padding: 24px;
+    background-color: white;
   }
   </style>
 
   <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
     <span header-title>Set State</span>
 
-    <div class='form'>
+    <div class='form' fit>
       <div>
-        This dialog will update the representation of the device within Home Assistant.<br />
+        Set the representation of a device within Home Assistant.<br />
         This will not communicate with the actual device.
       </div>
 
@@ -45,7 +47,7 @@
 
         <div class='sidebar'>
           <b>Current entities:</b>
-          <entity-list api={{api}} cbEntityClicked={{entitySelected}}></entity-list>
+          <entity-list cbEntityClicked={{entitySelected}}></entity-list>
         </div>
       </div>
 

homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html

@@ -1,3 +1,5 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
 <link rel="import" href="./partial-base.html">
 
 <link rel="import" href="../components/state-timeline.html">

homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html

@@ -1,14 +1,18 @@
+<link rel="import" href="../bower_components/core-style/core-style.html">
+
 <link rel="import" href="./partial-base.html">
 
 <link rel="import" href="../components/state-cards.html">
 
 <polymer-element name="partial-states" attributes="narrow togglePanel filter">
 <template>
+  <core-style ref="ha-animations"></core-style>
+
   <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
-    <span header-title>States</span>
+    <span header-title>{{headerTitle}}</span>
 
     <span header-buttons>
-      <paper-icon-button icon="refresh"
+      <paper-icon-button icon="refresh" class="{{isFetching && 'ha-spin'}}"
         on-click="{{handleRefreshClick}}"></paper-icon-button>
     </span>
 
@@ -25,25 +29,45 @@
 </template>
 <script>
   Polymer({
+    headerTitle: "States",
     states: [],
+    isFetching: false,
 
     ready: function() {
       this.stateStoreChanged = this.stateStoreChanged.bind(this);
       window.hass.stateStore.addChangeListener(this.stateStoreChanged);
 
+      this.syncStoreChanged = this.syncStoreChanged.bind(this);
+      window.hass.syncStore.addChangeListener(this.syncStoreChanged);
+
       this.refreshStates();
     },
 
     detached: function() {
       window.hass.stateStore.removeChangeListener(this.stateStoreChanged);
+      window.hass.syncStore.removeChangeListener(this.syncStoreChanged);
     },
 
     stateStoreChanged: function() {
       this.refreshStates();
     },
 
+    syncStoreChanged: function() {
+      this.isFetching = window.hass.syncStore.isFetching();
+    },
+
     filterChanged: function() {
       this.refreshStates();
+
+      switch (this.filter) {
+        case "group":
+          this.headerTitle = "Groups";
+          break;
+
+        default:
+          this.headerTitle = "States";
+          break;
+      }
     },
 
     refreshStates: function() {

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html

@@ -14,7 +14,7 @@
     }
   </style>
 
-  <div id='moreInfo' class='{{classNames}}'></div>
+  <div id='moreInfoContainer' class='{{classNames}}'></div>
 </template>
 <script>
 Polymer({
@@ -24,18 +24,30 @@ Polymer({
     'stateObj.attributes': 'stateAttributesChanged',
   },
 
-  stateObjChanged: function() {
+  stateObjChanged: function(oldVal, newVal) {
-    while (this.$.moreInfo.lastChild) {
+    var moreInfoContainer = this.$.moreInfoContainer;
-      this.$.moreInfo.removeChild(this.$.moreInfo.lastChild);
-    }
 
-    if (!this.stateObj.moreInfoType) {
+    if (!newVal) {
+      if (moreInfoContainer.lastChild) {
+        moreInfoContainer.removeChild(moreInfoContainer.lastChild);
+      }
       return;
     }
 
-    var moreInfo = document.createElement("more-info-" + this.stateObj.moreInfoType);
+    if (!oldVal || oldVal.moreInfoType != newVal.moreInfoType) {
-    moreInfo.stateObj = this.stateObj;
+      if (moreInfoContainer.lastChild) {
-    this.$.moreInfo.appendChild(moreInfo);
+        moreInfoContainer.removeChild(moreInfoContainer.lastChild);
+      }
+
+      var moreInfo = document.createElement("more-info-" + newVal.moreInfoType);
+      moreInfo.stateObj = newVal;
+      moreInfoContainer.appendChild(moreInfo);
+
+    } else {
+
+      moreInfoContainer.lastChild.stateObj = newVal;
+
+    }
   },
 
   stateAttributesChanged: function(oldVal, newVal) {

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html

@@ -31,8 +31,8 @@
 Polymer({
 
   stateObjChanged: function() {
-    var rising = window.hass.parseTime(this.stateObj.attributes.next_rising);
+    var rising = window.hass.util.parseTime(this.stateObj.attributes.next_rising);
-    var setting = window.hass.parseTime(this.stateObj.attributes.next_setting);
+    var setting = window.hass.util.parseTime(this.stateObj.attributes.next_setting);
 
     if(rising > setting) {
       this.$.sunData.appendChild(this.$.rising);

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html

@@ -1,91 +1,113 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/core-style/core-style.html">
 
-<polymer-element name="home-assistant-style" noscript>
+<core-style id='ha-animations'>
-  <template>
+  @-webkit-keyframes ha-spin {
-    <core-style id="ha-headers">
+    0% {
-      core-scroll-header-panel, core-header-panel {
+      -webkit-transform: rotate(0deg);
-        background-color: #E5E5E5;
+      transform: rotate(0deg);
-      }
+    }
+    100% {
+      -webkit-transform: rotate(359deg);
+      transform: rotate(359deg);
+    }
+  }
+  @keyframes ha-spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(359deg);
+      transform: rotate(359deg);
+    }
+  }
 
-      core-toolbar {
+  .ha-spin {
-        background: #03a9f4;
+    -webkit-animation: ha-spin 2s infinite linear;
-        color: white;
+    animation: ha-spin 2s infinite linear;
-        font-weight: normal;
+  }
-      }    
+</core-style>
-    </core-style>
+<core-style id="ha-headers">
+  core-scroll-header-panel, core-header-panel {
+    background-color: #E5E5E5;
+  }
 
-    <core-style id="ha-dialog">
+  core-toolbar {
-      :host {
+    background: #03a9f4;
-        font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+    color: white;
+    font-weight: normal;
+  }
+</core-style>
 
-        min-width: 350px;
+<core-style id="ha-dialog">
-        max-width: 700px;
+  :host {
+    font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
 
-        /* First two are from core-transition-bottom */
+    min-width: 350px;
-        transition:
+    max-width: 700px;
-          transform 0.2s ease-in-out,
-          opacity 0.2s ease-in,
-          top .3s,
-          left .3s !important;
-      }
 
-      :host .sidebar {
+    /* First two are from core-transition-bottom */
-        margin-left: 30px;
+    transition:
-      }
+      transform 0.2s ease-in-out,
+      opacity 0.2s ease-in,
+      top .3s,
+      left .3s !important;
+  }
 
-      @media all and (max-width: 620px) {
+  :host .sidebar {
-        :host.two-column {
+    margin-left: 30px;
-          margin: 0;
+  }
-          width: 100%;
-          max-height: calc(100% - 64px);
-          bottom: 0px;
-          left: 0px;
-          right: 0px;
-        }
 
-        :host .sidebar {
+  @media all and (max-width: 620px) {
-          display: none;
+    :host.two-column {
-        }
+      margin: 0;
-      }
+      width: 100%;
+      max-height: calc(100% - 64px);
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+    }
 
-      @media all and (max-width: 464px) {
+    :host .sidebar {
-        :host {
+      display: none;
-          margin: 0;
+    }
-          width: 100%;
+  }
-          max-height: calc(100% - 64px);
-          bottom: 0px;
-          left: 0px;
-          right: 0px;
-        }
-      }
 
-      html /deep/ .ha-form paper-input {
+  @media all and (max-width: 464px) {
-        display: block;
+    :host {
-      }
+      margin: 0;
+      width: 100%;
+      max-height: calc(100% - 64px);
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+    }
+  }
 
-      html /deep/ .ha-form paper-input:first-child {
+  html /deep/ .ha-form paper-input {
-        padding-top: 0;
+    display: block;
-      }
+  }
-    </core-style>
 
-    <core-style id='ha-key-value-table'>
+  html /deep/ .ha-form paper-input:first-child {
-      .data-entry {
+    padding-top: 0;
-        margin-bottom: 8px;
+  }
-      }
+</core-style>
 
-      .data-entry:last-child {
+<core-style id='ha-key-value-table'>
-        margin-bottom: 0;
+  .data-entry {
-      }
+    margin-bottom: 8px;
+  }
 
-      .data-entry .key {
+  .data-entry:last-child {
-        margin-right: 8px;
+    margin-bottom: 0;
-      }
+  }
 
-      .data-entry .value {
+  .data-entry .key {
-        text-align: right;
+    margin-right: 8px;
-        word-break: break-all;
+  }
-      }    
+
-    </core-style>
+  .data-entry .value {
-  </template>
+    text-align: right;
-</polymer-element>
+    word-break: break-all;
+  }
+</core-style>

scripts/build_frontend

@@ -3,6 +3,8 @@ if [ ${PWD##*/} == "scripts" ]; then
     cd ..
 fi
 
+scripts/build_js
+
 # To build the frontend, you need node, bower and vulcanize
 # npm install -g bower vulcanize