more refactoring and cleanup...

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

ui (gen4)/css/widget/drawer.css

@@ -32,7 +32,6 @@
 
 	overflow: hidden;
 
-
 	box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
 }
 .drawer-widget~.drawer-widget .content {

ui (gen4)/features/keyboard.js

@@ -14,6 +14,7 @@ var toggler = require('lib/toggler')
 var keyboard = require('lib/keyboard')
 
 var core = require('features/core')
+var widgets = require('features/ui-widgets')
 
 var widget = require('lib/widget/widget')
 var browse = require('lib/widget/browse')
@@ -395,19 +396,14 @@ var KeyboardActions = actions.Actions({
 	// 		- insert the action name where not doc present...
 	// XXX cleanup CSS
 	showKeyboardBindings: ['Interface/Show keyboard bindings',
-		function(){
-			var widget = drawer.Drawer($('body'), 
-				keyboard.buildKeybindingsHelpHTML(this.__keyboard_config, this),
-				{
-					focusable: true,
-				})
-				.dom.find('.content')
-					// XXX move to CSS...
-					.css({
-						background: 'white',
-					})
-		}],
-
+		widgets.makeUIDialog('Drawer', 
+			function(){
+				return keyboard.buildKeybindingsHelpHTML(this.__keyboard_config, this)
+			},
+			{
+				background: 'white',
+				focusable: true,
+			})],
 })
 
 var Keyboard = 

ui (gen4)/features/ui-widgets.js

@@ -416,8 +416,6 @@ var DialogsActions = actions.Actions({
 
 
 	// container constructors...
-	//
-	// XXX pass options...
 	Overlay: ['- Interface/',
 		makeUIContainer(function(dialog, options){
 			var that = this
@@ -433,7 +431,11 @@ var DialogsActions = actions.Actions({
 	Drawer: ['- Interface/',
 		makeUIContainer(function(dialog, options){
 			return drawer.Drawer($('body'), dialog, options) })],
-	// XXX
+	
+	// XXX need to:
+	// 		- dock panels
+	// 		- save panel state (position, collapse, dock, ...)
+	// 		- restore panel state
 	Panel: ['- Interface/',
 		makeUIContainer(function(dialog, options){
 			// XXX
@@ -704,19 +706,20 @@ var WidgetTestActions = actions.Actions({
 		makeUIDialog('Drawer', 
 			function(h, txt){
 				return $('<div>')
-						.css({
-							position: 'relative',
-							background: 'white',
-							height: '300px',
-							padding: '20px',
-						})
-						.append($('<h1>')
-							.text(h || 'Drawer test...'))
-						.append($('<p>')
-							.text(txt || 'With some text.'))
+					.css({
+						position: 'relative',
+						background: 'white',
+						height: '300px',
+						padding: '20px',
+					})
+					.append($('<h1>')
+						.text(h || 'Drawer test...'))
+					.append($('<p>')
+						.text(txt || 'With some text.'))
 			},
 			// pass custom configuration to container...
 			{
+				background: 'white',
 				focusable: true,
 			})],
 	testBrowse: ['Test/Demo new style dialog...',

ui (gen4)/lib/widget/drawer.js

@@ -59,6 +59,8 @@ var DrawerPrototype = {
 			'click',
 			'keydown',
 		],
+
+		background: null,
 	},
 
 	keyboard: {
@@ -142,6 +144,10 @@ var DrawerPrototype = {
 					})
 				})
 
+		if(options.background){
+			dom.find('.content').css('background', options.background)
+		}
+
 		// focus the client...
 		if(client.dom && client.focus){
 			client.focus()