Tweaks to the configurator UI

homeassistant/components/configurator.py

@@ -10,9 +10,9 @@ A callback has to be provided to `request_config` which will be called when
 the user has submitted configuration information.
 """
 import logging
-import threading
 
 from homeassistant.helpers import generate_entity_id
+from homeassistant.const import EVENT_TIME_CHANGED
 
 DOMAIN = "configurator"
 DEPENDENCIES = []
@@ -155,14 +155,17 @@ class Configurator(object):
 
         entity_id = self._requests.pop(request_id)[0]
 
+        # If we remove the state right away, it will not be included with
+        # the result fo the service call (current design limitation).
+        # Instead, we will set it to configured to give as feedback but delete
+        # it shortly after so that it is deleted when the client updates.
         self.hass.states.set(entity_id, STATE_CONFIGURED)
 
-        # If we remove the state right away, it will not be included with
-        # the result fo the service call (limitation current design).
-        # Instead we will set it to configured to give as feedback but delete
-        # it shortly after so that it is deleted when the client updates.
-        threading.Timer(
-            .001, lambda: self.hass.states.remove(entity_id)).start()
+        def deferred_remove(event):
+            """ Remove the request state. """
+            self.hass.states.remove(entity_id)
+
+        self.hass.bus.listen_once(EVENT_TIME_CHANGED, deferred_remove)
 
     def handle_service_call(self, call):
         """ Handle a configure service call. """

homeassistant/components/http/frontend.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "f299ce624d1641191f6f6a9b4b4d05bc"
+VERSION = "d44fb74a23d83756ed92d5d55f4d81ea"

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

@@ -0,0 +1,28 @@
+<script src="../bower_components/moment/moment.js"></script>
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<polymer-element name="state-card-configurator" attributes="stateObj api" noscript>
+  <template>
+    <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>
+    </div>
+
+    <!-- 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>
+  </template>
+</polymer-element>

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

@@ -3,6 +3,7 @@
 <link rel="import" href="state-card-display.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">
 
 <polymer-element name="state-card-content" attributes="api stateObj">
 <template>

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

@@ -36,7 +36,6 @@ Polymer({
   /**
    * Whenever the attributes change, the more info component can
    * hide or show elements. We will reposition the dialog.
-   * DISABLED FOR NOW - BAD UX
    */
   reposition: function(oldVal, newVal) {
     // Only resize if already open

homeassistant/components/http/www_static/polymer/home-assistant-api.html

@@ -39,7 +39,7 @@
     <more-info-dialog id="moreInfoDialog" api={{api}}></more-info-dialog>
   </template>
   <script>
-  var domainsWithCard = ['thermostat'];
+  var domainsWithCard = ['thermostat', 'configurator'];
   var domainsWithMoreInfo = ['light', 'group', 'sun', 'configurator'];
 
   State = function(json, api) {

homeassistant/components/http/www_static/polymer/more-infos/more-info-configurator.html

@@ -13,6 +13,10 @@
       max-width: 100%;
     }
 
+    p.center {
+      text-align: center;
+    }
+
     p.error {
       color: #C62828;
     }
@@ -44,7 +48,7 @@
         {{stateObj.attributes.errors}}
       </p>
 
-      <p hidden?="{{!stateObj.attributes.description_image}}">
+      <p class='center' hidden?="{{!stateObj.attributes.description_image}}">
         <img src='{{stateObj.attributes.description_image}}' />
       </p>
 

tests/test_component_configurator.py

@@ -6,10 +6,10 @@ Tests Configurator component.
 """
 # pylint: disable=too-many-public-methods,protected-access
 import unittest
-import time
 
 import homeassistant as ha
 import homeassistant.components.configurator as configurator
+from homeassistant.const import EVENT_TIME_CHANGED
 
 
 class TestConfigurator(unittest.TestCase):
@@ -109,7 +109,9 @@ class TestConfigurator(unittest.TestCase):
 
         self.assertEqual(1, len(self.hass.states.all()))
 
-        time.sleep(.02)
+        self.hass.bus.fire(EVENT_TIME_CHANGED)
+
+        self.hass.pool.block_till_done()
 
         self.assertEqual(0, len(self.hass.states.all()))