Settings, directory browser
This commit is contained in:
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() {
|
||||
|
||||
@@ -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
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user