added tooltip support to formDialog(..)...

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

ui/compatibility.js

@@ -103,28 +103,6 @@ if(window.CEF_dumpJSON != null){
 		})
 	}
 
-	window.toggleFullscreenMode = createCSSClassToggler(
-			document.body, 
-			'.full-screen-mode',
-			function(action){
-				gui.Window.get().toggleFullscreen()
-			})
-
-	window.closeWindow = function(){
-		gui.Window.get().close()
-	}
-	window.showDevTools = function(){
-		gui.Window.get().showDevTools()
-	}
-	window.reload = function(){
-		gui.Window.get().reload()
-	}
-	window.setWindowTitle = function(text){
-		var title = text +' - '+ APP_NAME
-		gui.Window.get().title = title
-		$('.title-bar .title').text(title)
-	}
-
 	// preview generation...
 	//
 	// NOTE: this will add already existing previews to IMAGES[gid]...
@@ -253,6 +231,7 @@ if(window.CEF_dumpJSON != null){
 	// 		...need a way to jumpstart it again...
 	// XXX check if we are leaking the tail...
 	// XXX test progress...
+	// 		...gets collected but the structure is a tad too complex...
 	// NOTE: this will remove the old deferred if it us resolved, thus
 	// 		clearing the "log" of previous operations, unless keep_log
 	// 		is set to true...
@@ -293,6 +272,29 @@ if(window.CEF_dumpJSON != null){
 		return _PREVIW_CREATE_QUEUE
 	}
 
+	// UI-specific...
+	window.toggleFullscreenMode = createCSSClassToggler(
+			document.body, 
+			'.full-screen-mode',
+			function(action){
+				gui.Window.get().toggleFullscreen()
+			})
+
+	window.closeWindow = function(){
+		gui.Window.get().close()
+	}
+	window.showDevTools = function(){
+		gui.Window.get().showDevTools()
+	}
+	window.reload = function(){
+		gui.Window.get().reload()
+	}
+	window.setWindowTitle = function(text){
+		var title = text +' - '+ APP_NAME
+		gui.Window.get().title = title
+		$('.title-bar .title').text(title)
+	}
+
 	// load UI stuff...
 	$(function(){
 		$('<div class="title-bar"/>')

ui/layout.css

@@ -14,12 +14,16 @@
 .expanding-text:hover .hidden {
   display: inline;
 }
-[tooltip-top] {
+/* XXX cleanup and style... 
+ 	- make the arrow exact (like in .tooltip-right)
+	- need to align correctly for really narrow elements...
+*/
+[tooltip] {
   position: relative;
   text-decoration: none;
 }
-[tooltip-top]:after {
+[tooltip]:after {
-  content: attr(tooltip-top);
+  content: attr(tooltip);
   position: absolute;
   bottom: 130%;
   left: 20%;
@@ -27,13 +31,15 @@
   padding: 5px 15px;
   color: black;
   border-radius: 10px;
-  white-space: nowrap;
+  white-space: pre;
+  text-align: left;
+  font-size: 10px;
   opacity: 0;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   transition: all 0.4s ease;
 }
-[tooltip-top]:before {
+[tooltip]:before {
   content: "";
   position: absolute;
   width: 0;
@@ -48,16 +54,41 @@
   left: 30%;
   bottom: 90%;
 }
-[tooltip-top]:hover:after {
+[tooltip]:hover:after {
   bottom: 100%;
 }
-[tooltip-top]:hover:before {
+[tooltip]:hover:before {
   bottom: 70%;
 }
-[tooltip-top]:hover:after,
+[tooltip]:hover:after,
-[tooltip-top]:hover:before {
+[tooltip]:hover:before {
   opacity: 1;
 }
+.tooltip-right[tooltip]:after {
+  bottom: auto;
+  top: -50%;
+  left: 15px;
+}
+.tooltip-right[tooltip]:before {
+  border-left: none;
+  border-right: 5px solid #ffcb66;
+  border-bottom: 5px solid transparent;
+  border-top: 5px solid transparent;
+  bottom: auto;
+  left: 10px;
+  top: 25%;
+}
+.tooltip-right[tooltip]:hover:after {
+  bottom: auto;
+}
+.tooltip-right[tooltip]:hover:before {
+  bottom: auto;
+}
+/* XXX might be good to move this to forms... */
+.tooltip-icon {
+  font-size: small;
+  opacity: 0.9;
+}
 /*********************************************************************/
 body {
   font-family: sans-serif;

ui/layout.less

@@ -72,12 +72,16 @@
 }
 
 
-[tooltip-top] {
+/* XXX cleanup and style... 
+ 	- make the arrow exact (like in .tooltip-right)
+	- need to align correctly for really narrow elements...
+*/
+[tooltip] {
 	position: relative;
 	text-decoration: none;
 }
-[tooltip-top]:after {
+[tooltip]:after {
-	content: attr(tooltip-top);
+	content: attr(tooltip);
 	position: absolute;
 	bottom: 130%;
 	left: 20%;
@@ -85,13 +89,15 @@
 	padding: 5px 15px;
 	color: black;
 	border-radius: 10px;
-	white-space: nowrap;
+	white-space: pre;
+	text-align: left;
+	font-size: 10px;
 	opacity: 0;
 	-webkit-transition: all 0.4s ease;
 	-moz-transition: all 0.4s ease;
 	transition: all 0.4s ease;
 }
-[tooltip-top]:before {
+[tooltip]:before {
 	content: "";
 	position: absolute;
 	width: 0;
@@ -106,17 +112,46 @@
 	left: 30%;
 	bottom: 90%;
 }
-[tooltip-top]:hover:after {
+[tooltip]:hover:after {
 	bottom: 100%;
 }
-[tooltip-top]:hover:before {
+[tooltip]:hover:before {
 	bottom: 70%;
 }
-[tooltip-top]:hover:after, 
+[tooltip]:hover:after, 
-[tooltip-top]:hover:before {
+[tooltip]:hover:before {
 	opacity: 1;
 }
 
+.tooltip-right[tooltip] {
+}
+.tooltip-right[tooltip]:after {
+	bottom: auto;
+	top: -50%;
+	left: 15px;
+}
+.tooltip-right[tooltip]:before {
+	border-left: none;
+	border-right: 5px solid #ffcb66;
+	border-bottom: 5px solid transparent;
+	border-top: 5px solid transparent;
+	bottom: auto;
+	left: 10px;
+	top: 25%;
+}
+.tooltip-right[tooltip]:hover:after {
+	bottom: auto;
+}
+.tooltip-right[tooltip]:hover:before {
+	bottom: auto;
+}
+
+/* XXX might be good to move this to forms... */
+.tooltip-icon {
+	font-size: small;
+	opacity: 0.9;
+}
+
 
 
 /*********************************************************************/

ui/ui.js

@@ -543,6 +543,11 @@ var FIELD_TYPES = {
 //		...
 //	}	
 //
+// <field-description> and split in two with a "|" the section before will
+// show as the field text and the text after as the tooltip.
+// Example:
+// 		"field text | field tooltip..."
+//
 // field's default value determines it's type:
 // 	bool		- checkbox
 // 	string		- textarea
@@ -551,6 +556,8 @@ var FIELD_TYPES = {
 //
 // NOTE: if btn is set to false explicitly then no button will be 
 // 		rendered in the form dialog.
+// NOTE: to include a literal "|" in <field-description> just escape it
+// 		like this: "\|"
 //
 // XXX add form testing...
 // XXX add undefined field handling/reporting...
@@ -575,7 +582,20 @@ function formDialog(root, message, config, btn, cls){
 				var field = FIELD_TYPES[f]
 				var html = $(field.html)
 
-				html.find('.text').text(t)
+				// get the tooltip...
+				if(/[^\\]\|/.test(t)){
+					var tip = t.split(/\s*\|\s*/)
+					text = tip[0]
+					tip = tip[1]
+					$('<span class="tooltip-icon tooltip-right">?</span>')
+						.attr('tooltip', tip)
+						.appendTo(html)
+				// cleanup...
+				} else {
+					text = t.replace(/\\\|/g, '|')
+				}
+				// setup text and data...
+				html.find('.text').text(text)
 				field.set(html, config[t])
 
 				// NOTE: this is here to isolate t and field.get values...
@@ -699,7 +719,7 @@ function exportPreviewsDialog(state, dfl){
 	updateStatus('Export...').show()
 
 	formDialog(null, '<b>Export source:</b> '+ state +'.', {
-		'Image name pattern': '%f',
+		'Image name pattern | %f - full filename \n%n - filename \n%e - extension \n%gid - log gid \n%g - short gid \n%i - order': '%f',
 		'Fav directory name': 'fav',
 		'Destination': {ndir: dfl},
 	}, 'OK', 'exportPreviewsDialog')