Dialogs are now properly resized

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 5bc639681e32a67c1505102660cdaaa800a3f922..259c3e0c858e2297e751a18ee0f5a706ea70e954 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -2948,7 +2948,7 @@ a.wcfDialogCloseButton span {
 .wcfDialogContainer > .wcfDialogContent {
        border-radius: 7px;
        padding: 0;
-       width: auto !important;
+       /*width: auto !important;*/
 }
 
 .ui-dialog-titlebar ~ .ui-dialog-content,

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 25e5b85e063a19fa255e9943d70f8808fb5a3ff4..ebbc4e0456ad13c26335edba67528b8ca8550e6e 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3207,6 +3207,12 @@ $.widget('ui.wcfDialog', {
         */
        _content: null,
 
+       /**
+        * dialog content dimensions
+        * @var object
+        */
+       _contentDimensions: null,
+
        /**
         * modal overlay
         * @var jQuery
@@ -3344,6 +3350,9 @@ $.widget('ui.wcfDialog', {
         * @param       jQuery          jqXHR
         */
        _success: function(data, textStatus, jqXHR) {
+               // initialize dialog content
+               this._initDialog(data);
+
                // remove loading overlay
                this._content.removeClass('overlayLoading');
                
@@ -3352,6 +3361,39 @@ $.widget('ui.wcfDialog', {
                }
        },
 
+       /**
+        * Initializes dialog content if applicable.
+        * 
+        * @param       object          data
+        */
+       _initDialog: function(data) {
+               // insert template
+               data.ignoreTemplate = true;
+               var $template = this._getResponseValue(data, 'template');
+               if ($template !== null) {
+                       this._content.children().html($template);
+                       this.render();
+               }
+       },
+
+       /**
+        * Returns a response value, taking care of different object
+        * structure returned by AJAXProxy.
+        * 
+        * @param       object          data
+        * @param       string          key
+        */
+       _getResponseValue: function(data, key) {
+               if (data.returnValues && data.returnValues[key]) {
+                       return data.returnValues[key];
+               }
+               else if (data[key]) {
+                       return data[key];
+               }
+
+               return null;
+       },
+
        /**
         * Opens this dialog.
         */
@@ -3360,6 +3402,10 @@ $.widget('ui.wcfDialog', {
                        return;
                }
 
+               if (this._overlay !== null) {
+                       this._overlay.show();
+               }
+
                this.render();
                this._isOpen = true;
        },
@@ -3397,12 +3443,19 @@ $.widget('ui.wcfDialog', {
                        // temporarily display container
                        this._container.show();
                }
+               else {
+                       // remove fixed content dimensions for calculation
+                       this._content.css({
+                               height: 'auto',
+                               width: 'auto'
+                       });
+               }
 
                // force content to be visible
                this._content.children().each(function() {
                        $(this).show();
                });
-               
+
                // calculate dimensions
                var $windowDimensions = $(window).getDimensions();
                var $containerDimensions = this._container.getDimensions('outer');
@@ -3438,14 +3491,58 @@ $.widget('ui.wcfDialog', {
                                top: $topOffset + 'px'
                        });
 
+                       // set height to maximum height if exceeded
+                       if ($contentDimensions.height > $maximumHeight) {
+                               $contentDimensions.height = $maximumHeight;
+                       }
+
+                       // save current dimensions
+                       this._contentDimensions = $contentDimensions;
+
+                       // force dimensions
+                       this._content.css({
+                               height: this._contentDimensions.height + 'px',
+                               width: this._contentDimensions.width + 'px'
+                       });
+
                        // fade in container
                        this._container.wcfFadeIn();
                }
                else {
+                       // save reference (used in callback)
+                       var $content = this._content;
+                       console.debug(this._contentDimensions);
+                       // force previous dimensions
+                       $content.css({
+                               height: this._contentDimensions.height + 'px',
+                               width: this._contentDimensions.width + 'px'
+                       });
+
+                       // set height to maximum height if exceeded
+                       if ($contentDimensions.height > $maximumHeight) {
+                               $contentDimensions.height = $maximumHeight;
+                       }
+                       
+                       // apply new dimensions
+                       $content.animate({
+                               height: ($contentDimensions.height - 30) + 'px',
+                               width: ($contentDimensions.width - 40) + 'px'
+                       }, 600, function() {
+                               // remove static dimensions
+                               $content.css({
+                                       height: 'auto',
+                                       width: 'auto'
+                               });
+                       });
+                       
+                       // store new dimensions
+                       this._contentDimensions = $contentDimensions;
+
+                       // move container
                        this._container.animate({
                                left: $leftOffset + 'px',
                                top: $topOffset + 'px'
-                       }, 200);
+                       }, 600);
                }
        }
 });