moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-04 16:36:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-31901: moved select-file panel outside of filepicker/filemanager for better UI

Browse source
This commit is contained in:
Marina Glancy 2012-05-09 11:25:14 +08:00
parent 5cf44c1f1f
commit 55089a9d01
4 changed files with 58 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

17
files/renderer.php
View file

@ -295,8 +295,8 @@ class core_files_renderer extends plugin_renderer_base {
/** /**
* FileManager JS template for window with file information/actions. * FileManager JS template for window with file information/actions.
* *
* All content must be enclosed in an element with class 'fp-select', CSS for this class * All content must be enclosed in one element, CSS for this class must define width and
* must define width and height of the window; * height of the window;
* *
* Thumbnail image will be added as content to the element with class 'fp-thumbnail'; * Thumbnail image will be added as content to the element with class 'fp-thumbnail';
* *
@ -326,7 +326,7 @@ class core_files_renderer extends plugin_renderer_base {
* @return string * @return string
*/ */
private function fm_js_template_fileselectlayout() { private function fm_js_template_fileselectlayout() {
$rv = '<div class="{!}fp-select"> $rv = '<div class="filemanager fp-select">
<div class="fp-select-loading"> <div class="fp-select-loading">
<img src="'.$this->pix_url('i/loading').'" /> <img src="'.$this->pix_url('i/loading').'" />
<p>'.get_string('loading', 'repository').'</p> <p>'.get_string('loading', 'repository').'</p>
@ -547,14 +547,15 @@ class core_files_renderer extends plugin_renderer_base {
/** /**
* FilePicker JS template for window appearing to select a file. * FilePicker JS template for window appearing to select a file.
* *
* All content must be enclosed in an element with class 'fp-select', CSS for this class * All content must be enclosed in one element, CSS for this class must define width and
* must define width and height of the window; * height of the window;
* *
* Thumbnail image will be added as content to the element with class 'fp-thumbnail'; * Thumbnail image will be added as content to the element with class 'fp-thumbnail';
* *
* Inside the window the elements with the following classnames must be present: * Inside the window the elements with the following classnames must be present:
* 'fp-saveas', 'fp-linkexternal', 'fp-setauthor', 'fp-setlicense'. Inside each of them must have * 'fp-saveas', 'fp-linktype-2', 'fp-linktype-1', 'fp-linktype-4', 'fp-setauthor',
* one input element (or select in case of fp-setlicense). They may also have labels. * 'fp-setlicense'. Inside each of them must have one input element (or select in case of
* fp-setlicense). They may also have labels.
* The elements will be assign with class 'uneditable' and input/select element will become * The elements will be assign with class 'uneditable' and input/select element will become
* disabled if they are not applicable for the particular file; * disabled if they are not applicable for the particular file;
* *
@ -572,7 +573,7 @@ class core_files_renderer extends plugin_renderer_base {
* @return string * @return string
*/ */
private function fp_js_template_selectlayout() { private function fp_js_template_selectlayout() {
$rv = '<div class="{!}fp-select"> $rv = '<div class="file-picker fp-select">
<div class="fp-select-loading"> <div class="fp-select-loading">
<img src="'.$this->pix_url('i/loading').'" /> <img src="'.$this->pix_url('i/loading').'" />
<p>'.get_string('loading', 'repository').'</p> <p>'.get_string('loading', 'repository').'</p>

20
lib/form/filemanager.js
View file

@ -26,6 +26,9 @@
* this.filecount, how many files in this filemanager * this.filecount, how many files in this filemanager
* this.maxfiles * this.maxfiles
* this.maxbytes * this.maxbytes
* this.filemanager, contains reference to filemanager Node
* this.selectnode, contains referenct to select-file Node
* this.selectui, YUI Panel to select the file
* *
* FileManager options: * FileManager options:
* ===== * =====
@ -97,17 +100,18 @@ M.form_filemanager.init = function(Y, options) {
this.pathbar.removeChild(this.pathnode); this.pathbar.removeChild(this.pathnode);
} }
// initialize 'select file' panel // initialize 'select file' panel
var fpselectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout); this.selectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout);
this.filemanager.appendChild(fpselectnode); this.selectnode.generateID();
Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({ this.selectui = new Y.Panel({
srcNode : fpselectnode, srcNode : this.selectnode,
zIndex : 600000, zIndex : 600000,
centered : true, centered : true,
modal : true, modal : true,
close : true, close : true,
render : true render : true
}); });
this.selectui.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']}); this.selectui.plug(Y.Plugin.Drag,{handles:['#'+this.selectnode.get('id')+' .yui3-widget-hd']});
this.selectui.hide(); this.selectui.hide();
this.setup_select_file(); this.setup_select_file();
// setup buttons onclick events // setup buttons onclick events
@ -542,7 +546,7 @@ M.form_filemanager.init = function(Y, options) {
} }
var list = ['/']; var list = ['/'];
appendfilepaths(list, tree); appendfilepaths(list, tree);
var selectnode = this.filemanager.one('.fp-select'); var selectnode = this.selectnode;
node = selectnode.one('.fp-path select'); node = selectnode.one('.fp-path select');
node.setContent(''); node.setContent('');
for (var i in list) { for (var i in list) {
@ -551,7 +555,7 @@ M.form_filemanager.init = function(Y, options) {
} }
}, },
update_file: function() { update_file: function() {
var selectnode = this.filemanager.one('.fp-select'); var selectnode = this.selectnode;
var fileinfo = this.selectui.fileinfo; var fileinfo = this.selectui.fileinfo;
var newfilename = Y.Lang.trim(selectnode.one('.fp-saveas input').get('value')); var newfilename = Y.Lang.trim(selectnode.one('.fp-saveas input').get('value'));
@ -614,7 +618,7 @@ M.form_filemanager.init = function(Y, options) {
}); });
}, },
setup_select_file: function() { setup_select_file: function() {
var selectnode = this.filemanager.one('.fp-select'); var selectnode = this.selectnode;
// bind labels with corresponding inputs // bind labels with corresponding inputs
selectnode.all('.fp-saveas,.fp-path,.fp-author,.fp-license').each(function (node) { selectnode.all('.fp-saveas,.fp-path,.fp-author,.fp-license').each(function (node) {
node.all('label').set('for', node.one('input,select').generateID()); node.all('label').set('for', node.one('input,select').generateID());
@ -740,7 +744,7 @@ M.form_filemanager.init = function(Y, options) {
return node.filepath; return node.filepath;
}, },
select_file: function(node) { select_file: function(node) {
var selectnode = this.filemanager.one('.fp-select'); var selectnode = this.selectnode;
selectnode.removeClass('loading').removeClass('fp-folder'). selectnode.removeClass('loading').removeClass('fp-folder').
removeClass('fp-file').removeClass('fp-zip').removeClass('fp-cansetmain'); removeClass('fp-file').removeClass('fp-zip').removeClass('fp-cansetmain');
if (node.type == 'folder' || node.type == 'zip') {selectnode.addClass('fp-'+node.type);} if (node.type == 'folder' || node.type == 'zip') {selectnode.addClass('fp-'+node.type);}

19
repository/filepicker.js
View file

@ -8,6 +8,7 @@
* this.fpnode, contains reference to filepicker Node, non-empty if and only if rendered * this.fpnode, contains reference to filepicker Node, non-empty if and only if rendered
* this.api, stores the URL to make ajax request * this.api, stores the URL to make ajax request
* this.mainui, YUI Panel * this.mainui, YUI Panel
* this.selectnode, contains reference to select-file Node
* this.selectui, YUI Panel for selecting particular file * this.selectui, YUI Panel for selecting particular file
* this.msg_dlg, YUI Panel for error or info message * this.msg_dlg, YUI Panel for error or info message
* this.process_dlg, YUI Panel for processing existing filename * this.process_dlg, YUI Panel for processing existing filename
@ -660,7 +661,7 @@ M.core_filepicker.init = function(Y, options) {
node.one('.fp-dlg-text').setContent(M.str.repository.fileexistsdialog_filemanager); node.one('.fp-dlg-text').setContent(M.str.repository.fileexistsdialog_filemanager);
} }
} }
this.fpnode.one('.fp-select').removeClass('loading'); this.selectnode.removeClass('loading');
this.process_dlg.dialogdata = data; this.process_dlg.dialogdata = data;
this.fpnode.one('.fp-dlg .fp-dlg-butrename').setContent(M.util.get_string('renameto', 'repository', data.newfile.filename)); this.fpnode.one('.fp-dlg .fp-dlg-butrename').setContent(M.util.get_string('renameto', 'repository', data.newfile.filename));
this.process_dlg.show(); this.process_dlg.show();
@ -965,7 +966,7 @@ M.core_filepicker.init = function(Y, options) {
select_file: function(args) { select_file: function(args) {
this.selectui.show(); this.selectui.show();
var client_id = this.options.client_id; var client_id = this.options.client_id;
var selectnode = this.fpnode.one('.fp-select'); var selectnode = this.selectnode;
var return_types = this.options.repositories[this.active_repo.id].return_types; var return_types = this.options.repositories[this.active_repo.id].return_types;
selectnode.removeClass('loading'); selectnode.removeClass('loading');
selectnode.one('.fp-saveas input').set('value', args.title); selectnode.one('.fp-saveas input').set('value', args.title);
@ -1017,7 +1018,7 @@ M.core_filepicker.init = function(Y, options) {
}, },
setup_select_file: function() { setup_select_file: function() {
var client_id = this.options.client_id; var client_id = this.options.client_id;
var selectnode = this.fpnode.one('.fp-select'); var selectnode = this.selectnode;
var getfile = selectnode.one('.fp-select-confirm'); var getfile = selectnode.one('.fp-select-confirm');
// bind labels with corresponding inputs // bind labels with corresponding inputs
selectnode.all('.fp-saveas,.fp-linktype-2,.fp-linktype-1,.fp-linktype-4,.fp-setauthor,.fp-setlicense').each(function (node) { selectnode.all('.fp-saveas,.fp-linktype-2,.fp-linktype-1,.fp-linktype-4,.fp-setauthor,.fp-setlicense').each(function (node) {
@ -1155,7 +1156,7 @@ M.core_filepicker.init = function(Y, options) {
var client_id = this.options.client_id; var client_id = this.options.client_id;
this.fpnode = Y.Node.create(M.core_filepicker.templates.generallayout). this.fpnode = Y.Node.create(M.core_filepicker.templates.generallayout).
set('id', 'filepicker-'+client_id); set('id', 'filepicker-'+client_id);
var fpselectnode = Y.Node.create(M.core_filepicker.templates.selectlayout); this.selectnode = Y.Node.create(M.core_filepicker.templates.selectlayout);
Y.one(document.body).appendChild(this.fpnode); Y.one(document.body).appendChild(this.fpnode);
this.mainui = new Y.Panel({ this.mainui = new Y.Panel({
srcNode : this.fpnode, srcNode : this.fpnode,
@ -1171,19 +1172,23 @@ M.core_filepicker.init = function(Y, options) {
render : true render : true
}); });
// allow to move the panel dragging it by it's header: // allow to move the panel dragging it by it's header:
this.mainui.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']}); this.mainui.plug(Y.Plugin.Drag,{handles:['#filepicker-'+client_id+' .yui3-widget-hd']});
this.mainui.show(); this.mainui.show();
if (this.mainui.get('y')<0) {this.mainui.set('y', 0);} if (this.mainui.get('y')<0) {this.mainui.set('y', 0);}
// create panel for selecting a file (initially hidden) // create panel for selecting a file (initially hidden)
this.fpnode.appendChild(fpselectnode); this.selectnode = Y.Node.create(M.core_filepicker.templates.selectlayout).
set('id', 'filepicker-select-'+client_id);
Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({ this.selectui = new Y.Panel({
srcNode : fpselectnode, srcNode : this.selectnode,
zIndex : 600000, zIndex : 600000,
centered : true, centered : true,
modal : true, modal : true,
close : true, close : true,
render : true render : true
}); });
// allow to move the panel dragging it by it's header:
this.selectui.plug(Y.Plugin.Drag,{handles:['#filepicker-select-'+client_id+' .yui3-widget-hd']});
this.selectui.hide(); this.selectui.hide();
// event handler for lazy loading of thumbnails and next page // event handler for lazy loading of thumbnails and next page
this.fpnode.one('.fp-content').on(['scroll','resize'], this.content_scrolled, this); this.fpnode.one('.fp-content').on(['scroll','resize'], this.content_scrolled, this);

50
theme/base/style/filemanager.css
View file

@ -145,19 +145,19 @@ background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(st
*/ */
.file-picker .fp-select {width:420px;min-height:auto;text-align:left;background: #F2F2F2;border-radius: 8px;border: 1px solid #FFF; .file-picker .fp-select {width:420px;min-height:auto;text-align:left;background: #F2F2F2;border-radius: 8px;border: 1px solid #FFF;
-webkit-box-shadow: 5px 5px 20px 0px #666666;-moz-box-shadow: 5px 5px 20px 0px #666666;box-shadow: 5px 5px 20px 0px #666666;text-align: center;} -webkit-box-shadow: 5px 5px 20px 0px #666666;-moz-box-shadow: 5px 5px 20px 0px #666666;box-shadow: 5px 5px 20px 0px #666666;text-align: center;}
.file-picker .fp-select .uneditable {display:none;} .file-picker.fp-select .uneditable {display:none;}
.file-picker .fp-select p {} .file-picker.fp-select p {}
.file-picker .fp-select .fp-select-loading {display:none;} .file-picker.fp-select .fp-select-loading {display:none;}
.file-picker .fp-select.loading .fp-select-loading {display:block;} .file-picker.fp-select.loading .fp-select-loading {display:block;}
.file-picker .fp-select.loading form {display:none;} .file-picker.fp-select.loading form {display:none;}
.file-picker .fp-select-confirm {background: #FFF;padding: 3px 20px 2px 20px; margin: 5px 0px 10px 20px; border-radius: 10px;float:left;-webkit-box-shadow: 2px 2px 1px .1px #999;-moz-box-shadow: 2px 2px 1px .1px #999;box-shadow: 2px 2px 3px .1px #999;} .file-picker .fp-select-confirm {background: #FFF;padding: 3px 20px 2px 20px; margin: 5px 0px 10px 20px; border-radius: 10px;float:left;-webkit-box-shadow: 2px 2px 1px .1px #999;-moz-box-shadow: 2px 2px 1px .1px #999;box-shadow: 2px 2px 3px .1px #999;}
.file-picker .fp-select-cancel {background: #FFF;padding: 3px 20px 2px 20px; margin: 5px 0px 10px 20px; border-radius: 10px;float:left;-webkit-box-shadow: 2px 2px 1px .1px #999;-moz-box-shadow: 2px 2px 1px .1px #999;box-shadow: 2px 2px 3px .1px #999;} .file-picker .fp-select-cancel {background: #FFF;padding: 3px 20px 2px 20px; margin: 5px 0px 10px 20px; border-radius: 10px;float:left;-webkit-box-shadow: 2px 2px 1px .1px #999;-moz-box-shadow: 2px 2px 1px .1px #999;box-shadow: 2px 2px 3px .1px #999;}
.file-picker .fp-select .fp-hr {clear: both;height: 1px; background-color: #FFF;border-bottom: 1px solid #BBB;width: auto; margin: 20px;} .file-picker.fp-select .fp-hr {clear: both;height: 1px; background-color: #FFF;border-bottom: 1px solid #BBB;width: auto; margin: 20px;}
.file-picker .fp-select table {margin: 10px 10px;} .file-picker.fp-select table {margin: 10px 10px;}
.file-picker .fp-select .fp-thumbnail {float:left;width:110px;height:110px;line-height: 110px;text-align: center;margin: 10px 0px 10px 20px;background: #FFF;-webkit-box-shadow: inset 0px 0px 10px 0px #BBB;-moz-box-shadow: inset 0px 0px 10px 0px #BBB;box-shadow: inset 0px 0px 10px 0px #BBB;} .file-picker.fp-select .fp-thumbnail {float:left;width:110px;height:110px;line-height: 110px;text-align: center;margin: 10px 0px 10px 20px;background: #FFF;-webkit-box-shadow: inset 0px 0px 10px 0px #BBB;-moz-box-shadow: inset 0px 0px 10px 0px #BBB;box-shadow: inset 0px 0px 10px 0px #BBB;}
.file-picker .fp-select .fp-thumbnail img {border: 1px solid #CCC;padding:3px;vertical-align: middle;} .file-picker.fp-select .fp-thumbnail img {border: 1px solid #CCC;padding:3px;vertical-align: middle;}
.file-picker .fp-select .fp-fileinfo {display: inline-block;/*margin-left: 10px; */margin: 4px 0px 20px 0px;width:240px;text-align: left;} .file-picker.fp-select .fp-fileinfo {display: inline-block;/*margin-left: 10px; */margin: 4px 0px 20px 0px;width:240px;text-align: left;}
.file-picker .fp-select .fp-fileinfo div {/*paddign-top:5px;padding-bottom:5px;*/padding: 4px 0px;} .file-picker.fp-select .fp-fileinfo div {/*paddign-top:5px;padding-bottom:5px;*/padding: 4px 0px;}
/* /*
* Upload * Upload
@ -245,22 +245,22 @@ background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(st
.filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu, .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
.filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:inline;} .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:inline;}
.filemanager .fp-select .fp-select-loading {display:none;} .filemanager.fp-select .fp-select-loading {display:none;}
.filemanager .fp-select.loading .fp-select-loading {display:block;} .filemanager.fp-select.loading .fp-select-loading {display:block;}
.filemanager .fp-select.loading form {display:none;} .filemanager.fp-select.loading form {display:none;}
/* disable unavailable actions: */ /* disable unavailable actions: */
/*.filemanager .fp-select.fp-zip .fp-license,*/ /*.filemanager.fp-select.fp-zip .fp-license,*/
.filemanager .fp-select.fp-folder .fp-license, .filemanager.fp-select.fp-folder .fp-license,
/*.filemanager .fp-select.fp-zip .fp-author,*/ /*.filemanager.fp-select.fp-zip .fp-author,*/
.filemanager .fp-select.fp-folder .fp-author, .filemanager.fp-select.fp-folder .fp-author,
.filemanager .fp-select.fp-file .fp-file-unzip, .filemanager.fp-select.fp-file .fp-file-unzip,
.filemanager .fp-select.fp-folder .fp-file-unzip, .filemanager.fp-select.fp-folder .fp-file-unzip,
.filemanager .fp-select.fp-file .fp-file-zip, .filemanager.fp-select.fp-file .fp-file-zip,
.filemanager .fp-select.fp-zip .fp-file-zip {display:none;} .filemanager.fp-select.fp-zip .fp-file-zip {display:none;}
.filemanager .fp-select .fp-file-setmain {display:none;} .filemanager.fp-select .fp-file-setmain {display:none;}
.filemanager .fp-select.fp-cansetmain .fp-file-setmain {display:inline-block;} .filemanager.fp-select.fp-cansetmain .fp-file-setmain {display:inline-block;}
.filemanager .fp-select.fp-folder .fp-file-download {display:none;} /* to be implemented */ .filemanager.fp-select.fp-folder .fp-file-download {display:none;} /* to be implemented */
/* /*
* Drag and drop support * Drag and drop support