Settings, directory browser

This commit is contained in:
Ruud
2011-09-05 22:09:54 +02:00
parent 6430014c56
commit 1e36aeced3
13 changed files with 208 additions and 180 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 757 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

@@ -114,6 +114,7 @@ Form.Check = new Class({
this.check();
}
this.fireEvent('change', this);
this.input.fireEvent('change', this);
return this;
},
uncheck: function() {
+67 -39
View File
@@ -103,7 +103,7 @@ Page.Settings = new Class({
)
)
);
new Form.Check(self.advanced_toggle, {
'onChange': self.showAdvanced.bind(self)
})
@@ -479,63 +479,77 @@ Option.Directory = new Class({
type: 'span',
browser: '',
save_on_change: false,
use_cache: false,
create: function(){
var self = this;
self.el.adopt(
self.createLabel(),
self.input = new Element('span.directory', {
'text': self.getSettingValue(),
new Element('span.directory.inlay', {
'events': {
'click': self.showBrowser.bind(self)
}
})
}).adopt(
self.input = new Element('span', {
'text': self.getSettingValue()
})
)
);
self.cached = {};
},
selectDirectory: function(e, el){
selectDirectory: function(dir){
var self = this;
self.input.set('text', el.get('data-value'));
self.input.set('text', dir);
self.getDirs()
self.fireEvent('change')
},
previousDirectory: function(e){
var self = this;
self.selectDirectory(null, self.back_button)
self.selectDirectory(self.getParentDir())
},
showBrowser: function(){
var self = this;
if(!self.browser)
if(!self.browser){
self.browser = new Element('div.directory_list').adopt(
new Element('div.pointer'),
new Element('div.actions').adopt(
self.back_button = new Element('a.button.back', {
'text': '',
self.back_button = new Element('a.back', {
'html': '',
'events': {
'click': self.previousDirectory.bind(self)
}
}),
new Element('label', {
'text': 'Show hidden files'
'text': 'Hidden folders'
}).adopt(
self.show_hidden = new Element('input[type=checkbox].inlay')
self.show_hidden = new Element('input[type=checkbox].inlay', {
'events': {
'change': self.getDirs.bind(self)
}
})
)
),
self.dir_list = new Element('ul', {
'events': {
'click:relay(li)': self.selectDirectory.bind(self)
'click:relay(li)': function(e, el){
(e).stop();
self.selectDirectory(el.get('data-value'))
},
'mousewheel': function(e){
(e).stopPropagation();
}
}
}),
new Element('div.actions').adopt(
new Element('a.button.cancel', {
new Element('a.cancel', {
'text': 'Cancel',
'events': {
'click': self.hideBrowser.bind(self)
@@ -547,21 +561,32 @@ Option.Directory = new Class({
self.save_button = new Element('a.button.save', {
'text': 'Save',
'events': {
'click': self.hideBrowser.bind(self, true)
'click': function(e){
self.hideBrowser(e, true)
}
}
})
)
).inject(self.input, 'after')
).inject(self.el)
new Form.Check(self.show_hidden);
}
self.initial_directory = self.input.get('text');
self.getDirs()
self.browser.show()
self.el.addEvent('outerClick', self.hideBrowser.bind(self))
},
hideBrowser: function(save){
hideBrowser: function(e, save){
var self = this;
(e).stop();
if(save) self.save()
if(save)
self.save()
else
self.input.set('text', self.initial_directory);
self.browser.hide()
self.el.removeEvent('outerClick', self.hideBrowser.bind(self))
@@ -571,41 +596,43 @@ Option.Directory = new Class({
fillBrowser: function(json){
var self = this;
var c = self.getParentDir();
var v = self.input.get('text');
var previous_dir = self.getParentDir(c.substring(0, c.length-1));
var previous_dir = self.getParentDir();
if(previous_dir){
if(previous_dir != v){
self.back_button.set('data-value', previous_dir)
self.back_button.set('text', self.getCurrentDirname(previous_dir))
self.back_button.set('html', '« '+self.getCurrentDirname(previous_dir))
self.back_button.show()
}
else {
self.back_button.hide()
}
if(!json)
json = self.cached[c];
else
self.cached[c] = json;
if(self.use_cache)
if(!json)
json = self.cached[v];
else
self.cached[v] = json;
self.dir_list.empty();
json.dirs.each(function(dir){
if(dir.indexOf(v) != -1){
new Element('li', {
'data-value': dir,
'text': self.getCurrentDirname(dir)
}).inject(self.dir_list)
}
})
setTimeout(function(){
self.dir_list.empty();
json.dirs.each(function(dir){
if(dir.indexOf(v) != -1){
new Element('li', {
'data-value': dir,
'text': self.getCurrentDirname(dir)
}).inject(self.dir_list)
}
});
}, 50);
},
getDirs: function(){
var self = this;
var c = self.getParentDir();
var c = self.input.get('text');
if(self.cached[c]){
if(self.cached[c] && self.use_cache){
self.fillBrowser()
}
else {
@@ -625,7 +652,8 @@ Option.Directory = new Class({
var v = dir || self.input.get('text');
var sep = Api.getOption('path_sep');
var dirs = v.split(sep);
dirs.pop();
if(dirs.pop() == '')
dirs.pop();
return dirs.join(sep) + sep
},
+99 -26
View File
@@ -1,7 +1,15 @@
/* @override http://localhost:5000/static/style/page/settings.css */
/* @override
http://localhost:5000/static/style/page/settings.css
http://192.168.1.20:5000/static/style/page/settings.css
*/
.page.settings {
overflow: hidden;
.page.settings:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.page.settings .tabs {
@@ -165,39 +173,104 @@
.page.settings .directory {
display: inline-block;
padding: 0 4px;
padding: 0 4% 0 4px;
font-size: 13px;
width: 29.7%;
}
.page.settings .directory_list {
position: absolute;
width: 300px;
margin: 0 0 0 16.5%;
background: #282d34;
border: 1px solid #1f242b;
position: absolute;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
width: 26.3%;
background-image: url('../../images/icon.folder.gif');
background-repeat: no-repeat;
background-position: 97% center;
overflow: hidden;
}
.page.settings .directory > span {
height: 25px;
display: inline-block;
float: right;
text-align: right;
white-space: nowrap;
cursor: pointer;
}
.page.settings .directory_list {
z-index: 2;
position: absolute;
width: 360px;
margin: -2px 0 20px 60px;
background: #5c697b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 50px rgba(0,0,0,0.55);
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
}
.page.settings .directory_list .pointer {
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #5c697b;
display: block;
position: absolute;
width: 0px;
margin: -9px 0 0 48.5%;
}
.page.settings .directory_list ul {
width: 100%;
max-height: 200px;
height: 200px;
overflow: auto;
}
.page.settings .directory_list li {
padding: 2px 10px;
}
.page.settings .directory_list li {
padding: 0 10px;
cursor: pointer;
margin: 0;
border-top: 1px solid rgba(255,255,255,0.1);
background: url('../../images/right.arrow.png') no-repeat 98% center;
}
.page.settings .directory_list li:last-child {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.page.settings .directory_list li:hover {
background-color: #515c68;
}
.page.settings .directory_list .actions {
clear: both;
padding: 10px;
background: #414953;
}
.page.settings .directory_list .actions:first-child { border-bottom: 1px solid #1f242b; }
.page.settings .directory_list .actions:last-child { border-top: 1px solid #1f242b; }
.page.settings .directory_list .actions {}
.page.settings .directory_list .actions label {
float: right;
width: auto;
padding: 5px 3px;
}
.page.settings .directory_list .actions .inlay {
margin: -2px 0 0 7px;
}
.page.settings .directory_list .actions .back {
font-weight: bold;
width: 160px;
display: inline-block;
}
.page.settings .directory_list .actions:last-child {
float: right;
}
.page.settings .directory_list .actions:last-child > span {
padding: 0 5px;
text-shadow: none;
}
.page.settings .directory_list .actions:last-child > .cancel {
font-weight: bold;
color: #ddd;
}
.page.settings .directory_list .actions:last-child > .save {
background: #9dc156;
}