Improved visuals for dialog overlays

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 2fa5f64f233925e3a082c32bfe964c98bed4a5d4..59537da5525cc2b2b08689f2748348f28b07e959 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -7701,10 +7701,11 @@ $.widget('ui.wcfDialog', {
                // remove static dimensions
                this._content.css({
                        height: 'auto',
-                       overflow: 'auto',
                        width: 'auto'
                });
                
+               this._determineOverflow();
+               
                if (!this.isOpen()) {
                        // hide container again
                        this._container.hide();
@@ -7718,6 +7719,24 @@ $.widget('ui.wcfDialog', {
                }
        },
        
+       /**
+        * Determines content overflow based upon static dimensions.
+        */
+       _determineOverflow: function() {
+               var $max = $(window).getDimensions();
+               var $maxHeight = this._content.css('maxHeight');
+               this._content.css('maxHeight', 'none');
+               var $dialog = this._container.getDimensions('outer');
+               
+               var $overflow = 'visible';
+               if (($max.height * 0.8 < $dialog.height) || ($max.width * 0.8 < $dialog.width)) {
+                       $overflow = 'auto';
+               }
+               
+               this._content.css('overflow', $overflow);
+               this._content.css('maxHeight', $maxHeight);
+       },
+       
        /**
         * Returns calculated content dimensions.
         * 

diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index 7e322612b7ef89f69c561e589afef54be734d1a3..ab3413dda73fa45aa0b42a40e6d35d82d84b3305 100644 (file)
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -59,7 +59,6 @@
 .dialogContent {
        background-color: @wcfContainerBackgroundColor;
        color: @wcfColor;
-       overflow: auto;
        padding: 10px 20px 20px;
        
        &:not(.dialogForm) {