Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

MDL-31901: moved select-file panel outside of filepicker/filemanager …

…for better UI
  • Loading branch information...
commit 55089a9d01c7287195c8592d222c77c3d0ae6708 1 parent 5cf44c1
@marinaglancy marinaglancy authored
View
17 files/renderer.php
@@ -295,8 +295,8 @@ private function fm_js_template_message() {
/**
* 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
- * must define width and height of the window;
+ * All content must be enclosed in one element, CSS for this class must define width and
+ * height of the window;
*
* Thumbnail image will be added as content to the element with class 'fp-thumbnail';
*
@@ -326,7 +326,7 @@ private function fm_js_template_message() {
* @return string
*/
private function fm_js_template_fileselectlayout() {
- $rv = '<div class="{!}fp-select">
+ $rv = '<div class="filemanager fp-select">
<div class="fp-select-loading">
<img src="'.$this->pix_url('i/loading').'" />
<p>'.get_string('loading', 'repository').'</p>
@@ -547,14 +547,15 @@ private function fp_js_template_nextpage() {
/**
* 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
- * must define width and height of the window;
+ * All content must be enclosed in one element, CSS for this class must define width and
+ * height of the window;
*
* 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:
- * 'fp-saveas', 'fp-linkexternal', 'fp-setauthor', 'fp-setlicense'. Inside each of them must have
- * one input element (or select in case of fp-setlicense). They may also have labels.
+ * 'fp-saveas', 'fp-linktype-2', 'fp-linktype-1', 'fp-linktype-4', 'fp-setauthor',
+ * '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
* disabled if they are not applicable for the particular file;
*
@@ -572,7 +573,7 @@ private function fp_js_template_nextpage() {
* @return string
*/
private function fp_js_template_selectlayout() {
- $rv = '<div class="{!}fp-select">
+ $rv = '<div class="file-picker fp-select">
<div class="fp-select-loading">
<img src="'.$this->pix_url('i/loading').'" />
<p>'.get_string('loading', 'repository').'</p>
View
20 lib/form/filemanager.js
@@ -26,6 +26,9 @@
* this.filecount, how many files in this filemanager
* this.maxfiles
* 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:
* =====
@@ -97,17 +100,18 @@ M.form_filemanager.init = function(Y, options) {
this.pathbar.removeChild(this.pathnode);
}
// initialize 'select file' panel
- var fpselectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout);
- this.filemanager.appendChild(fpselectnode);
+ this.selectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout);
+ this.selectnode.generateID();
+ Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({
- srcNode : fpselectnode,
+ srcNode : this.selectnode,
zIndex : 600000,
centered : true,
modal : true,
close : 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.setup_select_file();
// setup buttons onclick events
@@ -542,7 +546,7 @@ M.form_filemanager.init = function(Y, options) {
}
var list = ['/'];
appendfilepaths(list, tree);
- var selectnode = this.filemanager.one('.fp-select');
+ var selectnode = this.selectnode;
node = selectnode.one('.fp-path select');
node.setContent('');
for (var i in list) {
@@ -551,7 +555,7 @@ M.form_filemanager.init = function(Y, options) {
}
},
update_file: function() {
- var selectnode = this.filemanager.one('.fp-select');
+ var selectnode = this.selectnode;
var fileinfo = this.selectui.fileinfo;
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() {
- var selectnode = this.filemanager.one('.fp-select');
+ var selectnode = this.selectnode;
// bind labels with corresponding inputs
selectnode.all('.fp-saveas,.fp-path,.fp-author,.fp-license').each(function (node) {
node.all('label').set('for', node.one('input,select').generateID());
@@ -740,7 +744,7 @@ M.form_filemanager.init = function(Y, options) {
return node.filepath;
},
select_file: function(node) {
- var selectnode = this.filemanager.one('.fp-select');
+ var selectnode = this.selectnode;
selectnode.removeClass('loading').removeClass('fp-folder').
removeClass('fp-file').removeClass('fp-zip').removeClass('fp-cansetmain');
if (node.type == 'folder' || node.type == 'zip') {selectnode.addClass('fp-'+node.type);}
View
19 repository/filepicker.js
@@ -8,6 +8,7 @@
* this.fpnode, contains reference to filepicker Node, non-empty if and only if rendered
* this.api, stores the URL to make ajax request
* this.mainui, YUI Panel
+ * this.selectnode, contains reference to select-file Node
* this.selectui, YUI Panel for selecting particular file
* this.msg_dlg, YUI Panel for error or info message
* 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);
}
}
- this.fpnode.one('.fp-select').removeClass('loading');
+ this.selectnode.removeClass('loading');
this.process_dlg.dialogdata = data;
this.fpnode.one('.fp-dlg .fp-dlg-butrename').setContent(M.util.get_string('renameto', 'repository', data.newfile.filename));
this.process_dlg.show();
@@ -965,7 +966,7 @@ M.core_filepicker.init = function(Y, options) {
select_file: function(args) {
this.selectui.show();
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;
selectnode.removeClass('loading');
selectnode.one('.fp-saveas input').set('value', args.title);
@@ -1017,7 +1018,7 @@ M.core_filepicker.init = function(Y, options) {
},
setup_select_file: function() {
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');
// 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) {
@@ -1155,7 +1156,7 @@ M.core_filepicker.init = function(Y, options) {
var client_id = this.options.client_id;
this.fpnode = Y.Node.create(M.core_filepicker.templates.generallayout).
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);
this.mainui = new Y.Panel({
srcNode : this.fpnode,
@@ -1171,19 +1172,23 @@ M.core_filepicker.init = function(Y, options) {
render : true
});
// 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();
if (this.mainui.get('y')<0) {this.mainui.set('y', 0);}
// 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({
- srcNode : fpselectnode,
+ srcNode : this.selectnode,
zIndex : 600000,
centered : true,
modal : true,
close : 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();
// event handler for lazy loading of thumbnails and next page
this.fpnode.one('.fp-content').on(['scroll','resize'], this.content_scrolled, this);
View
50 theme/base/style/filemanager.css
@@ -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;
-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 p {}
-.file-picker .fp-select .fp-select-loading {display:none;}
-.file-picker .fp-select.loading .fp-select-loading {display:block;}
-.file-picker .fp-select.loading form {display:none;}
+.file-picker.fp-select .uneditable {display:none;}
+.file-picker.fp-select p {}
+.file-picker.fp-select .fp-select-loading {display:none;}
+.file-picker.fp-select.loading .fp-select-loading {display:block;}
+.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-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 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 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 div {/*paddign-top:5px;padding-bottom:5px;*/padding: 4px 0px;}
+.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 .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-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;}
/*
* 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-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:inline;}
-.filemanager .fp-select .fp-select-loading {display:none;}
-.filemanager .fp-select.loading .fp-select-loading {display:block;}
-.filemanager .fp-select.loading form {display:none;}
+.filemanager.fp-select .fp-select-loading {display:none;}
+.filemanager.fp-select.loading .fp-select-loading {display:block;}
+.filemanager.fp-select.loading form {display:none;}
/* disable unavailable actions: */
-/*.filemanager .fp-select.fp-zip .fp-license,*/
-.filemanager .fp-select.fp-folder .fp-license,
-/*.filemanager .fp-select.fp-zip .fp-author,*/
-.filemanager .fp-select.fp-folder .fp-author,
-.filemanager .fp-select.fp-file .fp-file-unzip,
-.filemanager .fp-select.fp-folder .fp-file-unzip,
-.filemanager .fp-select.fp-file .fp-file-zip,
-.filemanager .fp-select.fp-zip .fp-file-zip {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-folder .fp-file-download {display:none;} /* to be implemented */
+/*.filemanager.fp-select.fp-zip .fp-license,*/
+.filemanager.fp-select.fp-folder .fp-license,
+/*.filemanager.fp-select.fp-zip .fp-author,*/
+.filemanager.fp-select.fp-folder .fp-author,
+.filemanager.fp-select.fp-file .fp-file-unzip,
+.filemanager.fp-select.fp-folder .fp-file-unzip,
+.filemanager.fp-select.fp-file .fp-file-zip,
+.filemanager.fp-select.fp-zip .fp-file-zip {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-folder .fp-file-download {display:none;} /* to be implemented */
/*
* Drag and drop support
Please sign in to comment.
Something went wrong with that request. Please try again.