Improve preview GUI.

This commit is contained in:
Lars Jung 2014-06-06 02:26:40 +02:00
parent 7f82e3c80a
commit 9ba30f6dad
3 changed files with 21 additions and 28 deletions

View File

@ -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

View File

@ -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 {

View File

@ -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();
});