started work on dialogs...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/index.html

@@ -129,6 +129,7 @@ $(function(){
 				ignoreElements: '.noScroll, '+
 					'.image .inline-image-info, '+
 					'.overlay-info, '+
+					'.overlay, '+
 					'',
 			})
 

ui/layout.css

@@ -877,14 +877,37 @@ body {
 .viewer.overlay .overlay-block {
   display: block;
 }
+.overlay-block .content,
 .overlay-block .background {
-  position: absolute:
+  /* XXX for some magical reason position and top are overwritten 
-	top: 0px;
+		with 'static' and 'auto' values respectively */
+
+  position: absolute !important;
+  top: 0px !important;
   left: 0px;
   height: 100%;
   width: 100%;
-  opacity: 0.7;
   cursor: auto;
+  opacity: 0.9;
+}
+.overlay-block .content,
+.overlay-block .content table {
+  background: transparent;
+}
+.overlay-block .background {
+  opacity: 0.7;
+}
+.overlay-block .dialog {
+  display: inline-block;
+  min-height: 50px;
+  min-width: 300px;
+  color: white;
+  border: solid silver 1px;
+  border-radius: 3px;
+  background: gray;
+  padding: 20px;
+  vertical-align: center;
+  box-shadow: 0px 5px 50px 0px black;
 }
 /************************************************************ Help ***/
 /* XXX make this more generic, and not just for the keyboard... */

ui/layout.less

@@ -872,17 +872,44 @@ body {
 .viewer.overlay .overlay-block {
 	display: block;
 }
-.overlay-block .content {
+.overlay-block .content,
-}
 .overlay-block .background {
-	position: absolute:
+	/* XXX for some magical reason position and top are overwritten 
-	top: 0px;
+		with 'static' and 'auto' values respectively */
+	position: absolute !important;
+	top: 0px !important;
 	left: 0px;
 	height: 100%;
 	width: 100%;
-	opacity: 0.7;
-
 	cursor: auto;
+
+	opacity: 0.9;
+}
+.overlay-block .content,
+.overlay-block .content table {
+	background: transparent;
+}
+.overlay-block .background {
+	opacity: 0.7;
+}
+
+
+.overlay-block .dialog {
+	display: inline-block;
+
+	min-height: 50px;
+	min-width: 300px;
+
+	color: white;
+	border: solid silver 1px;
+	border-radius: 3px;
+	background: gray;
+
+	padding: 20px;
+
+	vertical-align: center;
+
+	box-shadow: 0px 5px 50px 0px black;
 }
 
 

ui/ui.js

@@ -315,6 +315,68 @@ function showContextIndicator(cls, text){
 }
 
 
+function getOverlay(root){
+	root = $(root)
+	var overlay = root.find('.overlay-block')
+	if(overlay.length == 0){
+		return $('<div class="overlay-block">'+
+					'<div class="background"/>'+
+					'<div class="content"/>'+
+				'</div>').appendTo(root)
+	}
+	return overlay
+}
+
+
+function showInOverlay(root, data){
+	root = $(root)
+
+	var overlay = getOverlay(root)
+	
+
+	if(data != null){
+		var container = $('<table width="100%" height="100%"><tr><td align="center" valign="center">'+
+								'<div class="dialog"/>'+
+							'</td></tr></table>')
+		var dialog = container.find('.dialog')
+
+		//overlay.find('.background')
+		//	.click(function(){ hideOverlay(root) })
+
+		dialog
+			.append(data)
+			.click(function(){ event.stopPropagation() })
+		overlay.find('.content')
+			.click(function(){ hideOverlay(root) })
+			.append(container)
+	}
+
+	root.addClass('overlay')
+
+	return overlay
+}
+
+
+function hideOverlay(root){
+	root.removeClass('overlay')
+	root.find('.overlay-block').remove()
+}
+
+
+function alert(){
+	// XXX use CSS!!!
+	return showInOverlay($('.viewer'), $('<span/>')
+		.text(Array.apply(null, arguments).join(' ')))
+}
+
+/*
+function prompt(){
+}
+
+function confirm(){
+}
+*/
+
 
 /*********************************************************************/
 // vim:set ts=4 sw=4 nowrap :