Skip to content

Commit

Permalink
MDL-33218 fixing filemanager/filepicker look in IE
Browse files Browse the repository at this point in the history 
now all YUI dialogues are under the div with id #filesskin. This way we can avoid using !important in CSS and use #filesskin instead. It will have priority over YUI skin in all browswers including IE (!important does not work in IE).

Conflicts:

	files/renderer.php
	theme/base/style/filemanager.css
  • Loading branch information
@marinaglancy @barbararamiro
marinaglancy authored and barbararamiro committed May 28, 2012
1 parent 6077e38 commit 5e11746
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 26 deletions.
2 changes: 1 addition & 1 deletion files/renderer.php
View file
Expand Up @@ -302,7 +302,7 @@ private function fm_js_template_listfilename() {
*/
private function fm_js_template_mkdir() {
$rv = '
<div class="fp-mkdir-dlg">
<div class="filemanager fp-mkdir-dlg">
<div class="fp-mkdir-dlg-text">New folder name:<br/><input type="text" /></div>
<a class="{!}fp-dlg-butcreate fp-panel-button" href="#">'.get_string('create').'</a>
<a class="{!}fp-dlg-butcancel fp-panel-button" href="#">'.get_string('cancel').'</a>
Expand Down
25 changes: 11 additions & 14 deletions lib/form/filemanager.js
View file
Expand Up @@ -100,9 +100,8 @@ M.form_filemanager.init = function(Y, options) {
this.pathbar.removeChild(this.pathnode);
}
// initialize 'select file' panel
this.selectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout);
this.selectnode = Y.Node.createWithFilesSkin(M.form_filemanager.templates.fileselectlayout);
this.selectnode.generateID();
Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({
srcNode : this.selectnode,
zIndex : 600000,
Expand Down Expand Up @@ -234,27 +233,27 @@ M.form_filemanager.init = function(Y, options) {
header = M.str.moodle.info;
}
if (!this.msg_dlg) {
var node = Y.Node.create(M.form_filemanager.templates.message);
this.filemanager.appendChild(node);
this.msg_dlg_node = Y.Node.createWithFilesSkin(M.form_filemanager.templates.message);
var nodeid = this.msg_dlg_node.generateID();

this.msg_dlg = new Y.Panel({
srcNode : node,
srcNode : this.msg_dlg_node,
zIndex : 800000,
centered : true,
modal : true,
visible : false,
render : true
});
this.msg_dlg.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']});
node.one('.fp-msg-butok').on('click', function(e) {
this.msg_dlg.plug(Y.Plugin.Drag,{handles:['#'+nodeid+' .yui3-widget-hd']});
this.msg_dlg_node.one('.fp-msg-butok').on('click', function(e) {
e.preventDefault();
this.msg_dlg.hide();
}, this);
}

this.msg_dlg.set('headerContent', header);
this.filemanager.one('.fp-msg').removeClass('fp-msg-info').removeClass('fp-msg-error').addClass('fp-msg-'+type)
this.filemanager.one('.fp-msg .fp-msg-text').setContent(msg);
this.msg_dlg_node.removeClass('fp-msg-info').removeClass('fp-msg-error').addClass('fp-msg-'+type)
this.msg_dlg_node.one('.fp-msg-text').setContent(msg);
this.msg_dlg.show();
},
setup_buttons: function() {
Expand Down Expand Up @@ -302,8 +301,7 @@ M.form_filemanager.init = function(Y, options) {
});
}
if (!this.mkdir_dialog) {
var node = Y.Node.create(M.form_filemanager.templates.mkdir);
this.filemanager.appendChild(node);
var node = Y.Node.createWithFilesSkin(M.form_filemanager.templates.mkdir);
this.mkdir_dialog = new Y.Panel({
srcNode : node,
zIndex : 800000,
Expand Down Expand Up @@ -679,10 +677,9 @@ M.form_filemanager.init = function(Y, options) {
show_confirm_dialog: function(dialog_options) {
// instead of M.util.show_confirm_dialog(e, dialog_options);
if (!this.confirm_dlg) {
this.confirm_dlg_node = Y.Node.create(M.form_filemanager.templates.confirmdialog);
this.confirm_dlg_node = Y.Node.createWithFilesSkin(M.form_filemanager.templates.confirmdialog);
var node = this.confirm_dlg_node;
node.generateID();
Y.one(document.body).appendChild(node);
this.confirm_dlg = new Y.Panel({
srcNode : node,
zIndex : 800000,
Expand Down Expand Up @@ -867,7 +864,7 @@ M.form_filemanager.init = function(Y, options) {
this.selectui.fileinfo = node;
selectnode.one('.fp-saveas input').set('value', node.fullname);
var foldername = this.get_parent_folder_name(node);
selectnode.all('.fp-author input').set('value', node.author);
selectnode.all('.fp-author input').set('value', node.author ? node.author : '');
selectnode.all('.fp-license select option[selected]').set('selected', false);
selectnode.all('.fp-license select option[value='+node.license+']').set('selected', true);
selectnode.all('.fp-path select option[selected]').set('selected', false);
Expand Down
24 changes: 15 additions & 9 deletions repository/filepicker.js
View file
Expand Up @@ -443,6 +443,17 @@ YUI.add('moodle-core_filepicker', function(Y) {
}

}

/**
* creates a node and adds it to the div with id #filesskin. This is needed for CSS to be able
* to overwrite YUI skin styles (instead of using !important that does not work in IE)
*/
Y.Node.createWithFilesSkin = function(node) {
if (!Y.one('#filesskin')) {
Y.one(document.body).appendChild(Y.Node.create('<div/>').set('id', 'filesskin'));
}
return Y.one('#filesskin').appendChild(Y.Node.create(node));
}
}, '@VERSION@', {
requires:['base', 'node', 'yui2-treeview', 'panel', 'cookie', 'datatable', 'datatable-sort']
});
Expand Down Expand Up @@ -692,10 +703,9 @@ M.core_filepicker.init = function(Y, options) {
this.selectui.hide();
}
if (!this.process_dlg) {
this.process_dlg_node = Y.Node.create(M.core_filepicker.templates.processexistingfile);
this.process_dlg_node = Y.Node.createWithFilesSkin(M.core_filepicker.templates.processexistingfile);
var node = this.process_dlg_node;
node.generateID();
Y.one(document.body).appendChild(node);
this.process_dlg = new Y.Panel({
srcNode : node,
headerContent: M.str.repository.fileexistsdialogheader,
Expand Down Expand Up @@ -736,9 +746,8 @@ M.core_filepicker.init = function(Y, options) {
header = M.str.moodle.info;
}
if (!this.msg_dlg) {
this.msg_dlg_node = Y.Node.create(M.core_filepicker.templates.message);
this.msg_dlg_node = Y.Node.createWithFilesSkin(M.core_filepicker.templates.message);
this.msg_dlg_node.generateID();
Y.one(document.body).appendChild(this.msg_dlg_node);

this.msg_dlg = new Y.Panel({
srcNode : this.msg_dlg_node,
Expand Down Expand Up @@ -1215,10 +1224,8 @@ M.core_filepicker.init = function(Y, options) {
},
render: function() {
var client_id = this.options.client_id;
this.fpnode = Y.Node.create(M.core_filepicker.templates.generallayout).
this.fpnode = Y.Node.createWithFilesSkin(M.core_filepicker.templates.generallayout).
set('id', 'filepicker-'+client_id);
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,
headerContent: M.str.repository.filepicker,
Expand All @@ -1239,9 +1246,8 @@ M.core_filepicker.init = function(Y, options) {
this.mainui.set('y', 0);
}
// create panel for selecting a file (initially hidden)
this.selectnode = Y.Node.create(M.core_filepicker.templates.selectlayout).
this.selectnode = Y.Node.createWithFilesSkin(M.core_filepicker.templates.selectlayout).
set('id', 'filepicker-select-'+client_id);
Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({
srcNode : this.selectnode,
zIndex : 600000,
Expand Down
4 changes: 2 additions & 2 deletions theme/base/style/filemanager.css
View file
Expand Up @@ -317,8 +317,8 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
/*
* Create folder dialogue (File Manager only)
*/
.filemanager .fp-mkdir-dlg {text-align: center;}
.filemanager .fp-mkdir-dlg .fp-mkdir-dlg-text {text-align: left;margin: 40px 20px 20px;}
.filemanager.fp-mkdir-dlg {text-align: center;}
.filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {text-align: left;margin: 40px 20px 20px;}

/*
* Confirm dialogue for delete (File Manager only)
Expand Down

0 comments on commit 5e11746

Please sign in to comment.