From a8a6871ebdbfc44bbace68a89c93727db0742b4d Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Mon, 6 Aug 2012 16:47:17 +0200 Subject: [PATCH] Updates preview styles. --- README.md | 2 +- src/_h5ai/css/inc/preview-img.less | 14 ++++++++++++-- src/_h5ai/css/inc/preview-txt.less | 5 +++-- src/_h5ai/js/inc/ext/preview-img.js | 18 ++++++++++-------- src/_h5ai/js/inc/ext/preview-txt.js | 4 ++-- src/_h5ai/js/lib/spin-1.2.5.min.js | 27 ++++++++++++++------------- 6 files changed, 42 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 6db5f849..6c6b5a49 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ Run `makejs -t` to list all possible targets. * adds Google Analytics support (async) * improves filter (now ignorecase, now only checks if chars in right order) * adds keyboard support to image preview (space, enter, backspace, left, right, up, down, f, esc) -* adds text file preview and highlighting with [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (keys: left, right, esc) +* adds text file preview and highlighting with [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (same keys as img preview) * adds Markdown preview with [markdown-js](http://github.com/evilstreak/markdown-js) * adds new type `markdown` * changes language code `gr` to `el` diff --git a/src/_h5ai/css/inc/preview-img.less b/src/_h5ai/css/inc/preview-img.less index ce670329..7e6f9540 100644 --- a/src/_h5ai/css/inc/preview-img.less +++ b/src/_h5ai/css/inc/preview-img.less @@ -8,8 +8,7 @@ bottom: 0; z-index: 100; - // background-color: #111; - background-color: rgba(0,0,0,0.9); + background-color: rgba(0,0,0,0.5); text-align: center; } @@ -22,6 +21,17 @@ #pv-img-image { max-width: 100%; max-height: 100%; + border: 2px solid #fff; + .border-radius(4px); +} + +#pv-img-overlay.fullscreen { + background-color: #111; + + #pv-img-image { + border: 0; + .border-radius(0); + } } #pv-img-close { diff --git a/src/_h5ai/css/inc/preview-txt.less b/src/_h5ai/css/inc/preview-txt.less index f4efdcc6..ddcbcbf3 100644 --- a/src/_h5ai/css/inc/preview-txt.less +++ b/src/_h5ai/css/inc/preview-txt.less @@ -8,7 +8,7 @@ bottom: 0; z-index: 100; - background-color: rgba(0,0,0,0.9); + background-color: rgba(0,0,0,0.5); text-align: center; } @@ -18,7 +18,8 @@ margin: 0 auto; padding: 10px; background-color: #fff; - border: 2px solid rgba(0,0,0,0.5); + border: 2px solid #fff; + .border-radius(4px); text-align: left; overflow: auto; position: relative; diff --git a/src/_h5ai/js/inc/ext/preview-img.js b/src/_h5ai/js/inc/ext/preview-img.js index 98d6c3d2..1ae586e2 100644 --- a/src/_h5ai/js/inc/ext/preview-img.js +++ b/src/_h5ai/js/inc/ext/preview-img.js @@ -76,6 +76,16 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', width: rect.width / 2, height: rect.height }); + + if (isFullscreen) { + $('#pv-img-overlay').addClass('fullscreen'); + $('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen')); + $('#pv-img-bottombar').fadeOut(400); + } else { + $('#pv-img-overlay').removeClass('fullscreen'); + $('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen')); + $('#pv-img-bottombar').fadeIn(200); + } }, preloadImg = function (src, callback) { @@ -174,14 +184,6 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', store.put(storekey, isFullscreen); adjustSize(); - - if (isFullscreen) { - $('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen')); - $('#pv-img-bottombar').fadeOut(400); - } else { - $('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen')); - $('#pv-img-bottombar').fadeIn(200); - } }, onKeydown = function (event) { diff --git a/src/_h5ai/js/inc/ext/preview-txt.js b/src/_h5ai/js/inc/ext/preview-txt.js index 7667213e..8463e073 100644 --- a/src/_h5ai/js/inc/ext/preview-txt.js +++ b/src/_h5ai/js/inc/ext/preview-txt.js @@ -200,9 +200,9 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', if (key === 27) { // esc onExit(); - } else if (key === 37) { // left + } else if (key === 8 || key === 37 || key === 40) { // backspace, left, down onPrevious(); - } else if (key === 39) { // right + } else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right onNext(); } }, diff --git a/src/_h5ai/js/lib/spin-1.2.5.min.js b/src/_h5ai/js/lib/spin-1.2.5.min.js index 16764fba..7c1a54b6 100644 --- a/src/_h5ai/js/lib/spin-1.2.5.min.js +++ b/src/_h5ai/js/lib/spin-1.2.5.min.js @@ -1,18 +1,19 @@ //fgnass.github.com/spin.js#v1.2.5 (function(a,b,c){function g(a,c){var d=b.createElement(a||"div"),e;for(e in c)d[e]=c[e];return d}function h(a){for(var b=1,c=arguments.length;b>1):c.left+e)+"px",top:(c.top=="auto"?i.y-h.y+(a.offsetHeight>>1):c.top+e)+"px"})),d.setAttribute("aria-role","progressbar"),b.lines(d,b.opts);if(!f){var j=0,k=c.fps,m=k/c.speed,o=(1-c.opacity)/(m*c.trail/100),p=m/c.lines;!function q(){j++;for(var a=c.lines;a;a--){var e=Math.max(1-(j+a*p)%m*o,c.opacity);b.opacity(d,c.lines-a,e,c)}b.timeout=b.el&&setTimeout(q,~~(1e3/k))}()}return b},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=c),this},lines:function(a,b){function e(a,d){return l(g(),{position:"absolute",width:b.length+b.width+"px",height:b.width+"px",background:a,boxShadow:d,transformOrigin:"left",transform:"rotate("+~~(360/b.lines*c+b.rotate)+"deg) translate("+b.radius+"px"+",0)",borderRadius:(b.width>>1)+"px"})}var c=0,d;for(;c',b)}var b=l(g("group"),{behavior:"url(#default#VML)"});!k(b,"transform")&&b.adj?(i.addRule(".spin-vml","behavior:url(#default#VML)"),p.prototype.lines=function(b,c){function f(){return l(a("group",{coordsize:e+" "+e,coordorigin:-d+" "+ -d}),{width:e,height:e})}function k(b,e,g){h(i,h(l(f(),{rotation:360/c.lines*b+"deg",left:~~e}),h(l(a("roundrect",{arcsize:1}),{width:d,height:c.width,left:c.radius,top:-c.width>>1,filter:g}),a("fill",{color:c.color,opacity:c.opacity}),a("stroke",{opacity:0}))))}var d=c.length+c.width,e=2*d,g=-(c.width+c.length)*2+"px",i=l(f(),{position:"absolute",top:g,left:g}),j;if(c.shadow)for(j=1;j<=c.lines;j++)k(j,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(j=1;j<=c.lines;j++)k(j);return h(b,i)},p.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d