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 <alex.nanou@gmail.com>

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

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()

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 */

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 ***/

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'), $('<span/>')
-			.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 = $('<div>'+
-				'<div class="text"/>'+
+				'<div class="text">'+message+'</div>'+
 				'<input type="text" tabindex=1/>'+
-				'<button tabindex=2>Done</button>'+
+				'<button tabindex=2>'+btn+'</button>'+
 			'</div>')
-	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 ***/
 
-/*********************************************************************/
+function showImageInfo(){
-// vim:set ts=4 sw=4 nowrap :
+	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('<div>'+
+			'<h2>"'+ name +'"</h2>'+
+
+			'<table>'+
+				'<tr><td>GID: </td><td>'+ gid +'</td></tr>'+
+				'<tr><td>Path: </td><td>"'+ data.path +'"</td></tr>'+
+				'<tr><td>Orientation: </td><td>'+ orientation +'&deg;'+flipped+'</td></tr>'+
+				'<tr><td>Order: </td><td>'+ order +'</td></tr>'+
+				'<tr><td>Position (ribbon): </td><td>'+ (DATA.ribbons[r].indexOf(gid)+1) +
+					'/'+ DATA.ribbons[r].length +'</td></tr>'+
+				'<tr><td>Position (global): </td><td>'+ (order+1) +'/'+ DATA.order.length +'</td></tr>'+
+			'</table>'+
+		'</div>')
+}
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 nowrap :										 */