diff --git a/ui (gen4)/css/widget/browse.css b/ui (gen4)/css/widget/browse.css index fa34f315..ac12054e 100755 --- a/ui (gen4)/css/widget/browse.css +++ b/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"; } diff --git a/ui (gen4)/lib/widget/browse-walk.js b/ui (gen4)/lib/widget/browse-walk.js index c3fdad3d..cafe7a4d 100755 --- a/ui (gen4)/lib/widget/browse-walk.js +++ b/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 diff --git a/ui (gen4)/lib/widget/browse.html b/ui (gen4)/lib/widget/browse.html index e124abaf..5a7e92a1 100755 --- a/ui (gen4)/lib/widget/browse.html +++ b/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){ diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js index e87d2653..b58d849c 100755 --- a/ui (gen4)/lib/widget/browse.js +++ b/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($('
') + .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($('
') + .addClass('button') + .html(that.options.pushButton ? + 'p' + : that.options.pushButton) + .click(function(evt){ + evt.stopPropagation() + that.push(p) + })) + } + return res }