From 5e11746696099345f44062e84c61ae47793bc2bb Mon Sep 17 00:00:00 2001 From: Marina Glancy Date: Mon, 28 May 2012 11:21:45 +0800 Subject: [PATCH] MDL-33218 fixing filemanager/filepicker look in IE 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 --- files/renderer.php | 2 +- lib/form/filemanager.js | 25 +++++++++++-------------- repository/filepicker.js | 24 +++++++++++++++--------- theme/base/style/filemanager.css | 4 ++-- 4 files changed, 29 insertions(+), 26 deletions(-) diff --git a/files/renderer.php b/files/renderer.php index 4c4b08c9474..6a5477ceec8 100644 --- a/files/renderer.php +++ b/files/renderer.php @@ -302,7 +302,7 @@ class core_files_renderer extends plugin_renderer_base { */ private function fm_js_template_mkdir() { $rv = ' -
+
New folder name:
'.get_string('create').' '.get_string('cancel').' diff --git a/lib/form/filemanager.js b/lib/form/filemanager.js index 592dc1c876a..76ee15859a8 100644 --- a/lib/form/filemanager.js +++ b/lib/form/filemanager.js @@ -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, @@ -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() { @@ -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, @@ -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, @@ -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); diff --git a/repository/filepicker.js b/repository/filepicker.js index 3c79232d66f..335f4c9614c 100644 --- a/repository/filepicker.js +++ b/repository/filepicker.js @@ -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('
').set('id', 'filesskin')); + } + return Y.one('#filesskin').appendChild(Y.Node.create(node)); + } }, '@VERSION@', { requires:['base', 'node', 'yui2-treeview', 'panel', 'cookie', 'datatable', 'datatable-sort'] }); @@ -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, @@ -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, @@ -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, @@ -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, diff --git a/theme/base/style/filemanager.css b/theme/base/style/filemanager.css index 55a556a38e3..5bc9dbde25a 100644 --- a/theme/base/style/filemanager.css +++ b/theme/base/style/filemanager.css @@ -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)