ImageViewer can now be closed by clicking into the empty space

This is disabled on mobile devices due to the lack of precision when tapping on a spot, preventing accidental closing. In general this is not really required on mobile devices because the close button is rather big and easily reachable with a minimum of finger movement.

diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
index 7b5150b4c4601f69d28c13e52d948a002fcecf55..fef0f6a7ac6505131b9bf00acbd4fbba23a9f5d7 100644 (file)
--- a/wcfsetup/install/files/js/WCF.ImageViewer.js
+++ b/wcfsetup/install/files/js/WCF.ImageViewer.js
@@ -816,6 +816,16 @@ $.widget('ui.wcfImageViewer', {
                // close button
                $('<span class="wcfImageViewerButtonClose icon icon48 icon-remove pointer jsTooltip" title="' + WCF.Language.get('wcf.global.button.close') + '" />').appendTo(this._ui.header).click($.proxy(this.close, this));
                
+               if (!$.browser.mobile) {
+                       // clicking on the inner container should close the dialog, but it should not be available on mobile due to
+                       // the lack of precision causing accidental closing, the close button is big enough and easily reachable
+                       $imageContainer.click((function(event) {
+                               if (event.target === $imageContainer[0]) {
+                                       this.close();
+                               }
+                       }).bind(this));
+               }
+               
                WCF.DOMNodeInsertedHandler.execute();
                
                enquire.register('screen and (max-width: 800px)', {

diff --git a/wcfsetup/install/files/style/imageViewer.less b/wcfsetup/install/files/style/imageViewer.less
index 1ee20b005e4d8a3e27f265b375abdfb28f2ad5ed..3eabbdac286b83c7f9008518f533a70c64136ffd 100644 (file)
--- a/wcfsetup/install/files/style/imageViewer.less
+++ b/wcfsetup/install/files/style/imageViewer.less
@@ -368,59 +368,68 @@
                        .transition(bottom, .3s);
                }
                
-               > div > ul {
-                       background-color: rgba(0, 0, 0, 1);
-                       border: 1px solid @wcfImageViewerBorderColor;
-                       border-bottom-width: 0;
-                       border-radius: 5px 5px 0 0;
-                       bottom: 0;
-                       display: inline-block;
-                       left: 50%;
-                       margin-left: -122px;
-                       opacity: .4;
-                       position: absolute;
-                       
-                       .transition(opacity, .5s);
+               > div {
+                       cursor: pointer;
                        
-                       &:hover {
-                               opacity: 1;
+                       > img,
+                       > ul {
+                               cursor: default;
                        }
                        
-                       > li {
+                       > ul {
+                               background-color: rgba(0, 0, 0, 1);
+                               border: 1px solid @wcfImageViewerBorderColor;
+                               border-bottom-width: 0;
+                               border-radius: 5px 5px 0 0;
+                               bottom: 0;
                                display: inline-block;
-                               opacity: .6;
+                               left: 50%;
+                               margin-left: -122px;
+                               opacity: .4;
+                               position: absolute;
                                
                                .transition(opacity, .5s);
                                
-                               &.pointer > span.icon {
-                                       cursor: pointer;
-                               }
-                               
-                               &.active,
-                               &.pointer:hover {
+                               &:hover {
                                        opacity: 1;
                                }
                                
-                               &.wcfImageViewerSlideshowButtonToggle > span,
-                               &.wcfImageViewerSlideshowButtonEnlarge > span,
-                               &.wcfImageViewerSlideshowButtonFull > span {
-                                       font-size: 28px;
+                               > li {
+                                       display: inline-block;
+                                       opacity: .6;
+                                       
+                                       .transition(opacity, .5s);
                                        
-                                       &:before {
-                                               left: 2px;
-                                               position: relative;
-                                               top: 9px;
+                                       &.pointer > span.icon {
+                                               cursor: pointer;
+                                       }
+                                       
+                                       &.active,
+                                       &.pointer:hover {
+                                               opacity: 1;
+                                       }
+                                       
+                                       &.wcfImageViewerSlideshowButtonToggle > span,
+                                       &.wcfImageViewerSlideshowButtonEnlarge > span,
+                                       &.wcfImageViewerSlideshowButtonFull > span {
+                                               font-size: 28px;
+                                               
+                                               &:before {
+                                                       left: 2px;
+                                                       position: relative;
+                                                       top: 9px;
+                                               }
+                                       }
+                                       
+                                       &.wcfImageViewerSlideshowButtonEnlarge,
+                                       &.wcfImageViewerSlideshowButtonFull {
+                                               border-left: 1px solid @wcfImageViewerBorderColor;
+                                               box-sizing: border-box;
+                                       }
+                                       
+                                       > span {
+                                               vertical-align: middle;
                                        }
-                               }
-                               
-                               &.wcfImageViewerSlideshowButtonEnlarge,
-                               &.wcfImageViewerSlideshowButtonFull {
-                                       border-left: 1px solid @wcfImageViewerBorderColor;
-                                       box-sizing: border-box;
-                               }
-                               
-                               > span {
-                                       vertical-align: middle;
                                }
                        }
                }