From 9ba30f6dad3a54dd85aa4dc0347ddddaa3bcc712 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Fri, 6 Jun 2014 02:26:40 +0200
Subject: [PATCH] Improve preview GUI.

---
 CHANGELOG.md                           |  1 +
 src/_h5ai/client/css/inc/preview.less  | 42 +++++++++-----------------
 src/_h5ai/client/js/inc/ext/preview.js |  6 +++-
 3 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f967864..309ef8f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * adds option to hide unreadable files
 * adds option where to place folders (top, inplace, bottom)
 * fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287))
+* improves preview GUI
 * adds Google UA support
 * extends selectable icon sizes (adds 128px, 192px, 256px, 384px)
 * updates H5BP to 4.3.0
diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less
index 49f03122..2a50b9de 100644
--- a/src/_h5ai/client/css/inc/preview.less
+++ b/src/_h5ai/client/css/inc/preview.less
@@ -32,55 +32,43 @@
 	}
 }
 
-#pv-close-area {
-	position: absolute;
-	right: 8px;
-	top: 8px;
-	cursor: pointer;
-
-	img {
-		background-color: rgba(0,0,0,0.5);
-		border-radius: 8px;
-		width: 48px;
-		height: 48px;
-		opacity: 0.5;
-	}
-
-	&:hover, &.hover {
-		img {
-			opacity: 1;
-		}
-	}
-}
-
 #pv-prev-area, #pv-next-area {
 	position: absolute;
 	top: 50%;
 	cursor: pointer;
 
 	img {
-		background-color: rgba(0,0,0,0.5);
-		border-radius: 8px;
 		width: 48px;
 		height: 48px;
-		margin: -72px 0;
-		padding: 48px 0;
+		margin: -36px 0;
+		padding: 12px;
 		opacity: 0.5;
 	}
 
 	&:hover, &.hover {
 		img {
+			background-color: rgba(27,27,27,0.8);
 			opacity: 1;
 		}
 	}
 }
 
 #pv-prev-area {
-	left: 8px;
+	left: 0;
+	img {
+		border-top-right-radius: 8px;
+		border-bottom-right-radius: 8px;
+		padding-left: 48px;
+	}
 }
 
 #pv-next-area {
-	right: 8px;
+	right: 0;
+	img {
+		border-top-left-radius: 8px;
+		border-bottom-left-radius: 8px;
+		padding-right: 48px;
+	}
 }
 
 #pv-buttons {
diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js
index 6a1feab5..ab5e25ea 100644
--- a/src/_h5ai/client/js/inc/ext/preview.js
+++ b/src/_h5ai/client/js/inc/ext/preview.js
@@ -10,7 +10,6 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
 						'<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
 						'<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview/prev') + '"/></div>' +
 						'<div id="pv-next-area" class="hof"><img src="' + resource.image('preview/next') + '"/></div>' +
-						'<div id="pv-close-area" class="hof"><img src="' + resource.image('preview/close') + '"/></div>' +
 						'<div id="pv-bottombar" class="clearfix hof">' +
 							'<ul id="pv-buttons">' +
 								'<li id="pv-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '"/></li>' +
@@ -231,6 +230,11 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
 				.on('mousemove mousedown', userAlive)
 				.on('click mousedown mousemove keydown keypress', function (event) {
 
+					if (event.type === 'click') {
+						if (event.target.id === 'pv-overlay' || event.target.id === 'pv-content') {
+							exit();
+						}
+					}
 					event.stopImmediatePropagation();
 				});