Conditionally show widgets on light more info

homeassistant/components/http/frontend.py

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

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

@@ -29,9 +29,29 @@
 Polymer({
   stateObj: {},
 
+  // observe: {
+  //   'stateObj.attributes': 'reposition'
+  // },
+
+  /**
+   * 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
+    // if(this.$.dialog.opened) {
+    //   this.job('resizeAfterLayoutChange', function() {
+    //     this.$.dialog.resizeHandler();
+    //   }.bind(this));
+    // }
+  // },
+
   show: function(stateObj) {
     this.stateObj = stateObj;
-    this.$.dialog.toggle();
+    this.job('showDialogAfterRender', function() {
+      this.$.dialog.toggle();
+    }.bind(this));
   },
 
   editClicked: function(ev) {

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

@@ -13,10 +13,16 @@
     }
   </style>
 
-  <div id='moreInfo'></div>
+  <div id='moreInfo' class='{{classNames}}'></div>
 </template>
 <script>
 Polymer({
+  classNames: '',
+
+  observe: {
+    'stateObj.attributes': 'stateAttributesChanged',
+  },
+
   stateObjChanged: function() {
     while (this.$.moreInfo.lastChild) {
       this.$.moreInfo.removeChild(this.$.moreInfo.lastChild);
@@ -25,8 +31,14 @@ Polymer({
     var moreInfo = document.createElement("more-info-" + this.stateObj.moreInfoType);
     moreInfo.api = this.api;
     moreInfo.stateObj = this.stateObj;
-    this.$.moreInfo.appendChild(moreInfo);    
-  }
+    this.$.moreInfo.appendChild(moreInfo);
+  },
+
+  stateAttributesChanged: function(oldVal, newVal) {
+    this.classNames = Object.keys(newVal).map(
+      function(key) { return "has-" + key; }).join(' ');
+  },
+
 });
 </script>
 </polymer-element>

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

@@ -8,6 +8,10 @@
   <style>
     .brightness {
       margin-bottom: 8px;
+
+      max-height: 0px;
+      overflow: hidden;
+      transition: max-height .5s ease-in;
     }
 
     .brightness paper-slider::shadow #sliderKnobInner,
@@ -19,16 +23,32 @@
       display: block;
       width: 350px;
       margin: 0 auto;
+
+      max-height: 0px;
+      overflow: hidden;
+      transition: max-height .5s ease-in;
     }
+
+    :host-context(.has-brightness) .brightness {
+      max-height: 500px;
+    }
+
+    :host-context(.has-xy_color) color-picker {
+      max-height: 500px;
+    }
+
   </style>
   <div>
-    <div center horizontal layout class='brightness'>
-      <div>Brightness</div>
-      <paper-slider
-        max="255" flex id='brightness'
-        on-core-change="{{brightnessSliderChanged}}">
-      </paper-slider>
+    <div class='brightness'>
+      <div center horizontal layout>
+        <div>Brightness</div>
+        <paper-slider
+          max="255" flex id='brightness'
+          on-core-change="{{brightnessSliderChanged}}">
+        </paper-slider>
+      </div>
     </div>
+
     <color-picker id="colorpicker" width="350" height="200">
     </color-picker>
   </div>
@@ -48,7 +68,7 @@ Polymer({
   brightnessChanged: function(oldVal, newVal) {
     this.ignoreNextBrightnessEvent = true;
 
-    this.$.brightness.value = newVal;
+    this.$.brightness.value = newVal;  
   },
 
   domReady: function() {