From 797d5bbc47785a25bac5fe1f60b361b5782e8c3c Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Fri, 23 Aug 2013 00:12:34 +0200
Subject: [PATCH] Updates preview.
---
src/_h5ai/client/css/inc/preview.less | 36 ++++++++++++++---
src/_h5ai/client/js/inc/ext/preview.js | 53 +++++++-------------------
2 files changed, 44 insertions(+), 45 deletions(-)
diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less
index b3c29289..796936bb 100644
--- a/src/_h5ai/client/css/inc/preview.less
+++ b/src/_h5ai/client/css/inc/preview.less
@@ -34,11 +34,21 @@
#pv-close-area {
position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
+ right: 8px;
+ top: 8px;
cursor: pointer;
+ opacity: 0.5;
+
+ img {
+ background-color: rgba(0,0,0,0.5);
+ border-radius: 8px;
+ width: 48px;
+ height: 48px;
+ }
+
+ &:hover {
+ opacity: 1;
+ }
}
#pv-prev-area, #pv-next-area {
@@ -46,14 +56,14 @@
top: 50%;
cursor: pointer;
opacity: 0.5;
- .transition(all 0.2s ease-in-out);
img {
background-color: rgba(0,0,0,0.5);
border-radius: 8px;
width: 48px;
height: 48px;
- margin: -24px 0;
+ margin: -72px 0;
+ padding: 48px 0;
}
&:hover {
@@ -135,4 +145,18 @@
bottom: 0;
background-color: rgb(27,27,27);
border-top: 1px solid rgb(45,45,45);
+
+}
+
+#pv-overlay.fullscreen {
+
+ #pv-bottombar {
+ opacity: 0.5;
+ }
+}
+
+@media only screen and (max-width: 700px) {
+#pv-prev-area, #pv-next-area, #pv-close-area {
+ display: none !important;
+}
}
diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js
index ec864176..e432bcf5 100644
--- a/src/_h5ai/client/js/inc/ext/preview.js
+++ b/src/_h5ai/client/js/inc/ext/preview.js
@@ -6,12 +6,12 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
}, allsettings['preview']),
template = '<div id="pv-overlay" class="noSelection">' +
- '<div id="pv-close-area"/>' +
'<div id="pv-content"/>' +
'<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
- '<div id="pv-prev-area"><img src="' + resource.image('preview/prev') + '"/></div>' +
- '<div id="pv-next-area"><img src="' + resource.image('preview/next') + '"/></div>' +
- '<div id="pv-bottombar" class="clearfix">' +
+ '<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>' +
'<li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '"/></a></li>' +
@@ -91,17 +91,17 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
}
},
- fsTimer = null,
- onMouseMove = function () {
+ userAliveTimeoutId = null,
+ userAlive = function () {
- clearTimeout(fsTimer);
- $('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeIn(200);
+ clearTimeout(userAliveTimeoutId);
+ $('#pv-overlay .hof').stop(true, true).fadeIn(200);
if (isFullscreen) {
- fsTimer = setTimeout(function () {
+ userAliveTimeoutId = setTimeout(function () {
- $('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeOut(400);
+ $('#pv-overlay .hof').stop(true, true).fadeOut(2000);
}, 2000);
}
},
@@ -111,7 +111,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
isFullscreen = !isFullscreen;
store.put(storekey, isFullscreen);
- onMouseMove();
+ userAlive();
adjustSize();
},
@@ -123,11 +123,11 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
event.preventDefault();
event.stopImmediatePropagation();
onExit();
- } else if (key === 8 || key === 37 || key === 40) { // backspace, left, down
+ } else if (key === 8 || key === 37) { // backspace, left
event.preventDefault();
event.stopImmediatePropagation();
onPrevious();
- } else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right
+ } else if (key === 13 || key === 32 || key === 39) { // enter, space, right
event.preventDefault();
event.stopImmediatePropagation();
onNext();
@@ -217,34 +217,9 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
$('#pv-bar-close, #pv-close-area').on('click', onExit);
$('#pv-bar-fullscreen').on('click', onFullscreen);
- $('#pv-prev-area')
- .on('mouseenter', function () {
- $('#pv-bar-prev').addClass('hover');
- })
- .on('mouseleave', function () {
- $('#pv-bar-prev').removeClass('hover');
- });
-
- $('#pv-next-area')
- .on('mouseenter', function () {
- $('#pv-bar-next').addClass('hover');
- })
- .on('mouseleave', function () {
- $('#pv-bar-next').removeClass('hover');
- });
-
- $('#pv-close-area')
- .on('mouseenter', function () {
- $('#pv-bar-close').addClass('hover');
- })
- .on('mouseleave', function () {
- $('#pv-bar-close').removeClass('hover');
- });
-
- var fsTimer = null;
$('#pv-overlay')
.on('keydown', onKeydown)
- .on('mousemove click mousedown', onMouseMove)
+ .on('mousemove mousedown', userAlive)
.on('click mousedown mousemove keydown keypress', function (event) {
event.stopImmediatePropagation();