Better positioning of dialogs

homeassistant/components/http/frontend.py

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

homeassistant/components/http/www_static/polymer/dialogs/event-fire-dialog.html

@@ -55,7 +55,9 @@ Polymer({
     this.setEventType(eventType);
     this.setEventData(eventData);
 
+    this.job('showDialogAfterRender', function() {
       this.$.dialog.toggle();
+    }.bind(this));
   },
 
   setEventType: function(eventType) {

homeassistant/components/http/www_static/polymer/dialogs/ha-action-dialog.html

@@ -13,12 +13,6 @@
     layered: true,
     backdrop: true,
     transition: 'core-transition-bottom',
-
-    domReady: function() {
-      this.addEventListener('core-overlay-open-completed', function() {
-        this.resizeHandler();
-      }.bind(this));
-    },
   });
 </script>
 </polymer-element>

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

@@ -29,23 +29,23 @@
 Polymer({
   stateObj: {},
 
-  // observe: {
+  observe: {
-  //   'stateObj.attributes': 'reposition'
+    '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) {
+  reposition: function(oldVal, newVal) {
     // Only resize if already open
-    // if(this.$.dialog.opened) {
+    if(this.$.dialog.opened) {
-    //   this.job('resizeAfterLayoutChange', function() {
+      this.job('resizeAfterLayoutChange', function() {
-    //     this.$.dialog.resizeHandler();
+        this.$.dialog.resizeHandler();
-    //   }.bind(this));
+      }.bind(this), 1000);
-    // }
+    }
-  // },
+  },
 
   show: function(stateObj) {
     this.stateObj = stateObj;

homeassistant/components/http/www_static/polymer/dialogs/service-call-dialog.html

@@ -55,7 +55,9 @@ Polymer({
     this.setService(domain, service);
     this.$.inputData.value = serviceData;
     // this.$.inputDataWrapper.update();
+    this.job('showDialogAfterRender', function() {
       this.$.dialog.toggle();
+    }.bind(this));
   },
 
   setService: function(domain, service) {

homeassistant/components/http/www_static/polymer/dialogs/state-set-dialog.html

@@ -60,7 +60,9 @@ Polymer({
     this.setState(state);
     this.setStateData(stateData);
 
+    this.job('showDialogAfterRender', function() {
       this.$.dialog.toggle();
+    }.bind(this));
   },
 
   setEntityId: function(entityId) {

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

@@ -26,7 +26,7 @@
 
       max-height: 0px;
       overflow: hidden;
-      transition: max-height .5s ease-in;
+      transition: max-height .5s ease-in .3s;
     }
 
     :host-context(.has-brightness) .brightness {

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

@@ -8,6 +8,14 @@
         font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
 
         min-width: 350px;
+        max-width: 700px;
+
+        /* First two are from core-transition-bottom */
+        transition:
+          transform 0.2s ease-in-out,
+          opacity 0.2s ease-in,
+          top .3s,
+          left .3s !important;
       }
 
       :host .sidebar {