From 5fb722d036ba52ad75f473270df15b73998e1902 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 11 Jun 2013 03:10:01 +0400 Subject: [PATCH] more tweaking of dialogs, still a bit messy but appear to be full working + added image info in dialog... Signed-off-by: Alex A. Naanou --- ui/index.html | 3 ++- ui/keybindings.js | 6 ++++- ui/layout.css | 53 +++++++++++++++++++++++++++++++++++++++++++ ui/layout.less | 58 +++++++++++++++++++++++++++++++++++++++++++++++ ui/ui.js | 57 +++++++++++++++++++++++++++++++++++++--------- 5 files changed, 164 insertions(+), 13 deletions(-) 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 = $('
'+ - '
'+ + '
'+message+'
'+ ''+ - ''+ + ''+ '
') - form.find('.text') - .text(message) + var overlay = showInOverlay(root, form) .addClass('prompt dialog') .on('close', function(){ @@ -408,7 +413,6 @@ function prompt(message, dfl){ }) .on('accept', function(){ res.resolve(form.find('input').attr('value')) - hideOverlay(root) }) form.find('button') @@ -421,7 +425,9 @@ function prompt(message, dfl){ input .focus() setTimeout(function(){ - input.attr('value', dfl == null ? '' : dfl) + input + .attr('value', dfl == null ? '' : dfl) + .select() }, 100) return res @@ -434,6 +440,35 @@ function confirm(){ */ +/************************************************ Specific dialogs ***/ -/*********************************************************************/ -// vim:set ts=4 sw=4 nowrap : +function showImageInfo(){ + var gid = getImageGID(getImage()) + var r = getRibbonIndex(getRibbon()) + var data = IMAGES[gid] + var orientation = data.orientation + orientation = orientation == null ? 0 : orientation + var flipped = data.flipped + flipped = flipped == null ? '' : ', flipped '+flipped+'ly' + var order = DATA.order.indexOf(gid) + var name = data.path.split('/').pop() + + alert('
'+ + '

"'+ name +'"

'+ + + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + '
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 +'
'+ + '
') +} + + + +/********************************************************************** +* vim:set ts=4 sw=4 nowrap : */