From 1eee52408671b4c92ff84547c0a69b107f1cf983 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 19 Jun 2015 19:13:11 +0300 Subject: [PATCH] some visual tweeks + updated docs... Signed-off-by: Alex A. Naanou --- ui (gen4)/experiments/browse-dialog.html | 31 +++++++++++++-- ui (gen4)/experiments/browse-dialog.js | 48 ++++++++++++++---------- 2 files changed, 56 insertions(+), 23 deletions(-) diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html index 7c5c5fe8..a6ecfa52 100755 --- a/ui (gen4)/experiments/browse-dialog.html +++ b/ui (gen4)/experiments/browse-dialog.html @@ -55,6 +55,8 @@ display: none; } + + .browse .title { font-weight: bold; color: rgba(255,255,255,0.9); @@ -63,6 +65,8 @@ padding-right: 10px; } + + .browse .path { padding: 5px; padding-left: 10px; @@ -77,12 +81,17 @@ } .browse .path .dir { display: inline-block; + cursor: pointer; } .browse .path .dir:after { content: "/"; } +.browse .path .dir:hover ~ .dir { + opacity: 0.2; +} .browse .path .dir.cur { opacity: 0.5; + cursor: text; } .browse .path .dir.cur:after { content: ""; @@ -105,11 +114,22 @@ border: dashed white 1px; cursor: text; } + + + /* XXX need to make this resizable up but only to a certain size (~80vh) */ -/* .browse .list { + /* XXX need a way to make this automatic and depend on .browser + setup to avoid multiple scrollbars and the need to manually + dive into the configuration to change the container size + limits + */ max-height: 50vh; + + overflow-y: auto; + overflow-x: hidden; } +/* .browse .list:empty { display: block; } @@ -118,6 +138,7 @@ padding: 5px; padding-left: 10px; padding-right: 10px; + cursor: pointer; } .browse:focus .list div.selected, @@ -151,6 +172,7 @@ ::-webkit-scrollbar { width: 10px; + height: 10px; } ::-webkit-scrollbar-button { display: none; @@ -158,10 +180,13 @@ ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { - background: gray; + background: transparent; +} +::-webkit-scrollbar-track-piece { + background: rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.05); + background: rgba(0, 0, 0, 0.15); } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); diff --git a/ui (gen4)/experiments/browse-dialog.js b/ui (gen4)/experiments/browse-dialog.js index 3fdb52be..003adc17 100755 --- a/ui (gen4)/experiments/browse-dialog.js +++ b/ui (gen4)/experiments/browse-dialog.js @@ -44,7 +44,7 @@ var BrowserClassPrototype = { }, } -// XXX need to scroll only the list, keeping the path allways in view... +// XXX need to scroll only the list, keeping the path always in view... // XXX need to handle long paths -- smart shortening or auto scroll... // XXX Q: should we make a base list dialog and build this on that or // simplify this to implement a list (removing the path and disbling @@ -76,7 +76,7 @@ var BrowserPrototype = { Filter: { pattern: '.browse .path div.cur[contenteditable]', - // keep text edeting action from affecting the seelction... + // keep text editing action from affecting the seelction... ignore: [ 'Backspace', 'Left', @@ -203,27 +203,37 @@ var BrowserPrototype = { // Filter the item list... // + // General signature... + // .filter([, ][, ]) + // -> elements + // + // + // Get all elements... // .filter() // .filter('*') // -> all elements // + // Get all elements containing a string... // .filter() // -> elements // + // Get all elements matching a regexp... // .filter() // -> elements // + // Filter the elements via a function... // .filter() // -> elements // // - // .filter([, ][, ]) - // - // XXX write out the following signatures... - // .filter() - // .filter(, ) - // .filter(, ) - // .filter(, , ) + // If function is passed it will get called with + // every element that was rejected by the predicate / not matching + // the pattern. + // + // By default, is false, thus this will ignore + // disabled elements. If is false then disabled + // elements will be searched too. + // // // XXX pattern modes: // - lazy match @@ -232,14 +242,13 @@ var BrowserPrototype = { // - glob // XXX need to support glob / nested patterns... // ..things like /**/a*/*moo/ - // XXX make this more compatible with the canonical filter.... - // - set this for predicate function... - // - unwrap the element (???) - filter: function(pattern, rejected, ignore_disabled){ + // XXX should we unwrap the elements to be more compatible with + // jQuery .filter(..)? + filter: function(pattern, a, b){ pattern = pattern || '*' - ignore_disabled = typeof(rejected) == typeof(true) ? rejected : ignore_disabled + var ignore_disabled = typeof(a) == typeof(true) ? a : b ignore_disabled = ignore_disabled == null ? true : ignore_disabled - rejected = typeof(rejected) == typeof(true) ? null : rejected + var rejected = typeof(a) == typeof(true) ? null : a var that = this var browser = this.dom @@ -253,9 +262,9 @@ var BrowserPrototype = { // function... if(typeof(pattern) == typeof(function(){})){ var filter = function(i, e){ - if(!pattern(i, e)){ + if(!pattern.call(e, i, e)){ if(rejected){ - rejected(i, e) + rejected.call(e, i, e) } return false } @@ -267,7 +276,7 @@ var BrowserPrototype = { var filter = function(i, e){ if(!pattern.test($(e).text())){ if(rejected){ - rejected(i, e) + rejected.call(e, i, e) } return false } @@ -283,7 +292,7 @@ var BrowserPrototype = { var i = t.search(pattern) if(!(i >= 0)){ if(rejected){ - rejected(i, e) + rejected.call(e, i, e) } return false } @@ -345,7 +354,6 @@ var BrowserPrototype = { // place the cursor... range.setStart(e[0], 0) range.collapse(true) - // XXX selection.removeAllRanges() selection.addRange(range)