From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 29 Nov 2014 02:08:38 +0000 (+0100)
Subject: ImageViewer can now be closed by clicking into the empty space
X-Git-Tag: 2.1.0_Beta_1~119
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3aa68c56f1c7272b5647e808606027401083314e;p=GitHub%2FWoltLab%2FWCF.git

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 7b5150b4c4..fef0f6a7ac 100644
--- 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 1ee20b005e..3eabbdac28 100644
--- 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;
 				}
 			}
 		}