From d8f3170367429508c4d846cbd53f25d18c8d00ef Mon Sep 17 00:00:00 2001
From: Dongsheng Cai <unoter@gmail.com>
Date: Thu, 20 May 2010 06:15:44 +0000
Subject: [PATCH] MDL-16597, added some style to make filemanger prettier

---
 lang/en/repository.php    |  2 +-
 lib/form/filemanager.js   | 38 ++++++++++++++++++--------------------
 lib/outputrenderers.php   | 25 ++++++++++++++++---------
 mod/wiki/styles.css       |  7 +------
 theme/base/style/core.css | 10 ++++++----
 5 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/lang/en/repository.php b/lang/en/repository.php
index 3e8f05640d3..eef3735dd1f 100644
--- a/lang/en/repository.php
+++ b/lang/en/repository.php
@@ -75,7 +75,7 @@ $string['downloadfolder'] = 'Download all';
 $string['downloadsucc'] = 'The file has been downloaded successfully';
 $string['draftareanofiles'] = 'Cannot be downloaed because there is no files attached';
 $string['editrepositoryinstance'] = 'Edit repository instance';
-$string['emptylist'] = 'Empty result';
+$string['emptylist'] = 'Empty list';
 $string['emptytype'] = 'Cannot create repository type: type name is empty';
 $string['enablecourseinstances'] = 'Allow teachers to add a repository instance into the file picker';
 $string['enableuserinstances'] = 'Allow users to add a repository instance into the file picker';
diff --git a/lib/form/filemanager.js b/lib/form/filemanager.js
index 673402671cf..c7f46e03bf7 100644
--- a/lib/form/filemanager.js
+++ b/lib/form/filemanager.js
@@ -81,18 +81,14 @@ M.form_filemanager.init = function(Y, options) {
         },
 
         wait: function(client_id) {
+            var container = Y.one('#filemanager-'+client_id);
+            container.set('innerHTML', '');
+            var html = Y.Node.create('<ul id="draftfiles-'+client_id+'"></ul>');
+            container.appendChild(html);
             var panel = Y.one('#draftfiles-'+client_id);
-            if (!panel) {
-                var container = Y.one('#filemanager-'+client_id);
-                var html = Y.Node.create('<ul id="draftfiles-'+client_id+'"></ul>');
-                container.appendChild(html);
-                panel = Y.one('#draftfiles-'+client_id);
-            } else {
-                panel.set('innerHTML', '');
-            }
             var name = '';
             var str = '<div style="text-align:center">';
-            str += '<img src="'+M.util.image_url('i/progressbar')+'" />';
+            str += '<img src="'+M.util.image_url('i/loading_small')+'" />';
             str += '</div>';
             try {
                 panel.set('innerHTML', str);
@@ -262,6 +258,9 @@ M.form_filemanager.init = function(Y, options) {
                 });
             }, this);
         },
+        empty_filelist: function(container) {
+            container.set('innerHTML', '<div class="mdl-align">'+M.str.repository.emptylist+'</div>');
+        },
         render: function() {
             var options = this.options;
             var path = this.options.path;
@@ -333,7 +332,8 @@ M.form_filemanager.init = function(Y, options) {
             var foldername_ids = [];
             if (!list || list.length == 0) {
                 // hide file browser and breadcrumb
-                container.setStyle('display', 'none');
+                //container.setStyle('display', 'none');
+                this.empty_filelist(container);
                 if (!path || path.length <= 1) {
                     breadcrumb.setStyle('display', 'none');
                 }
@@ -365,9 +365,6 @@ M.form_filemanager.init = function(Y, options) {
                 var url = "###";
                 // check main file
                 var ismainfile = false;
-                //if (fm_cfg[this.client_id].mainfilename && (fm_cfg[this.client_id].mainfilename.toLowerCase() == list[i].fullname.toLowerCase())) {
-                    //ismainfile = true;
-                //}
 
                 switch (list[i].type) {
                     case 'folder':
@@ -395,13 +392,8 @@ M.form_filemanager.init = function(Y, options) {
                 }
                 var fullname = list[i].fullname;
 
-                // add green tick to main file
-                //if (ismainfile) {
-                    //fullname = "<strong>"+list[i].fullname+"</strong> <img src='"+M.cfg.wwwroot+"/pix/i/tick_green_small.gif"+"' />";
-                //}
-
                 html = html.replace('___fullname___', '<a href="'+url+'" id="'+fileid+'"><img src="'+list[i].icon+'" /> ' + fullname + '</a>');
-                html = html.replace('___action___', '<a href="###" id="'+action+'"><img alt="▶" src="'+M.cfg.wwwroot+'/pix/t/expanded.png'+'" /></a>');
+                html = html.replace('___action___', '<a href="###" id="'+action+'"><img alt="▶" src="'+M.util.image_url('t/collapsed')+'" /></a>');
                 html = '<li id="'+htmlid+'">'+html+'</li>';
                 listhtml += html;
             }
@@ -727,11 +719,17 @@ M.form_filemanager.init = function(Y, options) {
     });
 
     // finally init everything needed
-
+    // kill nonjs filemanager
     var item = document.getElementById('nonjs-filemanager-'+options.client_id);
+    if (item && !options.usenonjs) {
+        item.parentNode.removeChild(item);
+    }
+    // hide loading picture
+    item = document.getElementById('filemanager-loading-'+options.client_id);
     if (item) {
         item.parentNode.removeChild(item);
     }
+    // display filemanager interface
     item = document.getElementById('filemanager-wrapper-'+options.client_id);
     if (item) {
         item.style.display = '';
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 89b4890f6c7..4525182fb2f 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -1756,13 +1756,16 @@ class core_renderer extends renderer_base {
         $html = '';
         $nonjsfilemanager = optional_param('usenonjsfilemanager', 0, PARAM_INT);
         $options = $fm->options;
+        $options->usenonjs = $nonjsfilemanager;
         $straddfile  = get_string('add', 'repository') . '...';
         $strmakedir  = get_string('makeafolder', 'moodle');
-        $strdownload  = get_string('downloadfolder', 'repository');
+        $strdownload = get_string('downloadfolder', 'repository');
+        $strloading  = get_string('loading', 'repository');
 
         $icon_add_file = $OUTPUT->pix_icon('t/addfile', $straddfile).'';
         $icon_add_folder = $OUTPUT->pix_icon('t/adddir', $strmakedir).'';
         $icon_download = $OUTPUT->pix_icon('t/download', $strdownload).'';
+        $icon_progress = $OUTPUT->pix_icon('i/loading_small', $strloading).'';
 
         $client_id = $options->client_id;
         $itemid    = $options->itemid;
@@ -1775,6 +1778,9 @@ class core_renderer extends renderer_base {
         }
 
         $html .= <<<FMHTML
+<div class="filemanager-loading mdl-align" id='filemanager-loading-{$client_id}'>
+$icon_progress
+</div>
 <div id="filemanager-wrapper-{$client_id}" style="display:none">
     <div class="fm-breadcrumb" id="fm-path-{$client_id}"></div>
     <div class="filemanager-toolbar">
@@ -1793,7 +1799,7 @@ FMHTML;
         if (empty($filemanagertemplateloaded)) {
             $filemanagertemplateloaded = true;
             $html .= <<<FMHTML
-<div id="fm-template" style="display:none"><div class="fm-file-menu">___action___</div> <div class="fm-file-name">___fullname___</div></div>
+<div id="fm-template" style="display:none"><span class="fm-file-menu">___action___</span> <span class="fm-file-name">___fullname___</span></div>
 FMHTML;
         }
 
@@ -1825,19 +1831,20 @@ FMHTML;
         $this->page->requires->js_module($module);
         $this->page->requires->js_init_call('M.form_filemanager.init', array($options), true, $module);
 
-        $url = new moodle_url($this->page->url, array('usenonjsfilemanager'=>1));
-
         // non javascript file manager
-        $html .= '<div id="nonjs-filemanager-'.$client_id.'">';
         if (!empty($nonjsfilemanager)) {
+            $html = '<div id="nonjs-filemanager-'.$client_id.'">';
             $html .= <<<NONJS
-<object type="text/html" data="$url" height="160" width="600" style="border:1px solid #000">Error</object>
+<object type="text/html" data="$filemanagerurl" height="160" width="600" style="border:1px solid #000">Error</object>
 NONJS;
+            $html .= '</div>';
         } else {
-            //TODO: Fix this link
-            //$html .= html_writer::link($url, get_string('usenonjsfilemanager', 'repository'));
+            $url = new moodle_url($this->page->url, array('usenonjsfilemanager'=>1));
+            $html .= '<div id="nonjs-filemanager-'.$client_id.'" class="mdl-align">';
+            $html .= html_writer::link($url, get_string('usenonjsfilemanager', 'repository'));
+            $html .= '</div>';
         }
-        $html .= '</div>';
+
 
         return $html;
     }
diff --git a/mod/wiki/styles.css b/mod/wiki/styles.css
index 7890a4c2871..39c702bfef3 100644
--- a/mod/wiki/styles.css
+++ b/mod/wiki/styles.css
@@ -137,11 +137,6 @@
     font-weight: bold;
 }
 
-.filemanager-container {
-    margin: auto;
-    width: 320px;
-}
-
 .wiki_modifieduser p {
     line-height: 35px;
 }
@@ -343,4 +338,4 @@ a.wiki_edit_section {
 .wikisearchresults{
     padding-left: 50px;
     padding-top: 20px;
-}
\ No newline at end of file
+}
diff --git a/theme/base/style/core.css b/theme/base/style/core.css
index dc193f44dd2..c30a979b188 100644
--- a/theme/base/style/core.css
+++ b/theme/base/style/core.css
@@ -499,15 +499,17 @@ body.tag .managelink {padding: 5px;}
 .filemanager-toolbar a:visited {border: 1px solid gray;background: #ccc;color: black;padding: 3px;}
 .filemanager-toolbar a:hover {background: white;text-decoration: none;}
 .fm-breadcrumb {margin:0;}
-.filemanager-container {padding: 5px;margin: 6px 0;}
+.filemanager-container {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
 .filemanager-container ul{margin:0;padding:0;}
-.filemanager-container ul li{white-space:nowrap;list-style-type:none;clear:both}
+.filemanager-container ul li{white-space:nowrap;list-style-type:none;}
 .filemanager-container ul li a{margin:1px;}
 .filemanager-container ul li div.fm-file-name a:hover {margin:0;border: 1px solid #CCC; background: grey; color: white;}
+.filemanager-loading{display:none}
+.jsenabled .filemanager-loading{display:block}
 #fm-move-div {margin: 6px;}
 #fm-move-div strong{color:red;}
-.fm-file-menu {width:18px;height:18px;float:left;}
-.fm-file-name {float:left;}
+.fm-file-menu {width:18px;height:18px;}
+.fm-file-name {}
 .fm-file-entry{border: 1px solid red;}
 .fm-operation {font-weight: bold;}