From 2b076e499c899652475825ed9230454bd6401f01 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 20 Jun 2015 20:51:43 +0300 Subject: [PATCH] some basic theaming and some refactoring... Signed-off-by: Alex A. Naanou --- ui (gen4)/experiments/browse-dialog.css | 84 +++++++++++++++------ ui (gen4)/experiments/browse-dialog.html | 95 +++++++++++++++++------- ui (gen4)/experiments/browse-dialog.js | 80 ++++++++++++-------- 3 files changed, 178 insertions(+), 81 deletions(-) diff --git a/ui (gen4)/experiments/browse-dialog.css b/ui (gen4)/experiments/browse-dialog.css index 8120e8b5..3414a2f5 100755 --- a/ui (gen4)/experiments/browse-dialog.css +++ b/ui (gen4)/experiments/browse-dialog.css @@ -1,12 +1,15 @@ +/********************************************************** Widget ***/ .browse { display: inline-block; min-width: 300px; width: initial; - background: gray; - color: rgba(255,255,255,0.8); padding: 5px; font-family: sans-serif; + + background: gray; + /*color: rgba(255,255,255,0.8);*/ + color: white; } /* .browse:not(:focus) { @@ -18,11 +21,9 @@ height: auto; box-sizing: border-box; - - border-top: 1px solid rgba(255,255,255, 0.3); } -.browse .v-block:first-of-type { - border-top: none; +.browse .v-block:not(:first-of-type) { + border-top: 1px solid rgba(255, 255, 255, 0.3); } .browse .v-block:empty { display: none; @@ -30,21 +31,18 @@ -.browse .title { - font-weight: bold; - color: rgba(255,255,255,0.9); - padding: 5px; - padding-left: 10px; - padding-right: 10px; -} - - +/************************************************************ Path ***/ .browse .path { padding: 5px; padding-left: 10px; padding-right: 10px; white-space: nowrap; + + opacity: 0.8; +} +.browse .path:hover { + opacity: 1; } .browse .path:empty { display: block; @@ -90,6 +88,8 @@ +/************************************************************ List ***/ + /* 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 @@ -112,13 +112,25 @@ padding-left: 10px; padding-right: 10px; cursor: pointer; + + opacity: 0.7; } .browse:focus .list div.selected, .browse .path .dir:hover, .browse .list div:hover { - color: white; - background: rgba(0,0,0, 0.05); + background: rgba(0, 0, 0, 0.05); + + opacity: 0.9; +} +.browse .list div.selected { + background: rgba(0, 0, 0, 0.08); +} +.browse:focus .list div.selected { + background: rgba(0, 0, 0, 0.08); + box-shadow: rgba(0, 0, 0, 0.2) 0.1em 0.1em 0.2em; + + opacity: 1; } /* XXX need to make the next two different... */ @@ -132,11 +144,39 @@ opacity: 0.3; } -.browse:focus .list div.selected { - background: rgba(0,0,0, 0.1); - box-shadow: rgba(0,0,0,0.2) 0.1em 0.1em 0.2em; + + +/******************************************************** Theaming ***/ + +/* Light */ +.light .browse { + background: white; + color: rgba(0, 0, 0, 0.8); +} +.light .browse .v-block:not(:first-of-type) { + border-top: 1px solid rgba(0, 0, 0, 0.2); } -.browse .list div.selected { - background: rgba(0,0,0, 0.08); + + +/* Dark */ +.dark .browse { + background: #0a0a0a; + color: rgba(255, 255, 255, 0.8); } +/* XXX can we make this simpler??? */ +.dark .browse:focus .list div.selected, +.dark .browse .path .dir:hover, +.dark .browse .list div:hover { + background: rgba(255, 255, 255, 0.08); +} +.dark .browse .list div.selected { + background: rgba(255, 255, 255, 0.1); +} +.dark .browse:focus .list div.selected { + background: rgba(255, 255, 255, 0.1); +} + + + +/*********************************************************************/ diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html index 704d76e4..68ef907c 100755 --- a/ui (gen4)/experiments/browse-dialog.html +++ b/ui (gen4)/experiments/browse-dialog.html @@ -3,6 +3,56 @@ + @@ -135,6 +159,8 @@ requirejs(['../lib/keyboard', '../object', './browse-dialog'], function(k, o, br }, }) .focus() + + b.path = '/dir_a/tree/dir_c' }) $(function(){ @@ -148,6 +174,16 @@ $(function(){ //browser.focus() }) +var themeToggler = CSSClassToggler('body', + [ + 'none', + 'light', + 'dark', + ], + function(state){ + $('#theme').text(state) + }) + @@ -157,6 +193,11 @@ $(function(){ +
+
+ +Theme: +
diff --git a/ui (gen4)/experiments/browse-dialog.js b/ui (gen4)/experiments/browse-dialog.js index 7f48011b..3d31af66 100755 --- a/ui (gen4)/experiments/browse-dialog.js +++ b/ui (gen4)/experiments/browse-dialog.js @@ -14,8 +14,7 @@ var object = require('../object') /*********************************************************************/ -// XXX add a hook to render the content of an element... -// XXX NOTE: the widget itself does not need a title, that's the job for +// NOTE: the widget itself does not need a title, that's the job for // a container widget (dialog, field, ...) // ...it can be implemented trivially via an attribute and a :before // CSS class... @@ -49,33 +48,32 @@ var BrowserClassPrototype = { }, } -// 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 +// simplify this to implement a list (removing the path and disabling // traversal)?? // XXX need base events: // - open // - update // - select (???) -// XXX add "current selection" to the path... var BrowserPrototype = { dom: null, // option defaults and doc... - // - // XXX add enable/disable filter option... options: { //path: null, //show_path: null, + // enable/disable user selection filtering... + // NOTE: this only affects .stopFilter(..) + filter: true, + // handle keys that are not bound... - // // NOTE: to disable, set ot undefined. logKeys: function(k){ window.DEBUG && console.log(k) }, }, - // XXX this should prevent event handler deligation... + // XXX this should prevent event handler delegation... keyboard: { // filter mappings... Filter: { @@ -124,7 +122,8 @@ var BrowserPrototype = { // base api... // NOTE: to avoid duplicating and syncing data, the actual path is // stored in DOM... - // XXX does the path includes the currently selected element? + // NOTE: path does not include the currently selected list element, + // just the path to the current list... get path(){ var skip = false return this.dom.find('.path .dir:not(.cur)') @@ -132,7 +131,6 @@ var BrowserPrototype = { .toArray() }, set path(value){ - // XXX normalize path... return this.update(value) }, @@ -141,11 +139,26 @@ var BrowserPrototype = { // - build the element list // // XXX trigger an "update" event... + // XXX do we normalize path here??? + // XXX need a way to handle path errors in the extension API... + // ...for example, if .list(..) can't list or lists a different + // path due to an error, we need to be able to render the new + // path both in the path and list sections... + // NOTE: current behaviour is not wrong, it just not too flexible... update: function(path){ path = path || this.path var browser = this.dom var that = this + // normalize path... + // XXX is it correct to ignore empty path elements, e.g. 'aa//cc'? + var splitter = /[\\\/]/ + if(typeof(path) == typeof('str') && splitter.test(path)){ + path = path + .split(splitter) + .filter(function(e){ return e != '' }) + } + var p = browser.find('.path').empty() var l = browser.find('.list').empty() @@ -164,14 +177,14 @@ var BrowserPrototype = { .text(e)) }) - // add current selction indicator... + // add current selection indicator... p.append($('
') .addClass('dir cur') .click(function(){ that.startFilter() //that.update(path.concat($(this).text())) - // XXX HACK: prevents the field from bluring when clicked... + // XXX HACK: prevents the field from blurring when clicked... // ...need to find a better way... that._hold_blur = true setTimeout(function(){ delete that._hold_blur }, 20) @@ -240,15 +253,17 @@ var BrowserPrototype = { // elements will be searched too. // // - // XXX pattern modes: + // TODO pattern modes: // - lazy match // abc -> *abc* -> ^.*abc.*$ // ab cd -> *ab*cd* -> ^.*ab.*cd.*$ // - glob - // XXX need to support glob / nested patterns... + // TODO need to support glob / nested patterns... // ..things like /**/a*/*moo/ - // XXX should we unwrap the elements to be more compatible with + // + // XXX Q: should we unwrap the elements to be more compatible with // jQuery .filter(..)? + // ...currently I don't think so... filter: function(pattern, a, b){ pattern = pattern || '*' var ignore_disabled = typeof(a) == typeof(true) ? a : b @@ -347,21 +362,22 @@ var BrowserPrototype = { }, // XXX make this a toggler... (???) startFilter: function(){ - var range = document.createRange() - var selection = window.getSelection() + if(this.options.filter){ + var range = document.createRange() + var selection = window.getSelection() - var that = this - var e = this.dom.find('.path .dir.cur') - .text('') - .attr('contenteditable', true) - .focus() - - // place the cursor... - range.setStart(e[0], 0) - range.collapse(true) - selection.removeAllRanges() - selection.addRange(range) + var that = this + var e = this.dom.find('.path .dir.cur') + .text('') + .attr('contenteditable', true) + .focus() + // place the cursor... + range.setStart(e[0], 0) + range.collapse(true) + selection.removeAllRanges() + selection.addRange(range) + } return this }, stopFilter: function(){ @@ -442,6 +458,9 @@ var BrowserPrototype = { // // XXX Q: should this trigger a "select" event??? // XXX the scroll handling might be a bit inaccurate... + // XXX Q: should this have a version that will just return the + // selected element without affecting the ui? + // ...something like .filter(..) vs. .showFiltered(..) select: function(elem, filtering){ var pattern = '.list div:not(.disabled):not(.filtered-out)' var browser = this.dom @@ -680,9 +699,6 @@ object.makeConstructor('Browser', - - - /********************************************************************** * vim:set ts=4 sw=4 : */ return module })