mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-05-25 04:24:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve preview GUI.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -12,6 +12,7 @@
* adds option to hide unreadable files * adds option to hide unreadable files
* adds option where to place folders (top, inplace, bottom) * adds option where to place folders (top, inplace, bottom)
* fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287)) * fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287))
* improves preview GUI
* adds Google UA support * adds Google UA support
* extends selectable icon sizes (adds 128px, 192px, 256px, 384px) * extends selectable icon sizes (adds 128px, 192px, 256px, 384px)
* updates H5BP to 4.3.0 * updates H5BP to 4.3.0

42
src/_h5ai/client/css/inc/preview.less
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 { #pv-prev-area, #pv-next-area {
position: absolute; position: absolute;
top: 50%; top: 50%;
cursor: pointer; cursor: pointer;
img { img {
background-color: rgba(0,0,0,0.5);
border-radius: 8px;
width: 48px; width: 48px;
height: 48px; height: 48px;
margin: -72px 0; margin: -36px 0;
padding: 48px 0; padding: 12px;
opacity: 0.5; opacity: 0.5;
} }
&:hover, &.hover { &:hover, &.hover {
img { img {
background-color: rgba(27,27,27,0.8);
opacity: 1; opacity: 1;
} }
} }
} }
#pv-prev-area { #pv-prev-area {
left: 8px; left: 0;
img {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 48px;
}
} }
#pv-next-area { #pv-next-area {
right: 8px; right: 0;
img {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
padding-right: 48px;
}
} }
#pv-buttons { #pv-buttons {

6
src/_h5ai/client/js/inc/ext/preview.js
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-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
'<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview/prev') + '"/></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-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">' + '<div id="pv-bottombar" class="clearfix hof">' +
'<ul id="pv-buttons">' + '<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-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('mousemove mousedown', userAlive)
.on('click mousedown mousemove keydown keypress', function (event) { .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(); event.stopImmediatePropagation();
}); });