added action buttons to browse + minor restyle to accomodate them better...

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

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

@@ -147,12 +147,33 @@
 	display: block;
 }
 */
-.browse-widget .list div {
+/* XXX this is not used because it will mess up numbering and some actions...
+ * 	...need a more thorough avoidance of non-visible elements...
+.browse-widget.disabled-hidden:not(.flat) .list div.disabled,
+.browse-widget.not-traversable-hidden:not(.flat) .list div.not-traversable {
+	display: none;
+}
+*/
+.browse-widget .list .text {
+	display: inline-block;
+	float:left;
+}
+.browse-widget .list .button {
+	display: inline-block;
+	float:right;
+	opacity: 0.7;
+	padding-left: 10px;
+	padding-right: 10px;
+	box-sizing: border-box;
+}
+.browse-widget .list .button:hover {
+	opacity: 0.9;
+	background-color: rgba(0, 0, 0, 0.2);
 }
 .browse-widget .list>div {
 	padding: 5px;
-	padding-left: 10px;
-	padding-right: 10px;
+	padding-left: 15px;
+	padding-right: 15px;
 	cursor: pointer;
 
 	/* XXX need a way to make this automatic and depend on .browser 
@@ -202,13 +223,18 @@
 /* XXX need to show this only on devices with keyboards... */
 .browse-widget .list .text:before {
 	opacity: 0.3;
-	float: right;
+	float: left;
 	font-size: small;
 }
-.browse-widget.filtering .list>div:before {
+.browse-widget.filtering .list>div .text:before {
 	display: none;
 }
 
+.browse-widget .list>div .text:before {
+	width: 12px;
+	margin-left: -15px;
+}
+
 .browse-widget .list>div:nth-of-type(1) .text:before {
 	content: "1";
 }

ui (gen4)/lib/widget/browse-walk.js

@@ -204,6 +204,9 @@ WalkPrototype.options = {
 	traversable: true,
 	flat: false,
 
+	actionButton: 'o',
+	pushButton: false,
+
 	list: listDir,
 }
 WalkPrototype.options.__proto__ = browse.Browser.prototype.options

ui (gen4)/lib/widget/browse.html

@@ -170,6 +170,8 @@ requirejs(['../keyboard', '../../object', './browse'], function(k, o, br){
 	b = browser.Browser($('.container.tree'), {
 			path: '/dir_a/tree/dir_c/',
 
+			actionButton: 'o',
+
 			list: function(path, make){
 				var cur = TREE
 				this.path2list(path).forEach(function(p){

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

@@ -181,6 +181,9 @@ var BrowserPrototype = {
 		showNonTraversable: true,
 		showDisabled: true,
 
+		actionButton: false,
+		pushButton: false,
+
 		// Handle keys that are not bound...
 		// NOTE: to disable, set ot undefined.
 		logKeys: function(k){ window.DEBUG && console.log(k) },
@@ -227,6 +230,8 @@ var BrowserPrototype = {
 					'Esc',
 					'/',
 					'A',
+					'P',
+					'O',
 
 					// let the system handle copy paste...
 					'C', 'V', 'X',
@@ -253,6 +258,8 @@ var BrowserPrototype = {
 					'Esc',
 					'/',
 					'A',
+					'P',
+					'O',
 
 					// let the system handle copy paste...
 					'C', 'V', 'X',
@@ -278,6 +285,7 @@ var BrowserPrototype = {
 			},
 			Backspace: 'Left',
 			Right: 'push',
+			P: 'push',
 
 			// XXX
 			PgUp: 'prevPage!',
@@ -290,6 +298,7 @@ var BrowserPrototype = {
 			// XXX
 
 			Enter: 'action',
+			O: 'action',
 			Esc: 'close',
 
 			'/': 'startFilter!',
@@ -642,10 +651,39 @@ var BrowserPrototype = {
 				.appendTo(l)
 			if(!traversable){
 				res.addClass('not-traversable')
+
 			} 
 			if(disabled){
 				res.addClass('disabled')
 			}
+
+			// buttons...
+			// action (open)...
+			if(traversable && that.options.actionButton){
+				res.append($('<div>')
+					.addClass('button')
+					.html(that.options.actionButton === true ? 
+						'o' 
+						: that.options.actionButton)
+					.click(function(evt){
+						evt.stopPropagation()
+						that.select(p)
+						that.action()
+					}))
+			}
+			// push action...
+			if(traversable && that.options.pushButton){
+				res.append($('<div>')
+					.addClass('button')
+					.html(that.options.pushButton ?
+						'p' 
+						: that.options.pushButton)
+					.click(function(evt){
+						evt.stopPropagation()
+						that.push(p)
+					}))
+			}
+
 			return res
 		}