From 4576a1d245790f75b14cf76f6f01247155ac3373 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 17 May 2015 22:08:42 -0700
Subject: [PATCH] Polymer .9: show basic state cards

---
 .../polymer/cards/state-card-content.html     |  27 ++-
 .../polymer/cards/state-card-display.html     |  44 +++--
 .../www_static/polymer/cards/state-card.html  |  39 ++--
 .../polymer/components/domain-icon.html       |  39 ++--
 .../components/relative-ha-datetime.html      |  94 ++++++---
 .../polymer/components/state-badge.html       | 180 ++++++++---------
 .../polymer/components/state-cards.html       | 106 ++++++----
 .../polymer/components/state-info.html        |  82 ++++----
 .../polymer/layouts/home-assistant-main.html  |  19 +-
 .../polymer/layouts/partial-base.html         |  53 +++--
 .../polymer/layouts/partial-states.html       | 187 ++++++++++++------
 .../resources/home-assistant-icons.html       |   9 +-
 .../polymer/resources/home-assistant-js.html  |   2 +-
 .../resources/home-assistant-style.html       |  26 ++-
 14 files changed, 574 insertions(+), 333 deletions(-)

diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
index b3b7a3b6363..b24f143f0de 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
@@ -1,24 +1,38 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <link rel="import" href="state-card-display.html">
-<link rel="import" href="state-card-toggle.html">
+<!-- <link rel="import" href="state-card-toggle.html">
 <link rel="import" href="state-card-thermostat.html">
 <link rel="import" href="state-card-configurator.html">
-<link rel="import" href="state-card-scene.html">
+<link rel="import" href="state-card-scene.html"> -->
 
-<polymer-element name="state-card-content" attributes="stateObj">
-<template>
+<dom-module is="state-card-content">
   <style>
     :host {
       display: block;
     }
   </style>
+  <template>
+    <state-card-display state-obj="[[stateObj]]"></state-card-display>
+    <!-- <div id='cardContainer'></div> -->
+  </template>
+</dom-module>
 
-  <div id='cardContainer'></div>
-</template>
 <script>
 Polymer({
+  is: 'state-card-content',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      value: {},
+      observe: 'stateObjChanged',
+    }
+  },
+
   stateObjChanged: function(oldVal, newVal) {
+    console.log('stateObjChanged');
+    return;
     var cardContainer = this.$.cardContainer;
 
     if (!newVal) {
@@ -45,4 +59,3 @@ Polymer({
   },
 });
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-display.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-display.html
index cbafabac21a..047596a87fd 100755
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-display.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-display.html
@@ -2,21 +2,35 @@
 
 <link rel="import" href="../components/state-info.html">
 
-<polymer-element name="state-card-display" attributes="stateObj" noscript>
-  <template>
-    <style>
-    .state {
-      margin-left: 16px;
-      text-transform: capitalize;  
-      font-weight: 300;
-      font-size: 1.3rem;
-      text-align: right;
-    }
-    </style>
+<dom-module is="state-card-display">
+  <style>
+  .state {
+    margin-left: 16px;
+    text-transform: capitalize;  
+    font-weight: 300;
+    font-size: 1.3rem;
+    text-align: right;
+  }
+  </style>
 
-    <div horizontal justified layout> 
-      <state-info stateObj="{{stateObj}}"></state-info>
-      <div class='state'>{{stateObj.stateDisplay}}</div>
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <div class='state'>[[stateObj.stateDisplay]]</div>
     </div>
   </template>
-</polymer-element>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'state-card-display',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+  });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card.html
index 3305f755a33..a445b2c32f2 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card.html
@@ -2,8 +2,7 @@
 
 <link rel="import" href="state-card-content.html">
 
-<polymer-element name="state-card" attributes="stateObj" on-click="cardClicked">
-<template>
+<dom-module is="state-card">
   <style>
     :host {
       border-radius: 2px;
@@ -19,15 +18,31 @@
     }
   </style>
 
-  <state-card-content stateObj={{stateObj}}></state-card-content>
-</template>
-<script>
-var uiActions = window.hass.uiActions;
+  <template>
+    <state-card-content state-obj="[[stateObj]]"></state-card-content>
+  </template>
+</dom-module>
 
-Polymer({
-  cardClicked: function() {
-    uiActions.showMoreInfoDialog(this.stateObj.entityId);
-  },
-});
+<script>
+(function(){
+  var uiActions = window.hass.uiActions;
+
+  Polymer({
+    is: 'state-card',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+
+    listeners: {
+      'click': 'cardClicked',
+    },
+
+    cardClicked: function() {
+      uiActions.showMoreInfoDialog(this.stateObj.entityId);
+    },
+  });
+})();
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/domain-icon.html b/homeassistant/components/frontend/www_static/polymer/components/domain-icon.html
index ba2074ab7ca..9a7b64ad099 100644
--- a/homeassistant/components/frontend/www_static/polymer/components/domain-icon.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/domain-icon.html
@@ -1,24 +1,37 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+
 <link rel="import" href="../resources/home-assistant-icons.html">
 
-<polymer-element name="domain-icon"
-  attributes="domain state" constructor="DomainIcon">
+<dom-module is="domain-icon">
   <template>
-    <core-icon icon="{{icon}}"></core-icon>
+    <iron-icon icon="[[computeIcon(domain, state)]]"></iron-icon>
   </template>
-  <script>
-  Polymer({
-    icon: '',
+</dom-module>
 
-    observe: {
-      'domain': 'updateIcon',
-      'state' : 'updateIcon',
+<script>
+(function() {
+  var uiUtil = window.hass.uiUtil;
+
+  Polymer({
+    is: 'domain-icon',
+
+    properties: {
+      domain: {
+        type: String,
+        value: '',
+      },
+
+      state: {
+        type: String,
+        value: '',
+      },
     },
 
-    updateIcon: function() {
-      this.icon = window.hass.uiUtil.domainIcon(this.domain, this.state);
+    computeIcon: function(domain, state) {
+      return uiUtil.domainIcon(domain, state);
     },
   });
-  </script>
-</polymer-element>
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/relative-ha-datetime.html b/homeassistant/components/frontend/www_static/polymer/components/relative-ha-datetime.html
index b9e1e4db582..cca46f8cb72 100644
--- a/homeassistant/components/frontend/www_static/polymer/components/relative-ha-datetime.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/relative-ha-datetime.html
@@ -2,49 +2,81 @@
 
 <link rel="import" href="../resources/moment-js.html">
 
-<polymer-element name="relative-ha-datetime" attributes="datetime datetimeObj">
+<dom-module is="relative-ha-datetime">
   <template>
-    {{ relativeTime }}
+    <span>[[relativeTime]]</span>
   </template>
-  <script>
-  (function() {
-    var UPDATE_INTERVAL = 60000; // 60 seconds
+</dom-module>
 
-    var parseDateTime = window.hass.util.parseDateTime;
+<script>
+(function() {
+  var UPDATE_INTERVAL = 60000; // 60 seconds
 
-    Polymer({
-      relativeTime: "",
-      parsedDateTime: null,
+  var parseDateTime = window.hass.util.parseDateTime;
 
-      created: function() {
-        this.updateRelative = this.updateRelative.bind(this);
+  Polymer({
+    is: 'relative-ha-datetime',
+
+    properties: {
+      datetime: {
+        type: String,
+        observe: 'datetimeChanged',
       },
 
-      attached: function() {
-        this._interval = setInterval(this.updateRelative, UPDATE_INTERVAL);
+      datetimeObj: {
+        type: Object,
+        observe: 'datetimeObjChanged',
       },
 
-      detached: function() {
-        clearInterval(this._interval);
+      parsedDateTime: {
+        type: Object,
       },
 
-      datetimeChanged: function(oldVal, newVal) {
-        this.parsedDateTime = newVal ? parseDateTime(newVal) : null;
-
-        this.updateRelative();
+      relativeTime: {
+        type: String,
+        value: 'not set',
       },
+    },
 
-      datetimeObjChanged: function(oldVal, newVal) {
-        this.parsedDateTime = newVal;
+    relativeTime: "",
+    parsedDateTime: null,
 
-        this.updateRelative();
-      },
+    created: function() {
+      this.updateRelative = this.updateRelative.bind(this);
+    },
 
-      updateRelative: function() {
-        this.relativeTime = this.parsedDateTime ?
-          moment(this.parsedDateTime).fromNow() : "";
-      },
-    });
-  })();
-  </script>
-</polymer-element>
+    attached: function() {
+      this._interval = setInterval(this.updateRelative, UPDATE_INTERVAL);
+
+      if (this.datetimeObj) {
+        this.parsedDateTime = this.datetimeObj;
+      } else if (this.datetime) {
+        this.parsedDateTime = parseDateTime(this.datetime);
+      }
+
+      this.updateRelative();
+    },
+
+    detached: function() {
+      clearInterval(this._interval);
+    },
+
+    datetimeChanged: function(oldVal, newVal) {
+      this.parsedDateTime = newVal ? parseDateTime(newVal) : null;
+
+      this.updateRelative();
+    },
+
+    datetimeObjChanged: function(oldVal, newVal) {
+      this.parsedDateTime = newVal;
+
+      this.updateRelative();
+    },
+
+    updateRelative: function() {
+      this.relativeTime = this.parsedDateTime ?
+        moment(this.parsedDateTime).fromNow() : "";
+    },
+  });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-badge.html b/homeassistant/components/frontend/www_static/polymer/components/state-badge.html
index ad362e6f048..5e2ed8d8d12 100644
--- a/homeassistant/components/frontend/www_static/polymer/components/state-badge.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-badge.html
@@ -1,105 +1,107 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-image/core-image.html">
+<link rel="import" href="../bower_components/iron-image/iron-image.html">
 
 <link rel="import" href="domain-icon.html">
 
-<polymer-element name="state-badge" attributes="stateObj">
+<dom-module is="state-badge">
+  <style>
+  :host {
+    position: relative;
+    display: inline-block;
+    width: 45px;
+    background-color: #4fc3f7;
+    color: white;
+    border-radius: 50%;
+    transition: all .3s ease-in-out;
+  }
+
+  div {
+    height: 45px;
+    text-align: center;
+  }
+
+  iron-image {
+    border-radius: 50%;
+  }
+
+  domain-icon {
+    margin: 0 auto;
+  }
+
+  /* Color the icon if light or sun is on */
+  domain-icon[data-domain=light][data-state=on],
+  domain-icon[data-domain=switch][data-state=on],
+  domain-icon[data-domain=sun][data-state=above_horizon] {
+    color: #fff176;
+  }
+  </style>
+
   <template>
-    <style>
-    :host {
-      position: relative;
-      display: inline-block;
-      width: 45px;
-      background-color: #4fc3f7;
-      color: white;
-      border-radius: 50%;
-      transition: all .3s ease-in-out;
-    }
-
-    div {
-      height: 45px;
-      text-align: center;
-    }
-
-    core-image {
-      border-radius: 50%;
-    }
-
-    domain-icon {
-      margin: 0 auto;
-    }
-
-    /* Color the icon if light or sun is on */
-    domain-icon[data-domain=light][data-state=on],
-    domain-icon[data-domain=switch][data-state=on],
-    domain-icon[data-domain=sun][data-state=above_horizon] {
-      color: #fff176;
-    }
-    </style>
-
-    <div horizontal layout center>
+    <div class='layout horizontal center'>
       <domain-icon id="icon"
-        domain="{{stateObj.domain}}" data-domain="{{stateObj.domain}}"
-        state="{{stateObj.state}}" data-state="{{stateObj.state}}">
+        domain="[[stateObj.domain]]" data-domain="[[stateObj.domain]]"
+        state="[[stateObj.state]]" data-state="[[stateObj.state]]">
       </domain-icon>
-      <template if="{{stateObj.attributes.entity_picture}}">
-        <core-image
-          sizing="cover" fit
-          src="{{stateObj.attributes.entity_picture}}"></core-image>
+      <template is='dom-if' if="[[stateObj.attributes.entity_picture]]">
+        <iron-image
+          sizing="cover" class='fit'
+          src="[[stateObj.attributes.entity_picture]]"></iron-image>
       </template>
     </div>
-
   </template>
-  <script>
-  Polymer({
-    observe: {
-      'stateObj.state': 'updateIconColor',
-      'stateObj.attributes.brightness': 'updateIconColor',
-      'stateObj.attributes.xy_color[0]': 'updateIconColor',
-      'stateObj.attributes.xy_color[1]': 'updateIconColor'
+</dom-module>
+
+<script>
+Polymer({
+  is: 'state-badge',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observe: 'updateIconColor',
     },
+  },
 
-    /**
-     * Called when an attribute changes that influences the color of the icon.
-     */
-    updateIconColor: function(oldVal, newVal) {
-      var state = this.stateObj;
+  /**
+   * Called when an attribute changes that influences the color of the icon.
+   */
+  updateIconColor: function(oldVal, newVal) {
+    var state = this.stateObj;
 
-      // for domain light, set color of icon to light color if available
-      if(state.domain == "light" && state.state == "on" &&
-         state.attributes.brightness && state.attributes.xy_color) {
+    // for domain light, set color of icon to light color if available
+    if(state.domain == "light" && state.state == "on" &&
+       state.attributes.brightness && state.attributes.xy_color) {
 
-        var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
-                                  state.attributes.xy_color[1],
-                                  state.attributes.brightness);
-        this.$.icon.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
-      } else {
-        this.$.icon.style.color = null;
-      }
-    },
-
-    // from http://stackoverflow.com/questions/22894498/philips-hue-convert-xy-from-api-to-hex-or-rgb
-    xyBriToRgb: function (x, y, bri) {
-      z = 1.0 - x - y;
-      Y = bri / 255.0; // Brightness of lamp
-      X = (Y / y) * x;
-      Z = (Y / y) * z;
-      r = X * 1.612 - Y * 0.203 - Z * 0.302;
-      g = -X * 0.509 + Y * 1.412 + Z * 0.066;
-      b = X * 0.026 - Y * 0.072 + Z * 0.962;
-      r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
-      g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
-      b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
-      maxValue = Math.max(r,g,b);
-      r /= maxValue;
-      g /= maxValue;
-      b /= maxValue;
-      r = r * 255;   if (r < 0) { r = 255 };
-      g = g * 255;   if (g < 0) { g = 255 };
-      b = b * 255;   if (b < 0) { b = 255 };
-      return [r, g, b]
+      var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
+                                state.attributes.xy_color[1],
+                                state.attributes.brightness);
+      this.$.icon.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
+    } else {
+      this.$.icon.style.color = null;
     }
+  },
 
-  });
-  </script>
-</polymer-element>
+  // from http://stackoverflow.com/questions/22894498/philips-hue-convert-xy-from-api-to-hex-or-rgb
+  xyBriToRgb: function (x, y, bri) {
+    z = 1.0 - x - y;
+    Y = bri / 255.0; // Brightness of lamp
+    X = (Y / y) * x;
+    Z = (Y / y) * z;
+    r = X * 1.612 - Y * 0.203 - Z * 0.302;
+    g = -X * 0.509 + Y * 1.412 + Z * 0.066;
+    b = X * 0.026 - Y * 0.072 + Z * 0.962;
+    r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
+    g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
+    b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
+    maxValue = Math.max(r,g,b);
+    r /= maxValue;
+    g /= maxValue;
+    b /= maxValue;
+    r = r * 255;   if (r < 0) { r = 255; }
+    g = g * 255;   if (g < 0) { g = 255; }
+    b = b * 255;   if (b < 0) { b = 255; }
+    return [r, g, b];
+  }
+
+});
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-cards.html b/homeassistant/components/frontend/www_static/polymer/components/state-cards.html
index 913fc117ccb..40fd4a87d03 100755
--- a/homeassistant/components/frontend/www_static/polymer/components/state-cards.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-cards.html
@@ -2,50 +2,50 @@
 
 <link rel="import" href="../cards/state-card.html">
 
-<polymer-element name="state-cards" attributes="states" noscript>
+<dom-module is="state-cards" attributes="states" noscript>
+  <style>
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  @media all and (min-width: 1020px) {
+    .state-card {
+      width: calc(50% - 44px);
+      margin: 8px 0 0 8px;
+    }
+  }
+
+  @media all and (min-width: 1356px) {
+    .state-card {
+      width: calc(33% - 38px);
+    }
+  }
+
+  @media all and (min-width: 1706px) {
+    .state-card {
+      width: calc(25% - 42px);
+    }
+  }
+
+  .no-states-content {
+    max-width: 500px;
+    background-color: #fff;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
+    padding: 16px;
+    margin: 16px auto;
+  }
+  </style>
+
   <template>
-    <style>
-    :host {
-      display: block;
-      width: 100%;
-    }
+    <div class='horizontal layout wrap'>
 
-    @media all and (min-width: 1020px) {
-      .state-card {
-        width: calc(50% - 44px);
-        margin: 8px 0 0 8px;
-      }
-    }
-
-    @media all and (min-width: 1356px) {
-      .state-card {
-        width: calc(33% - 38px);
-      }
-    }
-
-    @media all and (min-width: 1706px) {
-      .state-card {
-        width: calc(25% - 42px);
-      }
-    }
-
-    .no-states-content {
-      max-width: 500px;
-      background-color: #fff;
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-      padding: 16px;
-      margin: 16px auto;
-    }
-    </style>
-
-    <div horizontal layout wrap>
-
-      <template repeat="{{states as state}}">
-        <state-card class="state-card" stateObj={{state}}></state-card>
+      <template is='dom-repeat' items="{{states}}">
+        <state-card class="state-card" state-obj="[[item]]"></state-card>
       </template>
 
-      <template if="{{states.length == 0}}">
+      <template if="{{emptyStates}}">
         <div class='no-states-content'>
           <content></content>
         </div>
@@ -53,4 +53,28 @@
 
     </div>
   </template>
-</polymer-element>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'state-cards',
+
+    properties: {
+      states: {
+        type: Array,
+        value: [],
+      },
+
+      emptyStates: {
+        type: Boolean,
+        computed: 'computeEmptyStates(states)',
+      },
+    },
+
+    computeEmptyStates: function(states) {
+      return states.length == 0;
+    },
+  });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-info.html b/homeassistant/components/frontend/www_static/polymer/components/state-info.html
index f5d7e2301c8..1e442c07e7a 100755
--- a/homeassistant/components/frontend/www_static/polymer/components/state-info.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-info.html
@@ -1,48 +1,64 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-tooltip/core-tooltip.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
+<!-- <link rel="import" href="../bower_components/core-tooltip/core-tooltip.html"> -->
 
 <link rel="import" href="state-badge.html">
 <link rel="import" href="relative-ha-datetime.html">
 
-<polymer-element name="state-info" attributes="stateObj" noscript>
+<dom-module is="state-info">
+  <style>
+  state-badge {
+    float: left;
+  }
+
+  .name {
+    text-transform: capitalize;  
+    font-weight: 300;
+    font-size: 1.3rem;
+  }
+
+  .info {
+    margin-left: 60px;
+  }
+
+  .time-ago {
+    color: darkgrey;
+    margin-top: -2px;
+  }
+  </style>
+
   <template>
-    <style>
-    state-badge {
-      float: left;
-    }
-
-    .name {
-      text-transform: capitalize;  
-      font-weight: 300;
-      font-size: 1.3rem;
-    }
-
-    .info {
-      margin-left: 60px;
-    }
-
-    .time-ago {
-      color: darkgrey;
-      margin-top: -2px;
-    }
-    </style>
-
     <div>
-      <state-badge stateObj="{{stateObj}}"></state-badge>
+      <state-badge state-obj='[[stateObj]]'></state-badge>
 
       <div class='info'>
-        <div class='name'>
-          {{stateObj.entityDisplay}}
-        </div>
+        <div class='name'>[[stateObj.entityDisplay]]</div>
 
-        <div class="time-ago">
-          <core-tooltip label="{{stateObj.lastChangedAsDate | formatDateTime}}" position="bottom">
-            <relative-ha-datetime datetimeObj="{{stateObj.lastChangedAsDate}}"></relative-ha-datetime>
-          </core-tooltip>
+        <div class='time-ago'>
+          <!-- <core-tooltip label="[[computeTooltipLabel(stateObj)]]" position="bottom"> -->
+            <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
+          <!-- </core-tooltip> -->
         </div>
         
       </div>
     </div>
   </template>
-</polymer-element>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'state-info',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+
+    computeTooltipLabel: function(stateObj) {
+      // stateObj.lastChangedAsDate | formatDateTime
+      return 'Label TODO';
+    },
+  });
+})();
+</script>
\ No newline at end of file
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html b/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html
index 3f08aea5de8..a8ccdc4936c 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html
@@ -9,8 +9,8 @@
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 
-<!-- <link rel="import" href="../layouts/partial-states.html">
-<link rel="import" href="../layouts/partial-history.html">
+<link rel="import" href="../layouts/partial-states.html">
+<!-- <link rel="import" href="../layouts/partial-history.html">
 <link rel="import" href="../layouts/partial-logbook.html">
 <link rel="import" href="../layouts/partial-dev-fire-event.html">
 <link rel="import" href="../layouts/partial-dev-call-service.html">
@@ -56,7 +56,7 @@
     <!-- <ha-modals></ha-modals> -->
 
     <paper-drawer-panel id="drawer" on-paper-responsive-change="responsiveChanged">
-      <paper-header-panel mode="scroll" drawer class='sidenav layout fit'>
+      <paper-header-panel mode="scroll" drawer class='sidenav fit'>
         <paper-toolbar>
           Home Assistant
         </paper-toolbar>
@@ -148,12 +148,12 @@
           This is the main partial, never remove it from the DOM but hide it
           to speed up when people click on states.
       -->
-<!--       <partial-states hidden?="{{hideStates}}"
+      <partial-states hidden?="{{hideStates}}"
         main narrow="{{narrow}}"
         togglePanel="{{togglePanel}}"
         filter="{{stateFilter}}">
       </partial-states>
-
+      <!--
       <template is='dom-if' if="{{selected == 'history'}}">
         <partial-history main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-history>
       </template>
@@ -169,10 +169,6 @@
       <template is='dom-if' if="{{selected == 'call-service'}}">
         <partial-dev-call-service main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-call-service>
       </template>--> 
-      <div main>
-        <p>Selected: <span>[[selected]]</span></p>
-        <p>Narrow: <span>[[narrow]]</span></p>
-      </div>
     </paper-drawer-panel>
 
   </template>
@@ -235,11 +231,6 @@
         type: Boolean,
         value: false,
       },
-
-      hasGroupStates: {
-        type: Boolean,
-        computed: '',
-      }
     },
 
     listeners: {
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html
index b105723974c..ed728502ab7 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html
@@ -1,28 +1,51 @@
 <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-header-panel/paper-header-panel.html">
+
+<!-- <link rel="import" href="../bower_components/core-scroll-header-panel/core-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="../bower_components/core-style/core-style.html">
+<!-- <link rel="import" href="../bower_components/core-style/core-style.html"> -->
 
-<polymer-element name="partial-base" attributes="narrow togglePanel" noscript>
+<dom-module is="partial-base">
 <template>
-  <core-style ref="ha-headers"></core-style>
-
-  <core-scroll-header-panel fit fixed="{{!narrow}}">
-    <core-toolbar>
-      <paper-icon-button
-        id="navicon" icon="menu" hidden?="{{!narrow}}"
-        on-click="{{togglePanel}}"></paper-icon-button>
-      <div flex>
+  <paper-header-panel class='fit'>
+    <paper-toolbar>
+      <paper-icon-button icon="menu" hidden$="[[!narrow]]"
+        on-click="togglePanel"></paper-icon-button>
+      <div class='flex'>
         <content select="[header-title]"></content>
       </div>
       <content select="[header-buttons]"></content>
-    </core-toolbar>
+    </paper-toolbar>
 
     <content></content>
 
-  </core-scroll-header-panel>
+  </paper-header-panel>
 </template>
-</polymer>
\ No newline at end of file
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+    is: 'partial-base',
+
+    properties: {
+      narrow: {
+        type: Boolean,
+        value: false,
+      },
+
+      togglePanel: {
+        type: Function,
+        value: function() {},
+      },
+    },
+  });
+
+})();
+
+</script>
\ No newline at end of file
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
index 079044f3fea..5bc632dc981 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
@@ -1,16 +1,13 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-icon/core-icon.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.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>
-
+<dom-module is="partial-states" attributes="narrow togglePanel filter">
   <style>
     .listening {
       position: absolute;
@@ -36,65 +33,132 @@
     }
   </style>
 
-  <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
-    <span header-title>{{headerTitle}}</span>
+  <template>
+    <!-- <core-style ref="ha-animations"></core-style> -->
 
-    <span header-buttons>
-      <paper-icon-button icon="refresh" class="{{isFetching && 'ha-spin'}}"
-        on-click="{{handleRefreshClick}}" hidden?="{{isStreaming}}"></paper-icon-button>
-      <paper-icon-button icon="{{isListening ? 'av:mic-off' : 'av:mic' }}" hidden?={{!canListen}}
-        on-click="{{handleListenClick}}"></paper-icon-button>
-    </span>
+    <partial-base narrow="[[narrow]]" togglePanel="[[togglePanel]]">
+      <span header-title>{{headerTitle}}</span>
 
-    <div class='listening' hidden?="{{!isListening && !isTransmitting}}" on-click={{handleListenClick}}>
-      <core-icon icon="av:hearing"></core-icon> {{finalTranscript}}
-      <span class='interimTranscript'>{{interimTranscript}}</span>
-      <paper-spinner active?="{{isTransmitting}}"></paper-spinner>
-    </div>
+      <span header-buttons>
+        <paper-icon-button icon="refresh" class$="[[computeRefreshButtonClass(isFetching)]]"
+          on-click="handleRefresh" hidden$="[[isStreaming]]"></paper-icon-button>
+        <paper-icon-button icon="[[listenButtonIcon]]" hidden$={{!canListen}}
+          on-click="handleListenClick"></paper-icon-button>
+      </span>
+
+      <div class='listening' hidden$="[[!showListenInterface]]"
+        on-click="handleListenClick">
+        <iron-icon icon="av:hearing"></iron-icon> <span>{{finalTranscript}}</span>
+        <span class='interimTranscript'>[[interimTranscript]]</span>
+        <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
+      </div>
+
+      <state-cards states="[[states]]">
+        <h3>Hi there!</h3>
+        <p>
+          It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
+        </p>
+        <p>
+          Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
+        </p>
+      </state-cards>
+    </partial-base>
+  </template>
+
+</dom-module>
 
-    <state-cards states="{{states}}">
-      <h3>Hi there!</h3>
-      <p>
-        It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
-      </p>
-      <p>
-        Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
-      </p>
-    </state-cards>
-  </partial-base>
-</template>
 <script>
 (function(){
-  var storeListenerMixIn = window.hass.storeListenerMixIn;
   var syncActions = window.hass.syncActions;
   var voiceActions = window.hass.voiceActions;
   var stateStore = window.hass.stateStore;
   var uiConstants = window.hass.uiConstants;
 
-  Polymer(Polymer.mixin({
-    headerTitle: "States",
-    states: [],
-    isFetching: false,
-    isStreaming: false,
+  Polymer({
+    is: 'partial-states',
 
-    canListen: false,
-    voiceSupported: false,
-    hasConversationComponent: false,
-    isListening: false,
-    isTransmittingVoice: false,
-    interimTranscript: '',
-    finalTranscript: '',
+    behaviors: [StoreListenerBehavior],
 
-    ready: function() {
-      this.voiceSupported = voiceActions.isSupported();
-    },
+    properties: {
+      /**
+       * Title to show in the header
+       */
+      headerTitle: {
+        type: String,
+        value: 'States',
+      },
 
-    attached: function() {
-      this.listenToStores(true);
-    },
+      /**
+       * If header is to be shown in narrow mode.
+       */
+      narrow: {
+        type: Boolean,
+        value: false,
+      },
 
-    detached: function() {
-      this.stopListeningToStores();
+      /**
+       * Function to toggle panel visibility.
+       */
+      togglePanel: {
+        type: Function,
+        value: function() {},
+      },
+
+      filter: {
+        type: String,
+        value: null,
+        observer: 'filterChanged',
+      },
+
+      voiceSupported: {
+        type: Boolean,
+        value: voiceActions.isSupported(),
+      },
+
+      isFetching: {
+        type: Boolean,
+        value: false,
+      },
+
+      isStreaming: {
+        type: Boolean,
+        value: false,
+      },
+
+      canListen: {
+        type: Boolean,
+        value: false,
+      },
+
+      isListening: {
+        type: Boolean,
+        value: false,
+      },
+
+      isTransmitting: {
+        type: Boolean,
+        value: false,
+      },
+
+      interimTranscript: {
+        type: String,
+        value: '',
+      },
+
+      finalTranscript: {
+        type: String,
+        value: '',
+      },
+
+      listenButtonIcon: {
+        type: String,
+        computed: 'computeListenButtonIcon(isListening)'
+      },
+
+      showListenInterface: {
+        type: Boolean,
+        computed: 'computeShowListenInterface(isListening,isTransmitting)'
+      }
     },
 
     componentStoreChanged: function(componentStore) {
@@ -145,10 +209,10 @@
       }
       
       this.states = states.toArray().filter(
-              function (el) {return !el.attributes.hidden});
+              function (el) {return !el.attributes.hidden;});
     },
 
-    handleRefreshClick: function() {
+    handleRefresh: function() {
       syncActions.fetchAll();
     },
 
@@ -159,7 +223,20 @@
         voiceActions.listen();
       }
     },
-  }, storeListenerMixIn));
+
+    computeListenButtonIcon: function(isListening) {
+      return isListening ? 'av:mic-off' : 'av:mic';
+    },
+
+    computeShowListenInterface: function(isListening,isTransmitting) {
+      return isListening || isTransmitting;
+    },
+
+    computeRefreshButtonClass: function(isFetching) {
+      if (isFetching) {
+        return 'ha-spin';
+      }
+    },
+  });
 })();
 </script>
-</polymer>
diff --git a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-icons.html b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-icons.html
index 846b1a7ddc9..d130cf9fca5 100644
--- a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-icons.html
+++ b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-icons.html
@@ -1,4 +1,3 @@
-<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 
 <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
@@ -7,18 +6,17 @@
 <link rel="import" href="../bower_components/iron-icons/hardware-icons.html">
 <link rel="import" href="../bower_components/iron-icons/av-icons.html">
 
-<iron-iconset-svg name="homeassistant-100" iconSize="100">
+<iron-iconset-svg name="homeassistant-100" size="100">
 <svg><defs>
-<g id="thermostat">
 <!--
   Thermostat icon created by Scott Lewis from the Noun Project
   Licensed under CC BY 3.0 - http://creativecommons.org/licenses/by/3.0/us/
 -->
-<path d="M66.861,60.105V17.453c0-9.06-7.347-16.405-16.408-16.405c-9.06,0-16.404,7.345-16.404,16.405v42.711 c-4.04,4.14-6.533,9.795-6.533,16.035c0,12.684,10.283,22.967,22.967,22.967c12.682,0,22.964-10.283,22.964-22.967 C73.447,69.933,70.933,64.254,66.861,60.105z M60.331,20.38h-13.21v6.536h6.63v6.539h-6.63v6.713h6.63v6.538h-6.63v6.5h6.63v6.536 h-6.63v7.218c-3.775,1.373-6.471,4.993-6.471,9.24h-6.626c0-5.396,2.598-10.182,6.61-13.185V17.446c0-0.038,0.004-0.075,0.004-0.111 l-0.004-0.007c0-5.437,4.411-9.846,9.849-9.846c5.438,0,9.848,4.409,9.848,9.846V20.38z"/></g>
+<g id="thermostat"><path d="M66.861,60.105V17.453c0-9.06-7.347-16.405-16.408-16.405c-9.06,0-16.404,7.345-16.404,16.405v42.711 c-4.04,4.14-6.533,9.795-6.533,16.035c0,12.684,10.283,22.967,22.967,22.967c12.682,0,22.964-10.283,22.964-22.967 C73.447,69.933,70.933,64.254,66.861,60.105z M60.331,20.38h-13.21v6.536h6.63v6.539h-6.63v6.713h6.63v6.538h-6.63v6.5h6.63v6.536 h-6.63v7.218c-3.775,1.373-6.471,4.993-6.471,9.24h-6.626c0-5.396,2.598-10.182,6.61-13.185V17.446c0-0.038,0.004-0.075,0.004-0.111 l-0.004-0.007c0-5.437,4.411-9.846,9.849-9.846c5.438,0,9.848,4.409,9.848,9.846V20.38z"/></g>
 </defs></svg>
 </iron-iconset-svg>
 
-<iron-iconset-svg name="homeassistant-24" iconSize="24">
+<iron-iconset-svg name="homeassistant-24" size="24">
 <svg><defs>
 <!--
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
@@ -29,7 +27,6 @@
     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <g id="group"><path d="M9 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5-3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-7c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></g>
-
 </defs></svg>
 </iron-iconset-svg>
 
diff --git a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
index 631bf44afad..b44d49f14f5 100644
--- a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
+++ b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
@@ -44,7 +44,7 @@
     window.hass.uiActions = {
       showMoreInfoDialog: function(entityId) {
         dispatcher.dispatch({
-          actionType: this.ACTION_SHOW_DIALOG_MORE_INFO,
+          actionType: window.hass.uiConstants.ACTION_SHOW_DIALOG_MORE_INFO,
           entityId: entityId,
         });
       },
diff --git a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html
index 17f979ac0cd..8234ef113ef 100644
--- a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html
+++ b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html
@@ -1,7 +1,6 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <style is="custom-style">
-
   * {
     --dark-primary-color: #0288D1;
     --default-primary-color: #03A9F4;
@@ -19,6 +18,31 @@
     --paper-toggle-button-checked-bar-color: #039be5;
   }
 
+  @-webkit-keyframes ha-spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      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);
+    }
+  }
+
+  body /deep/ .ha-spin {
+    -webkit-animation: ha-spin 2s infinite linear;
+    animation: ha-spin 2s infinite linear;
+  }
 </style>
 
 <core-style id='ha-main'>