Dialogs should now be redrew properly

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index c09f25cbb233cce2c29bc5d40dff806fdfc6f2f4..d3720ce1f276b2b5e00d7722dcc90c6e65b580f4 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -331,6 +331,9 @@ WCF.ACP.PackageInstallation.prototype = {
                
                // purge content
                this._purgeTemplateContent($.proxy(function() {
+                       // redraw container
+                       this._dialog.wcfDialog('redraw');
+                       
                        // execute next step
                        if ($data.step && $data.node) {
                                this._executeStep($data.step, $data.node);
@@ -345,7 +348,7 @@ WCF.ACP.PackageInstallation.prototype = {
         */
        _purgeTemplateContent: function(callback) {
                if ($('#packageInstallationInnerContent').children().length > 1) {
-                       $('#packageInstallationInnerContentContainer').wcfBlindOut('down', $.proxy(function() {
+                       $('#packageInstallationInnerContentContainer').wcfBlindOut('vertical', $.proxy(function() {
                                $('#packageInstallationInnerContent').empty();
                                this._dialog.wcfDialog('redraw');
                                

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 74e86287a3d96fafa195adb6a5ffd03aa383ab9d..c2a5c6a718c483621f3b0a9cee577d20dcbe09d4 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -259,38 +259,41 @@ $.fn.extend({
        },
        
        /**
-        * Applies a grow-effect by resizing element while moving the
-        * element appropriately
+        * Applies a grow-effect by resizing element while moving the element
+        * appropriately. Make sure the passed data.content element contains
+        * all elements which affect this indirectly, this includes outer
+        * containers which may apply an obstrusive padding.
         * 
         * @param       object          data
         * @param       object          options
         * @return      jQuery
         */
        wcfGrow: function(data, options) {
-               // create temporarily element to determine dimensions
-               var $tempElementID = WCF.getRandomID();
-               $('body').append('<div id="' + $tempElementID + '" class="wcfDimensions">' + data.content + '</div>');
-               var $tempElement = $('#' + $tempElementID);
-               
-               // get content dimensions
-               var $dimensions = $tempElement.getDimensions();
-               
-               // remove temporarily element
-               $tempElement.empty().remove();
+               // calculate dimensions
+               var $windowDimensions = $(window).getDimensions();
+               var $elementDimensions = data.content.getDimensions('outer');
+               var $parentDimensions = data.parent.getDimensions('outer');
+               var $parentInnerDimensions = data.parent.getDimensions('inner');
+               var $parentDifference = {
+                       height: $parentDimensions.height - $parentInnerDimensions.height,
+                       width: $parentDimensions.width - $parentInnerDimensions.width
+               };
+
+               // calculate offsets
+               var $leftOffset = Math.round(($windowDimensions.width - ($elementDimensions.width + $parentDifference.width)) / 2);
+               var $topOffset = Math.round(($windowDimensions.height - ($elementDimensions.height + $parentDifference.height)) / 2);
+
+               // try to align vertically at 30% if previously calculated value is NOT lower
+               var $desiredTopOffset = Math.round(($windowDimensions / 100) * 30);
+               if ($desiredTopOffset < $topOffset) {
+                       $topOffset = $desiredTopOffset;
+               }
                
                // move parent element, used if applying effect on dialogs
                if (!data.parent) {
                        data.parent = this;
                }
                
-               // calculate values for grow-effect
-               var $borderHeight = parseInt(data.parent.css('borderTopWidth')) + parseInt(data.parent.css('borderBottomWidth'));
-               var $borderWidth = parseInt(data.parent.css('borderLeftWidth')) + parseInt(data.parent.css('borderRightWidth'));
-               
-               var $windowDimensions = $(window).getDimensions();
-               var $leftOffset = Math.round(($windowDimensions.width - ($dimensions.width + $borderWidth)) / 2);
-               var $topOffset = Math.round(($windowDimensions.height - ($dimensions.height + $borderHeight)) / 2);
-               
                data.parent.makePositioned('fixed', false);
                data.parent.animate({
                        left: $leftOffset + 'px',
@@ -298,8 +301,8 @@ $.fn.extend({
                }, options);
                
                return this.animate({
-                       height: $dimensions.height,
-                       width: $dimensions.width
+                       height: $elementDimensions.height,
+                       width: $elementDimensions.width
                }, options);
        },
        
@@ -3196,6 +3199,25 @@ $.widget('ui.wcfDialog', $.ui.dialog, {
                $(window).resize($.proxy(function() {
                        this.option('position', 'center');
                }, this));
+       },
+
+       /**
+        * Redraws dialog, should be executed everytime content is changed.
+        */
+       redraw: function() {
+               var $dimensions = this.element.getDimensions();
+               
+               if ($dimensions.height > 200) {
+                       this.element.wcfGrow({
+                               content: this.element,//.html(),
+                               parent: this.element.parent('.ui-dialog')
+                       }, {
+                               duration: 600,
+                               complete: function() {
+                                       $(this).css({ height: 'auto' });
+                               }
+                       });
+               }
        }
 });
 
@@ -3297,11 +3319,25 @@ $.widget('ui.wcfAJAXDialog', $.ui.dialog, {
                        type: $type,
                        data: $data,
                        success: $.proxy(this._createDialog, this),
-                       error: function(transport) {
-                               alert(transport.responseText);
-                       }
+                       error: $.proxy(this._showError, this)
                });
        },
+
+       _showError: function(transport) {
+               var $iframe = $('<div><iframe></iframe></div>').appendTo($('body')).wcfDialog();
+               $iframe = $iframe.children('iframe');
+               $iframe.contents().find('body').append(transport.responseText);
+
+               // force dimensions
+               $iframe.css({ height: '500px', width: '860px' });
+
+               // DO NOT execute redraw until it properly works with iframes. Sadly
+               // cloning the item causes the content to be lost, resulting in zero
+               // dimensions. Fix this!
+
+               // redraw dialog
+               $iframe.parent('div').wcfDialog('redraw');
+       },
        
        /**
         * Inserts content.
@@ -3375,7 +3411,7 @@ $.widget('ui.wcfAJAXDialog', $.ui.dialog, {
                
                if ($dimensions.height > 200) {
                        this.element.wcfGrow({
-                               content: this.element.html(),
+                               content: this.element,//.html(),
                                parent: this.element.parent('.ui-dialog')
                        }, {
                                duration: 600,