flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-31 19:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

made the browse dialog focusable...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2015-02-14 03:30:13 +03:00
parent fbaef507e6
commit 6ff5d17c7b
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui (gen4)/experiments/browse-dialog.html
View File

@ -8,6 +8,8 @@
top: 100px; top: 100px;
left: 100px; left: 100px;
box-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em;
} }
.browse { .browse {
@ -19,7 +21,6 @@
padding: 5px; padding: 5px;
font-family: sans-serif; font-family: sans-serif;
} }
.browse .v-block { .browse .v-block {
width: 100%; width: 100%;
height: auto; height: auto;
@ -67,20 +68,20 @@
padding-right: 10px; padding-right: 10px;
} }
.browse .list div.selected, .browse:focus .list div.selected,
.browse .path .dir:hover, .browse .path .dir:hover,
.browse .list div:hover { .browse .list div:hover {
background: rgba(0,0,0, 0.05);
color: white; color: white;
text-shadow: rgba(0,0,0,0.5) 0.05em 0.005em 0.4em, background: rgba(0,0,0, 0.05);
rgba(0,0,0,0.5) 0.05em 0.05em; }
.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;
} }
.browse .list div.selected { .browse .list div.selected {
background: rgba(0,0,0, 0.1); background: rgba(0,0,0, 0.08);
text-shadow: rgba(0,0,0,0.3) 0.1em 0.1em 0.4em,
rgba(0,0,0,0.3) 0.1em 0.1em;
box-shadow: rgba(0,0,0,0.2) 0.1em 0.1em 0.2em;
} }
@ -113,6 +114,7 @@ var TREE = {
// add some recursion for testing... // add some recursion for testing...
TREE.dir_d = TREE.dir_c.dir_b TREE.dir_d = TREE.dir_c.dir_b
TREE.dir_a.tree = TREE TREE.dir_a.tree = TREE
TREE.dir_c.tree = TREE
TREE.dir_c.dir_b.tree = TREE TREE.dir_c.dir_b.tree = TREE
@ -123,6 +125,10 @@ function skipFiles(e, v){
function make(title){ function make(title){
var browser = $('<div>') var browser = $('<div>')
.addClass('browse') .addClass('browse')
.attr('tabindex', -1)
.click(function(){
$(this).focus()
})
.append($('<div>') .append($('<div>')
.addClass('v-block title') .addClass('v-block title')
.text(title)) .text(title))
@ -329,7 +335,7 @@ var KB = {
'*':{ '*':{
F5: function(){ window.location.reload() }, F5: function(){ window.location.reload() },
}, },
'.browse':{ '.browse:focus':{
Up: prev, Up: prev,
Backspace: 'Up', Backspace: 'Up',
Down: next, Down: next,
@ -360,6 +366,8 @@ $(function(){
.empty() .empty()
.append(browser) .append(browser)
showPath(browser, '/', TREE) showPath(browser, '/', TREE)
$('.container').draggable()
}) })
</script> </script>