diff --git a/ui/index.html b/ui/index.html index 8d5270bf..053f2ebb 100755 --- a/ui/index.html +++ b/ui/index.html @@ -222,7 +222,8 @@ $(function(){ */ // we have an image file... - if((DATA_ATTR + '_BASE_URL') in localStorage){ + if((DATA_ATTR + '_BASE_URL') in localStorage + && !/.[\/\\]*/.test(localStorage[DATA_ATTR + '_BASE_URL'])){ BASE_URL = localStorage[DATA_ATTR + '_BASE_URL'] var loading = statusNotify(loadDir(BASE_URL)) diff --git a/ui/keybindings.js b/ui/keybindings.js index 50d997f7..5e2a0158 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -80,6 +80,7 @@ var KEYBOARD_CONFIG = { }), Esc: doc('Close dialog', function(){ + //getOverlay($('.viewer')).trigger('close') hideOverlay($('.viewer')) return false }), @@ -573,7 +574,10 @@ var KEYBOARD_CONFIG = { default: doc('Toggle image info display', function(){ toggleImageInfo() }), shift: doc('Show current image info', - function(){ toggleImageInfoDrawer() }), + function(){ + showImageInfo() + //toggleImageInfoDrawer() + }), alt: doc('Toggle inline image info display', function(){ toggleInlineImageInfo() diff --git a/ui/layout.css b/ui/layout.css index 4a0a625e..75bc9def 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -20,6 +20,14 @@ body { padding: 0px; margin: 0px; } +input, +button { + border: solid silver 1px; + border-radius: 3px; +} +button:hover { + box-shadow: 0px 0px 7px 0px black; +} /************************************************************** UI ***/ .title-bar { display: block; @@ -840,14 +848,31 @@ body { .light.viewer .overlay-block .background { background: white; } +.light.viewer .overlay-block:hover .background:after { + color: black; +} .gray.viewer, .gray.viewer .overlay-block .background { background: #333; } +.gray.viewer .overlay-block .dialog { + background: #555; +} +.light.viewer .overlay-block:hover .background:after { + color: silver; + opacity: 0.4; +} .dark.viewer, .dark.viewer .overlay-block .background { background: #0a0a0a; } +.dark.viewer .overlay-block .dialog { + background: #333; +} +.light.viewer .overlay-block:hover .background:after { + color: gray; + opacity: 0.4; +} .large.viewer:not(.single-image-mode) .current.image { border-width: 3px; } @@ -897,6 +922,17 @@ body { .overlay-block .background { opacity: 0.7; } +.overlay-block:hover .background:after { + display: inline-block; + position: absolute; + content: 'Click background to close.'; + height: auto; + width: auto; + bottom: 20px; + right: 20px; + color: white; + opacity: 0.7; +} .overlay-block .dialog { display: inline-block; min-height: 50px; @@ -909,6 +945,23 @@ body { vertical-align: center; box-shadow: 0px 5px 50px 0px black; } +/* tables in dialogs... */ +.overlay-block .dialog table { + color: white; + font-size: small; + -moz-user-select: auto; + -webkit-user-select: auto; + -o-user-select: auto; + -ms-user-select: auto; + user-select: auto; +} +.overlay-block .dialog table tr td:first-child { + text-align: right; + font-weight: bold; +} +.overlay-block .dialog table tr td:last-child { + color: silver; +} /************************************************************ Help ***/ /* XXX make this more generic, and not just for the keyboard... */ /* this is for sliding stuff */ diff --git a/ui/layout.less b/ui/layout.less index e77e25a0..ad9ea911 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -74,6 +74,15 @@ body { margin: 0px; } +input, +button { + border: solid silver 1px; + border-radius: 3px; +} +button:hover { + box-shadow: 0px 0px 7px 0px black; +} + /************************************************************** UI ***/ @@ -834,16 +843,35 @@ body { .light.viewer .overlay-block .background { background: white; } +.light.viewer .overlay-block .dialog { +} +.light.viewer .overlay-block:hover .background:after { + color: black; +} .gray.viewer, .gray.viewer .overlay-block .background { background: #333; } +.gray.viewer .overlay-block .dialog { + background: #555; +} +.light.viewer .overlay-block:hover .background:after { + color: silver; + opacity: 0.4; +} .dark.viewer, .dark.viewer .overlay-block .background { background: #0a0a0a; } +.dark.viewer .overlay-block .dialog { + background: #333; +} +.light.viewer .overlay-block:hover .background:after { + color: gray; + opacity: 0.4; +} .large.viewer:not(.single-image-mode) .current.image { @@ -893,6 +921,20 @@ body { opacity: 0.7; } +.overlay-block:hover .background:after { + display: inline-block; + position: absolute; + content: 'Click background to close.'; + height: auto; + width: auto; + bottom: 20px; + right: 20px; + + color: white; + + opacity: 0.7; +} + .overlay-block .dialog { display: inline-block; @@ -912,6 +954,22 @@ body { box-shadow: 0px 5px 50px 0px black; } +/* tables in dialogs... */ + +.overlay-block .dialog table { + color: white; + font-size: small; + + .user-select(auto); +} +.overlay-block .dialog table tr td:first-child { + text-align: right; + font-weight: bold; +} +.overlay-block .dialog table tr td:last-child { + color: silver; +} + /************************************************************ Help ***/ diff --git a/ui/ui.js b/ui/ui.js index 1ed231b8..ce335e98 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -350,7 +350,7 @@ function showInOverlay(root, data){ dialog .append(data) - .one('click', function(){ + .on('click', function(){ event.stopPropagation() }) overlay.find('.content') @@ -358,6 +358,9 @@ function showInOverlay(root, data){ overlay.trigger('close') hideOverlay(root) }) + .on('close accept', function(){ + //hideOverlay(root) + }) .append(container) } @@ -378,10 +381,11 @@ function hideOverlay(root){ /************************************************ Standard dialogs ***/ +var _alert = alert function alert(){ var res = $.Deferred() showInOverlay($('.viewer'), $('') - .text(Array.apply(null, arguments).join(' '))) + .html(Array.apply(null, arguments).join(' '))) .addClass('alert dialog') .on('close accept', function(){ res.resolve() @@ -390,17 +394,18 @@ function alert(){ } -function prompt(message, dfl){ +var _prompt = prompt +function prompt(message, dfl, btn){ + btn = btn == null ? 'OK' : btn var root = $('.viewer') var res = $.Deferred() var form = $('
| GID: | '+ gid +' |
| Path: | "'+ data.path +'" |
| Orientation: | '+ orientation +'°'+flipped+' |
| Order: | '+ order +' |
| Position (ribbon): | '+ (DATA.ribbons[r].indexOf(gid)+1) + + '/'+ DATA.ribbons[r].length +' |
| Position (global): | '+ (order+1) +'/'+ DATA.order.length +' |