flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-01 20:00:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

some visual tweeks + updated docs...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2015-06-19 19:13:11 +03:00
parent 065acfea8a
commit 1eee524086
2 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);

46
ui (gen4)/experiments/browse-dialog.js
View File

@ -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(<pattern>[, <rejected-handler>][, <ignore-disabled>])
// -> elements
//
//
// Get all elements...
// .filter()
// .filter('*')
// -> all elements
//
// Get all elements containing a string...
// .filter(<string>)
// -> elements
//
// Get all elements matching a regexp...
// .filter(<regexp>)
// -> elements
//
// Filter the elements via a function...
// .filter(<function>)
// -> elements
//
//
// .filter(<pattern>[, <rejected-handler>][, <ignore-disabled>])
// If <rejected-handler> function is passed it will get called with
// every element that was rejected by the predicate / not matching
// the pattern.
//
// By default, <ignore-disabled> is false, thus this will ignore
// disabled elements. If <ignore_disabled> is false then disabled
// elements will be searched too.
//
// XXX write out the following signatures...
// .filter(<pattern>)
// .filter(<pattern>, <ignore-disabled>)
// .filter(<pattern>, <rejected-handler>)
// .filter(<pattern>, <rejected-handler>, <ignore-disabled>)
//
// 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)