From a8aa5b14474b5d405ac92edd4864940e5c0d0dc8 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Wed, 27 May 2015 00:44:47 -0700
Subject: [PATCH] Polymer .9: Convert more info contents

---
 .../frontend/www_static/polymer/bower.json    |   4 +-
 .../cards/state-card-configurator.html        |  14 +-
 .../www_static/polymer/home-assistant.html    |  12 +-
 .../more-infos/more-info-configurator.html    | 120 ++++++++------
 .../polymer/more-infos/more-info-content.html |  29 ++--
 .../polymer/more-infos/more-info-default.html |   1 -
 .../polymer/more-infos/more-info-group.html   |  62 +++----
 .../polymer/more-infos/more-info-light.html   | 116 ++++++-------
 .../polymer/more-infos/more-info-script.html  |  42 ++---
 .../polymer/more-infos/more-info-sun.html     |  84 ++++++----
 .../more-infos/more-info-thermostat.html      | 152 +++++++++---------
 .../polymer/resources/home-assistant-js.html  |   7 +-
 .../resources/home-assistant-style.html       |   2 +-
 13 files changed, 350 insertions(+), 295 deletions(-)

diff --git a/homeassistant/components/frontend/www_static/polymer/bower.json b/homeassistant/components/frontend/www_static/polymer/bower.json
index 5a4980c5f70..49944073b84 100644
--- a/homeassistant/components/frontend/www_static/polymer/bower.json
+++ b/homeassistant/components/frontend/www_static/polymer/bower.json
@@ -33,14 +33,14 @@
     "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^0.9",
     "google-apis": "GoogleWebComponents/google-apis#0.8-preview",
     "moment": "^2.10.3",
-    "layout": "Polymer/layout"
+    "layout": "Polymer/layout",
+    "color-picker-element": "~0.0.3"
   },
   "stillUpgrading": {
     "core-tooltip": "Polymer/core-tooltip#~0.9",
     "core-item": "Polymer/core-item#~0.9",
     "core-style": "polymer/core-style#~0.9",
     "paper-dropdown": "PolymerElements/paper-dropdown#~0.9",
-    "color-picker-element": "~0.0.2",
     "google-apis": "GoogleWebComponents/google-apis#~0.4.4",
     "core-scroll-header-panel": "polymer/core-scroll-header-panel#~0.9",
     "paper-menu-button": "PolymerElements/paper-menu-button#~0.9"
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
index 0d50c621869..6a25d41f945 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
@@ -1,15 +1,15 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
 
-<link rel="import" href="./state-card-display.html">
-<link rel="import" href="../components/state-info.html">
+<link rel='import' href='./state-card-display.html'>
+<link rel='import' href='../components/state-info.html'>
 
-<dom-module id="state-card-configurator">
+<dom-module id='state-card-configurator'>
   <template>
-    <state-card-display state-obj="[[stateObj]]"></state-card-display>
+    <state-card-display state-obj='[[stateObj]]'></state-card-display>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
-    <template if="[[stateObj.attributes.description_image]]">
-      <img hidden src="[[stateObj.attributes.description_image]]" />
+    <template is='dom-if' if='[[stateObj.attributes.description_image]]'>
+      <img hidden src='[[stateObj.attributes.description_image]]' />
     </template>
   </template>
 </dom-module>
diff --git a/homeassistant/components/frontend/www_static/polymer/home-assistant.html b/homeassistant/components/frontend/www_static/polymer/home-assistant.html
index cc4b3b4b919..d1b54eb0b8a 100644
--- a/homeassistant/components/frontend/www_static/polymer/home-assistant.html
+++ b/homeassistant/components/frontend/www_static/polymer/home-assistant.html
@@ -1,5 +1,5 @@
 <link rel='import' href='bower_components/polymer/polymer.html'>
-<!-- <link rel='import' href='bower_components/font-roboto/roboto.html'> -->
+<link rel='import' href='bower_components/font-roboto/roboto.html'>
 
 <link rel='import' href='resources/home-assistant-js.html'>
 <link rel='import' href='resources/home-assistant-icons.html'>
@@ -29,7 +29,7 @@
       <home-assistant-main></home-assistant-main>
     </template>
 
-  </template> 
+  </template>
 </dom-module>
 
 <script>
@@ -59,11 +59,11 @@
       // remove the HTML init message
       document.getElementById('init').remove();
 
-      // if auth was given, tell the backend 
+      // if auth was given, tell the backend
       if(this.auth) {
-        uiActions.validateAuth(this.auth, false);    
+        uiActions.validateAuth(this.auth, false);
       } else if (preferenceStore.hasAuthToken) {
-        uiActions.validateAuth(preferenceStore.authToken, false);    
+        uiActions.validateAuth(preferenceStore.authToken, false);
       }
     },
 
@@ -73,4 +73,4 @@
 });
 
 })();
-</script> 
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-configurator.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-configurator.html
index 256ee3d5eb6..ea4c592ecfc 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-configurator.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-configurator.html
@@ -1,9 +1,9 @@
-<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-spinner/paper-spinner.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
+<link rel='import' href='../bower_components/paper-button/paper-button.html'>
 
-<polymer-element name="more-info-configurator" attributes="stateObj">
-<template>
+<link rel='import' href='../components/loading-box.html'>
+
+<dom-module id='more-info-configurator'>
   <style>
     p {
       margin: 8px 0;
@@ -25,62 +25,78 @@
       text-align: center;
       height: 41px;
     }
-
-    p.submit paper-spinner {
-      margin-right: 16px;
-    }
-
-    p.submit span {
-      display: inline-block;
-      vertical-align: top;
-      margin-top: 6px;
-    }
   </style>
+  <template>
+    <div class='layout vertical'>
+      <template is='dom-if' if='[[isConfigurable]]'>
 
-  <div layout vertical>
-    <template if="{{stateObj.state == 'configure'}}">
+        <p hidden$='[[!stateObj.attributes.description]]'>[[stateObj.attributes.description]]</p>
 
-      <p hidden?="{{!stateObj.attributes.description}}">
-        {{stateObj.attributes.description}}
-      </p>
+        <p class='error' hidden$='[[!stateObj.attributes.errors]]'>[[stateObj.attributes.errors]]</p>
 
-      <p class='error' hidden?="{{!stateObj.attributes.errors}}">
-        {{stateObj.attributes.errors}}
-      </p>
+        <p class='center' hidden$='[[!stateObj.attributes.description_image]]'>
+          <img src='[[stateObj.attributes.description_image]]' />
+        </p>
 
-      <p class='center' hidden?="{{!stateObj.attributes.description_image}}">
-        <img src='{{stateObj.attributes.description_image}}' />
-      </p>
+        <p class='submit'>
+          <paper-button raised on-click='submitClicked'
+                        hidden$='[[isConfiguring]]'>[[submitCaption]]</paper-button>
 
-      <p class='submit'>
-        <paper-button raised on-click="{{submitClicked}}"
-                      hidden?="{{action !== 'display'}}">
-          {{stateObj.attributes.submit_caption || "Set configuration"}}
-        </paper-button>
+          <loading-box hidden$='[[!isConfiguring]]'>Configuring</loading-box>
+        </p>
 
-        <span hidden?="{{action !== 'configuring'}}">
-          <paper-spinner active="true"></paper-spinner><span>Configuring…</span>
-        </span>
-      </p>
+      </template>
+    </div>
+  </template>
+</dom-module>
 
-    </template>
-  </div>
-</template>
 <script>
-  var storeListenerMixIn = window.hass.storeListenerMixIn;
+(function() {
   var syncActions = window.hass.syncActions;
   var serviceActions = window.hass.serviceActions;
 
-  Polymer(Polymer.mixin({
-    action: "display",
-    isStreaming: false,
+  Polymer({
+    is: 'more-info-configurator',
 
-    attached: function() {
-      this.listenToStores(true);
+    behaviors: [StoreListenerBehavior],
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+
+      action: {
+        type: String,
+        value: 'display',
+      },
+
+      isStreaming: {
+        type: Boolean,
+        value: false,
+      },
+
+      isConfigurable: {
+        type: Boolean,
+        computed: 'computeIsConfigurable(stateObj)',
+      },
+
+      isConfiguring: {
+        type: Boolean,
+        value: false,
+      },
+
+      submitCaption: {
+        type: String,
+        computed: 'computeSubmitCaption(stateObj)',
+      },
     },
 
-    detached: function() {
-      this.stopListeningToStores();
+    computeIsConfigurable: function(stateObj) {
+      return stateObj.state == 'configure';
+    },
+
+    computeSubmitCaption: function(stateObj) {
+      return stateObj.attributes.submit_caption || 'Set configuration';
     },
 
     streamStoreChanged: function(streamStore) {
@@ -88,15 +104,15 @@
     },
 
     submitClicked: function() {
-      this.action = "configuring";
+      this.isConfiguring = true;
+
       var data = {
         configure_id: this.stateObj.attributes.configure_id
       };
 
       serviceActions.callService('configurator', 'configure', data).then(
-
         function() {
-          this.action = 'display';
+          this.isConfiguring = false;
 
           if (!this.isStreaming) {
             syncActions.fetchAll();
@@ -104,9 +120,9 @@
         }.bind(this),
 
         function() {
-          this.action = 'display';
+          this.isConfiguring = false;
         }.bind(this));
     },
-  }, storeListenerMixIn));
+  });
+})();
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html
index bc89173b309..a62ba9c96ac 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html
@@ -1,14 +1,14 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
 
-<link rel="import" href="more-info-default.html">
-<!-- <link rel="import" href="more-info-light.html">
-<link rel="import" href="more-info-group.html">
-<link rel="import" href="more-info-sun.html">
-<link rel="import" href="more-info-configurator.html">
-<link rel="import" href="more-info-thermostat.html">
-<link rel="import" href="more-info-script.html"> -->
+<link rel='import' href='more-info-default.html'>
+<link rel='import' href='more-info-group.html'>
+<link rel='import' href='more-info-sun.html'>
+<link rel='import' href='more-info-configurator.html'>
+<link rel='import' href='more-info-thermostat.html'>
+<link rel='import' href='more-info-script.html'>
+<link rel='import' href='more-info-light.html'>
 
-<dom-module id="more-info-content">
+<dom-module id='more-info-content'>
   <style>
     :host {
       display: block;
@@ -56,23 +56,22 @@
 
     stateObjChanged: function(newVal, oldVal) {
       var root = Polymer.dom(this);
+      var newMoreInfoType;
 
-      if (!newVal) {
+      if (!newVal || !(newMoreInfoType = uiUtil.stateMoreInfoType(newVal))) {
         if (root.lastChild) {
           root.removeChild(root.lastChild);
         }
         return;
       }
 
-      var newMoreInfoType = uiUtil.stateMoreInfoType(newVal);
-      newMoreInfoType = 'default';
-
       if (!oldVal || uiUtil.stateMoreInfoType(oldVal) != newMoreInfoType) {
+
         if (root.lastChild) {
           root.removeChild(root.lastChild);
         }
 
-        var moreInfo = document.createElement("more-info-" + newMoreInfoType);
+        var moreInfo = document.createElement('more-info-' + newMoreInfoType);
         moreInfo.stateObj = newVal;
         moreInfo.dialogOpen = this.dialogOpen;
         root.appendChild(moreInfo);
@@ -85,7 +84,7 @@
       }
 
       this.classNames = Object.keys(newVal.attributes).map(
-        function(key) { return "has-" + key; }).join(' ');
+        function(key) { return 'has-' + key; }).join(' ');
     },
   });
 })();
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html
index 0d1d8643f36..c835481fc2c 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html
@@ -6,7 +6,6 @@
       max-width: 200px;
     }
   </style>
-  <!-- <core-style ref='ha-key-value-table'></core-style> -->
   <template>
     <div class='layout vertical'>
       <template is='dom-repeat' items="[[getAttributes(stateObj)]]" as="attribute">
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-group.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-group.html
index 6355ea6da8a..004edda04df 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-group.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-group.html
@@ -2,8 +2,7 @@
 
 <link rel="import" href="../cards/state-card-content.html">
 
-<polymer-element name="more-info-group" attributes="stateObj">
-<template>
+<dom-module id="more-info-group">
   <style>
     .child-card {
       margin-bottom: 8px;
@@ -13,37 +12,44 @@
       margin-bottom: 0;
     }
   </style>
-
-  <template repeat="{{states as state}}">
-    <state-card-content stateObj="{{state}}" class='child-card'>
-    </state-card-content>
+  <template>
+    <template is='dom-repeat' items="[[states]]" as='state'>
+      <div class='child-card'>
+        <state-card-content state-obj="[[state]]"></state-card-content>
+      </div>
+    </template>
   </template>
-</template>
+</dom-module>
+
 <script>
-var storeListenerMixIn = window.hass.storeListenerMixIn;
-var stateStore = window.hass.stateStore;
+(function() {
+  var stateStore = window.hass.stateStore;
 
-Polymer(Polymer.mixin({
-  attached: function() {
-    this.listenToStores(true);
-  },
+  Polymer({
+    is: 'more-info-group',
 
-  detached: function() {
-    this.stopListeningToStores();
-  },
+    behaviors: [StoreListenerBehavior],
 
-  stateStoreChanged: function() {
-    this.updateStates();
-  },
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'updateStates',
+      },
 
-  stateObjChanged: function() {
-    this.updateStates();
-  },
+      states: {
+        type: Array,
+        value: [],
+      },
+    },
 
-  updateStates: function() {
-    this.states = this.stateObj && this.stateObj.attributes.entity_id ?
-      stateStore.gets(this.stateObj.attributes.entity_id).toArray() : [];
-  },
-}, storeListenerMixIn));
+    stateStoreChanged: function() {
+      this.updateStates();
+    },
+
+    updateStates: function() {
+      this.states = this.stateObj && this.stateObj.attributes.entity_id ?
+        stateStore.gets(this.stateObj.attributes.entity_id).toArray() : [];
+    },
+  });
+})();
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html
index d0b2de56acc..69f80e1e958 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html
@@ -1,10 +1,9 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-slider/paper-slider.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
+<link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
 
-<link rel="import" href="../bower_components/color-picker-element/dist/color-picker.html">
+<link rel='import' href='../bower_components/color-picker-element/dist/color-picker.html'>
 
-<polymer-element name="more-info-light" attributes="stateObj">
-<template>
+<dom-module id='more-info-light'>
   <style>
     .brightness {
       margin-bottom: 8px;
@@ -29,78 +28,81 @@
       transition: max-height .5s ease-in .3s;
     }
 
-    :host-context(.has-brightness) .brightness {
+    /*:host-context(.has-brightness)*/ .brightness {
       max-height: 500px;
     }
 
-    :host-context(.has-xy_color) color-picker {
+    /*:host-context(.has-xy_color)*/ color-picker {
       max-height: 500px;
     }
-
   </style>
-  <div>
-    <div class='brightness'>
-      <div center horizontal layout>
-        <div>Brightness</div>
-        <paper-slider
-          max="255" flex id='brightness' value='{{brightnessSliderValue}}'
-          on-change="{{brightnessSliderChanged}}">
-        </paper-slider>
+  <template>
+    <div>
+      <div class='brightness'>
+        <div center horizontal layout>
+          <div>Brightness</div>
+          <paper-slider
+            max='255' flex id='brightness' value='{{brightnessSliderValue}}'
+            on-change='brightnessSliderChanged'>
+          </paper-slider>
+        </div>
       </div>
+
+      <color-picker on-colorselected='colorPicked' width='350' height='200'>
+      </color-picker>
     </div>
+  </template>
+</dom-module>
 
-    <color-picker id="colorpicker" width="350" height="200">
-    </color-picker>
-  </div>
-</template>
 <script>
-var serviceActions = window.hass.serviceActions;
+(function() {
+  var serviceActions = window.hass.serviceActions;
 
-Polymer({
-  brightnessSliderValue: 0,
+  Polymer({
+    is: 'more-info-light',
 
-  observe: {
-    'stateObj.attributes.brightness': 'stateObjBrightnessChanged',
-  },
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
+      },
 
-  stateObjChanged: function(oldVal, newVal) {
-    if (newVal && newVal.state === 'on') {
-      this.brightnessSliderValue = newVal.attributes.brightness;
-    }    
-  },
+      brightnessSliderValue: {
+        type: Number,
+        value: 0,
+      }
+    },
 
-  stateObjBrightnessChanged: function(oldVal, newVal) {
-    this.brightnessSliderValue = newVal;
-  },
+    stateObjChanged: function(newVal, oldVal) {
+      if (newVal && newVal.state === 'on') {
+        this.brightnessSliderValue = newVal.attributes.brightness;
+      }
+    },
 
-  domReady: function() {
-    this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this));
-  },
+    brightnessSliderChanged: function(ev) {
+      var bri = parseInt(ev.target.value);
 
-  brightnessSliderChanged: function(ev, details, target) {
-    var bri = parseInt(target.value);
+      if(isNaN(bri)) return;
 
-    if(isNaN(bri)) return;
+      if(bri === 0) {
+        serviceActions.callTurnOff(this.stateObj.entityId);
+      } else {
+        serviceActions.callService('light', 'turn_on', {
+          entity_id: this.stateObj.entityId,
+          brightness: bri
+        });
+      }
+    },
 
-    if(bri === 0) {
-      serviceActions.callTurnOff(this.stateObj.entityId);
-    } else {
-      serviceActions.callService("light", "turn_on", {
+    colorPicked: function(ev) {
+      var color = ev.detail.rgb;
+
+      serviceActions.callService('light', 'turn_on', {
         entity_id: this.stateObj.entityId,
-        brightness: bri
+        rgb_color: [color.r, color.g, color.b]
       });
     }
-  },
 
-  colorPicked: function(ev) {
-    var color = ev.detail.rgb;
-
-    serviceActions.callService("light", "turn_on", {
-      entity_id: this.stateObj.entityId,
-      rgb_color: [color.r, color.g, color.b]
-    });
-  }
-
-});
+  });
+})();
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-script.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-script.html
index d1e75702fbb..bebe8753290 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-script.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-script.html
@@ -1,22 +1,26 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
 
-<polymer-element name="more-info-script" attributes="stateObj" noscript>
-<template>
-  <core-style ref='ha-key-value-table'></core-style>
-  <style>
-    .data-entry .value {
-      max-width: 200px;
-    }
-  </style>
-
-  <div layout vertical>
-    <div layout justified horizontal class='data-entry'>
-      <div class='key'>Last Action</div>
-      <div class='value'>
-        {{stateObj.attributes.last_action}}
+<dom-module id='more-info-script'>
+  <template>
+    <div class='layout vertical'>
+      <div class='data-entry layout justified horizontal'>
+        <div class='key'>Last Action</div>
+        <div class='value'>[[stateObj.attributes.last_action]]</div>
       </div>
     </div>
-  </div>
-</template>
-</polymer-element>
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'more-info-script',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+  });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
index 8a2969db371..bc1f7211469 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
@@ -1,53 +1,71 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="../components/relative-ha-datetime.html">
 
-<polymer-element name="more-info-sun" attributes="stateObj">
-<template>
-  <core-style ref='ha-key-value-table'></core-style>
-
-  <div layout vertical id='sunData'>
-
-    <div layout justified horizontal class='data-entry' id='rising'>
+<dom-module id="more-info-sun">
+  <template>
+    <div class='data-entry layout justified horizontal' id='rising'>
       <div class='key'>
-        Rising <relative-ha-datetime datetimeObj="{{rising}}"></relative-ha-datetime>
-      </div>
-      <div class='value'>
-        {{rising | formatTime}}
+        Rising <relative-ha-datetime datetime-obj="[[risingDate]]"></relative-ha-datetime>
       </div>
+      <div class='value'>[[risingTime]]</div>
     </div>
 
-    <div layout justified horizontal class='data-entry' id='setting'>
+    <div class='data-entry layout justified horizontal' id='setting'>
       <div class='key'>
-        Setting <relative-ha-datetime datetimeObj="{{setting}}"></relative-ha-datetime>
-      </div>
-      <div class='value'>
-        {{setting | formatTime}}
+        Setting <relative-ha-datetime datetime-obj="[[settingDate]]"></relative-ha-datetime>
       </div>
+      <div class='value'>[[settingTime]]</div>
     </div>
+  </template>
+</dom-module>
 
-  </div>
-</template>
 <script>
 (function() {
-var parseDateTime = window.hass.util.parseDateTime;
+  var parseDateTime = window.hass.util.parseDateTime;
+  var formatTime = window.hass.uiUtil.formatTime;
 
-Polymer({
-  rising: null,
-  setting: null,
+  Polymer({
+    is: 'more-info-sun',
 
-  stateObjChanged: function() {
-    this.rising = parseDateTime(this.stateObj.attributes.next_rising);
-    this.setting = parseDateTime(this.stateObj.attributes.next_setting);
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
+      },
 
-    if(self.rising > self.setting) {
-      this.$.sunData.appendChild(this.$.rising);
-    } else {
-      this.$.sunData.appendChild(this.$.setting);
+      risingDate: {
+        type: Object,
+      },
+
+      settingDate: {
+        type: Object,
+      },
+
+      risingTime: {
+        type: String,
+      },
+
+      settingTime: {
+        type: String,
+      },
+    },
+
+    stateObjChanged: function() {
+      this.risingDate = parseDateTime(this.stateObj.attributes.next_rising);
+      this.risingTime = formatTime(this.risingDate);
+
+      this.settingDate = parseDateTime(this.stateObj.attributes.next_setting);
+      this.settingTime = formatTime(this.settingDate);
+
+      var root = Polymer.dom(this);
+
+      if(self.risingDate > self.settingDate) {
+        root.appendChild(this.$.rising);
+      } else {
+        root.appendChild(this.$.setting);
+      }
     }
-  }
-});
+  });
 })();
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html
index 356d49a85c3..e999e264bd2 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html
@@ -1,114 +1,120 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-slider/paper-slider.html">
-<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
+<link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
+<link rel='import' href='../bower_components/paper-toggle-button/paper-toggle-button.html'>
 
-<polymer-element name="more-info-thermostat" attributes="stateObj">
-<template>
+<dom-module id='more-info-thermostat'>
   <style>
     paper-slider {
       width: 100%;
     }
 
-    paper-slider::shadow #sliderKnobInner,
-    paper-slider::shadow #sliderBar::shadow #activeProgress {
-      background-color: #039be5;
-    }
-
     .away-mode-toggle {
       display: none;
       margin-top: 16px;
     }
 
-    :host-context(.has-away_mode) .away-mode-toggle {
+    /*:host-context(.has-away_mode)*/ .away-mode-toggle {
       display: block;
     }
   </style>
-
-  <div>
+  <template>
     <div>
       <div>Target Temperature</div>
       <paper-slider
-        min="{{tempMin}}" max="{{tempMax}}"
-        value='{{targetTemperatureSliderValue}}' pin
-        on-change="{{targetTemperatureSliderChanged}}">
+        min='[[tempMin]]' max='[[tempMax]]'
+        value='[[targetTemperatureSliderValue]]' pin
+        on-change='targetTemperatureSliderChanged'>
       </paper-slider>
     </div>
 
     <div class='away-mode-toggle'>
       <div center horizontal layout>
         <div flex>Away Mode</div>
-        <paper-toggle-button
-          checked="{{awayToggleChecked}}"
-          on-change="{{toggleChanged}}">
+        <paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
         </paper-toggle-button>
       </div>
     </div>
-  </div>
-</template>
+  </template>
+</dom-module>
+
 <script>
-var constants = window.hass.constants;
+(function() {
+  var constants = window.hass.constants;
+  var serviceActions = window.hass.serviceActions;
 
-Polymer({
-  tempMin: 10,
-  tempMax: 40,
-  targetTemperatureSliderValue: 0,
+  Polymer({
+    is: 'more-info-thermostat',
 
-  awayToggleChecked: false,
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
+      },
 
-  observe: {
-    'stateObj.attributes.away_mode': 'awayChanged'
-  },
+      tempMin: {
+        type: Number,
+      },
 
-  stateObjChanged: function(oldVal, newVal) {
-    this.targetTemperatureSliderValue = this.stateObj.state;
+      tempMax: {
+        type: Number,
+      },
 
-    if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
-      this.tempMin = 45;
-      this.tempMax = 95;
-    } else {
-      this.tempMin = 7;
-      this.tempMax = 35;
-    }
-  },
+      targetTemperatureSliderValue: {
+        type: Number,
+      },
 
-  targetTemperatureSliderChanged: function(ev, details, target) {
-    var temp = parseInt(target.value);
+      awayToggleChecked: {
+        type: Boolean,
+      },
+    },
 
-    if(isNaN(temp)) return;
+    stateObjChanged: function(newVal, oldVal) {
+      this.targetTemperatureSliderValue = this.stateObj.state;
+      this.awayToggleChecked = this.stateObj.attributes.away_mode == 'on';
 
-    serviceActions.callService("thermostat", "set_temperature", {
-      entity_id: this.stateObj.entityId,
-      temperature: temp
-    });
-  },
+      if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
+        this.tempMin = 45;
+        this.tempMax = 95;
+      } else {
+        this.tempMin = 7;
+        this.tempMax = 35;
+      }
+    },
 
-  toggleChanged: function(ev) {
-    var newVal = ev.target.checked;
+    targetTemperatureSliderChanged: function(ev) {
+      var temp = parseInt(ev.target.value);
 
-    if(newVal && this.stateObj.attributes.away_mode === 'off') {
-      this.service_set_away(true);
-    } else if(!newVal && this.stateObj.attributes.away_mode === 'on') {
-      this.service_set_away(false);
-    }
-  },
+      if(isNaN(temp)) return;
 
-  awayChanged: function(oldVal, newVal) {
-    this.awayToggleChecked = newVal == 'on';
-  },
+      serviceActions.callService('thermostat', 'set_temperature', {
+        entity_id: this.stateObj.entityId,
+        temperature: temp
+      });
+    },
 
-  service_set_away: function(away_mode) {
-    // We call stateChanged after a successful call to re-sync the toggle
-    // with the state. It will be out of sync if our service call did not
-    // result in the entity to be turned on. Since the state is not changing,
-    // the resync is not called automatic.
-    serviceActions.callService(
-      'thermostat', 'set_away_mode',
-      {entity_id: this.stateObj.entityId, away_mode: away_mode})
+    toggleChanged: function(ev) {
+      var newVal = ev.target.checked;
 
-    .then(function() {
-      this.awayChanged(null, this.stateObj.attributes.away_mode);
-    }.bind(this));
-  },
-});
+      if(newVal && this.stateObj.attributes.away_mode === 'off') {
+        this.service_set_away(true);
+      } else if(!newVal && this.stateObj.attributes.away_mode === 'on') {
+        this.service_set_away(false);
+      }
+    },
+
+    service_set_away: function(away_mode) {
+      // We call stateChanged after a successful call to re-sync the toggle
+      // with the state. It will be out of sync if our service call did not
+      // result in the entity to be turned on. Since the state is not changing,
+      // the resync is not called automatic.
+      serviceActions.callService(
+        'thermostat', 'set_away_mode',
+        {entity_id: this.stateObj.entityId, away_mode: away_mode})
+
+      .then(function() {
+        this.stateObjChanged(this.stateObj);
+      }.bind(this));
+    },
+  });
+})();
 </script>
-</polymer-element>
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 e12d46ecb6d..147c139a307 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
@@ -6,6 +6,9 @@
     var DOMAINS_WITH_MORE_INFO = [
       'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
     ];
+    var DOMAINS_HIDE_MORE_INFO = [
+      'sensor',
+    ];
 
     // Add some frontend specific helpers to the models
     Object.defineProperties(window.hass.stateModel.prototype, {
@@ -70,7 +73,9 @@
       },
 
       stateMoreInfoType: function(state) {
-        if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
+        if(DOMAINS_HIDE_MORE_INFO.indexOf(state.domain) !== -1) {
+          return false;
+        } else if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
           return state.domain;
         } else {
           return 'default';
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 8234ef113ef..c9594629d3d 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,7 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <style is="custom-style">
-  * {
+  :root {
     --dark-primary-color: #0288D1;
     --default-primary-color: #03A9F4;
     --light-primary-color: #B3E5FC;