MDL-31901 Styled File Manager Icon view, Table view and Tree view
authorBarbara Ramiro <barbara@moodle.com>
Mon, 14 May 2012 05:41:07 +0000 (13:41 +0800)
committerMarina Glancy <marina@moodle.com>
Mon, 21 May 2012 03:57:54 +0000 (11:57 +0800)
19 files changed:
files/renderer.php
pix/a/add_file.png [new file with mode: 0644]
pix/a/create_folder.png [new file with mode: 0644]
pix/a/download_all.png [new file with mode: 0644]
pix/y/lm.gif [deleted file]
pix/y/lm.png [new file with mode: 0644]
pix/y/lmh.gif [deleted file]
pix/y/ln.png [new file with mode: 0644]
pix/y/lp.gif [deleted file]
pix/y/lp.png [new file with mode: 0644]
pix/y/lph.gif [deleted file]
pix/y/tm.gif [deleted file]
pix/y/tm.png [new file with mode: 0644]
pix/y/tmh.gif [deleted file]
pix/y/tp.gif [deleted file]
pix/y/tp.png [new file with mode: 0644]
pix/y/tph.gif [deleted file]
theme/base/pix/fp/dnd_arrow.png [new file with mode: 0644]
theme/base/style/filemanager.css

index 769db56..5746a46 100644 (file)
@@ -189,36 +189,40 @@ class core_files_renderer extends plugin_renderer_base {
 
         $html = '
 <div id="filemanager-'.$client_id.'" class="filemanager fm-loading">
-    <div class="filemanager-loading mdl-align">'.$icon_progress.'</div>
-    <div class="fp-pathbar">
-        <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name"></a><span>/</span></span>
-    </div>
-    <div class="filemanager-toolbar">
-        <input type="button" class="{!}fp-btn-add" value="'.$straddfile.'" />
-        <input type="button" class="{!}fp-btn-mkdir" value="'.$strmakedir.'" />
-        <input type="button" class="{!}fp-btn-download" value="'.$strdownload.'" />
+    <div class="fp-restrictions">
         '.$restrictions.'
         <span class="dndupload-message"> - '.$strdndenabled.' </span>
-        <div class="{!}fp-viewbar" style="float:none;">
-           <span class=""><button class="{!}fp-vb-icons">'.get_string('iconview', 'repository').'</button></span>
-           <span class=""><button class="{!}fp-vb-tree">'.get_string('listview', 'repository').'</button></span>
-           <span class=""><button class="{!}fp-vb-details">'.get_string('detailview', 'repository').'</button></span>
+    </div>
+    <div class="fp-navbar">
+        <div class="filemanager-toolbar">
+            <div class="{!}fp-viewbar">
+                <a class="{!}fp-vb-icons" href="#"></a>
+                <a class="{!}fp-vb-details" href="#"></a>
+                <a class="{!}fp-vb-tree" href="#"></a>    
+            </div>
+            <div class="fp-toolbar">
+                <div class="{!}fp-btn-add"><a href="#"><img src="'.$this->pix_url('a/add_file').'" /> '.$straddfile.'</a></div>
+                <div class="{!}fp-btn-mkdir"><a href="#"><img src="'.$this->pix_url('a/create_folder').'" /> '.$strmakedir.'</a></div>
+                <div class="{!}fp-btn-download"><a href"#"><img src="'.$this->pix_url('a/download_all').'" /> '.$strdownload.'</a></div>
+            </div>
+        </div>
+        <div class="fp-pathbar">
+            <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name"></a></span>
         </div>
     </div>
+    <div class="filemanager-loading mdl-align">'.$icon_progress.'</div> 
     <div class="filemanager-container" >
         <div class="fm-content-wrapper">
-            <ul class="fp-content"></ul>
+            <div class="fp-content"></div>
             <div class="fm-empty-container mdl-align">'.$strnofilesattached.'
-                <span class="dndupload-message">'.$strdndenabledinbox.'</span>
+                <span class="dndupload-message">'.$strdndenabledinbox.'</span><div class="dndupload-arrow"></div>
             </div>
-            <div class="dndupload-target">'.$strdroptoupload.'</div>
+            <div class="dndupload-target">'.$strdroptoupload.'<div class="dndupload-arrow"></div>
             <div class="dndupload-uploadinprogress">'.$icon_progress.'</div>
         </div>
         <div class="filemanager-updating">'.$icon_progress.'</div>
     </div>
-</div>
-<div class="clearer"></div>
-';
+</div>';
         return preg_replace('/\{\!\}/', '', $html);
     }
 
@@ -235,8 +239,9 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fm_js_template_iconfilename() {
-        $rv = '<div class="fp-file" style="position:relative">
-        <a href="#">
+        $rv = '
+<div class="fp-file">
+    <a href="#">
     <div style="position:relative;">
     <div class="{!}fp-thumbnail"></div>
     <div class="fp-reficons"></div>
@@ -261,8 +266,12 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fm_js_template_listfilename() {
-        $rv = '<span><span class="{!}fp-icon"></span> <span class="{!}fp-filename"></span>
-            <a class="{!}fp-contextmenu" href="#" onclick="return false;">'.$this->pix_icon('i/menu', '▶').'</a></span>';
+        $rv = '
+<span>
+    <span class="{!}fp-icon"></span>
+    <span class="{!}fp-filename"></span>
+    <a class="{!}fp-contextmenu" href="#" onclick="return false;">'.$this->pix_icon('i/menu', '▶').'</a>
+</span>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
 
@@ -280,10 +289,10 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fm_js_template_mkdir() {
-        $rv = '<div class="fp-mkdir-dlg">
-            <span class="{!}fp-dlg-curpath"></span>
-            <input type="text">
-            <button class="{!}fp-dlg-butcreate">'.get_string('create').'</button><button class="{!}fp-dlg-butcancel">'.get_string('cancel').'</button>
+        $rv = '
+<div class="fp-mkdir-dlg">
+    <input type="text">
+    <a class="{!}fp-dlg-butcreate fp-panel-button">'.get_string('create').'</a>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -337,38 +346,46 @@ class core_files_renderer extends plugin_renderer_base {
     private function fm_js_template_fileselectlayout() {
         $strloading  = get_string('loading', 'repository');
         $icon_progress = $this->pix_icon('i/loading_small', $strloading).'';
-        $rv = '<div class="filemanager fp-select">
-<div class="fp-select-loading">
-<img src="'.$this->pix_url('i/loading').'" />
-<p>'.get_string('loading', 'repository').'</p>
-</div>
-<form>
-<p class="{!}fp-thumbnail"></p>
-<table width="100%">
-<tr class="{!}fp-saveas"><td class="mdl-right"><label>'.get_string('name', 'moodle').'</label>:</td>
-<td class="mdl-left"><input type="text"/></td></tr>
-<tr class="{!}fp-author"><td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
-<td class="mdl-left"><input type="text" /></td></tr>
-<tr class="{!}fp-license"><td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
-<td class="mdl-left"><select></select></td></tr>
-<tr class="{!}fp-path"><td class="mdl-right"><label>'.get_string('path', 'moodle').'</label>:</td>
-<td class="mdl-left"><select></select></td></tr>
-<tr class="{!}fp-original"><td class="mdl-right"><label>'.get_string('original', 'repository').'</label>:</td>
-<td class="mdl-left"><span class="fp-originloading">'.$icon_progress.' '.$strloading.'</span><span class="fp-value"/></td></tr>
-</table>
-<p><button class="{!}fp-file-update" >'.get_string('update', 'moodle').'</button>
-<button class="{!}fp-file-download" >'.get_string('download').'</button>
-<button class="{!}fp-file-delete" >'.get_string('delete').'</button>
-<button class="{!}fp-file-zip" >'.get_string('zip', 'editor').'</button>
-<button class="{!}fp-file-unzip" >'.get_string('unzip').'</button>
-<button class="{!}fp-file-setmain" >'.get_string('setmainfile', 'repository').'</button>
-<button class="{!}fp-file-cancel" >'.get_string('cancel').'</button>
-</p>
-</form>
-<div class="{!}fp-datemodified">'.get_string('lastmodified', 'moodle').': <span class="fp-value"/></div>
-<div class="{!}fp-datecreated">'.get_string('datecreated', 'repository').': <span class="fp-value"/></div>
-<div class="{!}fp-size">'.get_string('size', 'repository').': <span class="fp-value"/></div>
-<div class="{!}fp-dimensions">'.get_string('dimensions', 'repository').': <span class="fp-value"/></div>
+        $rv = '
+<div class="filemanager fp-select">
+    <div class="fp-select-loading">
+        <img src="'.$this->pix_url('i/loading').'" />
+        <p>'.get_string('loading', 'repository').'</p>
+    </div>
+    <form>
+        <div><a class="{!}fp-file-download fp-panel-button" href="#">'.get_string('download').'</a>
+            <a class="{!}fp-file-delete fp-panel-button" href="#">'.get_string('delete').'</a>
+            <a class="{!}fp-file-setmain fp-panel-button" href="#">'.get_string('setmainfile', 'repository').'</a>
+            <a class="{!}fp-file-zip fp-panel-button" href="#">'.get_string('zip', 'editor').'</a>
+            <a class="{!}fp-file-unzip fp-panel-button" href="#">'.get_string('unzip').'</a>
+        </div>
+        <div class="fp-hr"></div>
+        <table>
+            <tr class="{!}fp-saveas"><td class="mdl-right"><label>'.get_string('name', 'moodle').'</label>:</td>
+            <td class="mdl-left"><input type="text"/></td></tr>
+            <tr class="{!}fp-author"><td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
+            <td class="mdl-left"><input type="text" /></td></tr>
+            <tr class="{!}fp-license"><td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
+            <td class="mdl-left"><select></select></td></tr>
+            <tr class="{!}fp-path"><td class="mdl-right"><label>'.get_string('path', 'moodle').'</label>:</td>
+            <td class="mdl-left"><select></select></td></tr>
+            <tr class="{!}fp-original"><td class="mdl-right"><label>'.get_string('original', 'repository').'</label>:</td>
+            <td class="mdl-left"><span class="fp-originloading">'.$icon_progress.' '.$strloading.'</span><span class="fp-value"/></td></tr>
+        </table>
+    </form>
+    <p class="{!}fp-thumbnail"></p>
+    <form>
+        <p class="fp-select-update">
+            <button class="{!}fp-file-update" >'.get_string('update', 'moodle').'</button>
+            <button class="{!}fp-file-cancel" >'.get_string('cancel').'</button>
+        </p>
+    </form>
+    <div class="fp-fileinfo">
+        <div class="{!}fp-datemodified">'.get_string('lastmodified', 'moodle').': <span class="fp-value"/></div>
+        <div class="{!}fp-datecreated">'.get_string('datecreated', 'repository').': <span class="fp-value"/></div>
+        <div class="{!}fp-size">'.get_string('size', 'repository').': <span class="fp-value"/></div>
+        <div class="{!}fp-dimensions">'.get_string('dimensions', 'repository').': <span class="fp-value"/></div>
+    </div>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -385,9 +402,13 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fm_js_template_confirmdialog() {
-        $rv = '<div class="fp-dlg"><div class="{!}fp-dlg-text"></div>
-<div class="fp-dlg-but"><button class="{!}fp-dlg-butconfirm" >'.get_string('ok').'</button></div>
-<div class="fp-dlg-but"><button class="{!}fp-dlg-butcancel" >'.get_string('cancel').'</button></div>
+        $rv = '
+<div class="filemanager fp-dlg">
+    <div class="{!}fp-dlg-text"></div>
+    <!--<div class="fp-dlg-but"><button class="{!}fp-dlg-butconfirm" >'.get_string('ok').'</button></div>
+    <div class="fp-dlg-but"><button class="{!}fp-dlg-butcancel" >'.get_string('cancel').'</button></div>-->
+    <a class="{!}fp-dlg-butconfirm fp-panel-button" >'.get_string('ok').'</a>
+    <a class="{!}fp-dlg-butcancel fp-panel-button">'.get_string('cancel').'</a>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -480,19 +501,21 @@ class core_files_renderer extends plugin_renderer_base {
         </ul>
     </div>
     <div class="fp-repo-items">
-        <div class="fp-navbar" >  
-            <div class="{!}fp-viewbar">
-                <a class="{!}fp-vb-icons" href="#"></a>
-                <a class="{!}fp-vb-details" href="#"></a>
-                <a class="{!}fp-vb-tree" href="#"></a>    
-            </div>
-            <div class="{!}fp-toolbar">
-                <div class="{!}fp-tb-back"><a href="#">'.get_string('back', 'repository').'</a></div>
-                <div class="{!}fp-tb-search fp-search"><form/></div>
-                <div class="{!}fp-tb-refresh"><a href="#"><img src="'.$this->pix_url('a/refresh').'" /></a></div>
-                <div class="{!}fp-tb-logout"><img src="'.$this->pix_url('a/logout').'" /><a href="#"></a></div>
-                <div class="{!}fp-tb-manage"><a href="#"><img src="'.$this->pix_url('a/setting').'" /> '.get_string('manageurl', 'repository').'</a></div>
-                <div class="{!}fp-tb-help"><a href="#"><img src="'.$this->pix_url('a/help').'" /> '.get_string('help').'</a></div>
+        <div class="fp-navbar">  
+            <div>
+                <div class="{!}fp-viewbar">
+                    <a class="{!}fp-vb-icons" href="#"></a>
+                    <a class="{!}fp-vb-details" href="#"></a>
+                    <a class="{!}fp-vb-tree" href="#"></a>    
+                </div>
+                <div class="{!}fp-toolbar">
+                    <div class="{!}fp-tb-back"><a href="#">'.get_string('back', 'repository').'</a></div>
+                    <div class="{!}fp-tb-search fp-search"><form/></div>
+                    <div class="{!}fp-tb-refresh"><a href="#"><img src="'.$this->pix_url('a/refresh').'" /></a></div>
+                    <div class="{!}fp-tb-logout"><img src="'.$this->pix_url('a/logout').'" /><a href="#"></a></div>
+                    <div class="{!}fp-tb-manage"><a href="#"><img src="'.$this->pix_url('a/setting').'" /> '.get_string('manageurl', 'repository').'</a></div>
+                    <div class="{!}fp-tb-help"><a href="#"><img src="'.$this->pix_url('a/help').'" /> '.get_string('help').'</a></div>
+                </div>
             </div>
             <div class="fp-pathbar">
                  <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name" href="#"></a></span>         
@@ -522,9 +545,10 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_iconfilename() {
-        $rv = '<a class="fp-file" href="#" >
+        $rv = '
+<a class="fp-file" href="#" >
     <div class="{!}fp-thumbnail"></div>
-    <div class="{!}fp-filename"></div>
+    <p class="{!}fp-filename"></p>
 </a>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -564,12 +588,13 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_nextpage() {
-        $rv = '<div class="{!}fp-nextpage">
-  <div class="fp-nextpage-link"><a href="#">'.get_string('more').'</a></div>
-  <div class="fp-nextpage-loading">
-    <img src="'.$this->pix_url('i/loading').'" />
-    <p>'.get_string('loading', 'repository').'</p>
-  </div>
+        $rv = '
+<div class="{!}fp-nextpage">
+    <div class="fp-nextpage-link"><a href="#">'.get_string('more').'</a></div>
+    <div class="fp-nextpage-loading">
+        <img src="'.$this->pix_url('i/loading').'" />
+        <p>'.get_string('loading', 'repository').'</p>
+    </div>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -603,39 +628,49 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_selectlayout() {
-        $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>
-</div>
-<form>
-<p><a class="{!}fp-select-confirm" href="#">'.get_string('getfile', 'repository').'</a>
-<a class="{!}fp-select-cancel" href="#">'.get_string('cancel').'</a></p>
-<p class="fp-hr">&nbsp;</p>
-<table width="100%">
-<tr class="{!}fp-saveas"><td class="mdl-right"><label>'.get_string('saveas', 'repository').'</label>:</td>
-<td class="mdl-left"><input type="text"/></td></tr>
-<tr class="{!}fp-linktype-2"><td></td>
-<td class="mdl-left"><input type="radio"/><label>'.get_string('makefileinternal', 'repository').'</label></td></tr>
-<tr class="{!}fp-linktype-1"><td></td>
-<td class="mdl-left"><input type="radio"/><label>'.get_string('makefilelink', 'repository').'</label></td></tr>
-<tr class="{!}fp-linktype-4"><td></td>
-<td class="mdl-left"><input type="radio"/><label>'.get_string('makefilereference', 'repository').'</label></td></tr>
-<tr class="{!}fp-setauthor"><td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
-<td class="mdl-left"><input type="text" /></td></tr>
-<tr class="{!}fp-setlicense"><td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
-<td class="mdl-left"><select></select></td></tr>
-</table>
-</form>
-<p class="{!}fp-thumbnail"></p>
-<div class="fp-fileinfo">
-<div class="{!}fp-datemodified">'.get_string('lastmodified', 'moodle').': <span class="fp-value"/></div>
-<div class="{!}fp-datecreated">'.get_string('datecreated', 'repository').': <span class="fp-value"/></div>
-<div class="{!}fp-size">'.get_string('size', 'repository').': <span class="fp-value"/></div>
-<div class="{!}fp-license">'.get_string('license', 'moodle').': <span class="fp-value"/></div>
-<div class="{!}fp-author">'.get_string('author', 'repository').': <span class="fp-value"/></div>
-<div class="{!}fp-dimensions">'.get_string('dimensions', 'repository').': <span class="fp-value"/></div>
-</div>
+        $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>
+    </div>
+    <form>
+        <div>
+            <a class="{!}fp-select-confirm fp-panel-button" href="#">'.get_string('getfile', 'repository').'</a>
+            <a class="{!}fp-select-cancel fp-panel-button" href="#">'.get_string('cancel').'</a>
+        </div>
+        <div class="fp-hr"></div>
+        <table>
+            
+            <tr class="{!}fp-linktype-2">
+                <td></td>
+                <td class="mdl-left"><input type="radio"/><label>'.get_string('makefileinternal', 'repository').'</label></td></tr>
+            <tr class="{!}fp-linktype-1">
+                <td></td>
+                <td class="mdl-left"><input type="radio"/><label>'.get_string('makefilelink', 'repository').'</label></td></tr>
+            <tr class="{!}fp-linktype-4">
+                <td></td>
+                <td class="mdl-left"><input type="radio"/><label>'.get_string('makefilereference', 'repository').'</label></td></tr>
+            <tr class="{!}fp-saveas">
+                <td class="mdl-right"><label>'.get_string('saveas', 'repository').'</label>:</td>
+                <td class="mdl-left"><input type="text"/></td></tr>
+            <tr class="{!}fp-setauthor">
+                <td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
+                <td class="mdl-left"><input type="text" /></td></tr>
+            <tr class="{!}fp-setlicense">
+                <td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
+                <td class="mdl-left"><select></select></td></tr>
+        </table>
+    </form>
+    <p class="{!}fp-thumbnail"></p>
+    <div class="fp-fileinfo">
+        <div class="{!}fp-datemodified">'.get_string('lastmodified', 'moodle').': <span class="fp-value"/></div>
+        <div class="{!}fp-datecreated">'.get_string('datecreated', 'repository').': <span class="fp-value"/></div>
+        <div class="{!}fp-size">'.get_string('size', 'repository').': <span class="fp-value"/></div>
+        <div class="{!}fp-license">'.get_string('license', 'moodle').': <span class="fp-value"/></div>
+        <div class="{!}fp-author">'.get_string('author', 'repository').': <span class="fp-value"/></div>
+        <div class="{!}fp-dimensions">'.get_string('dimensions', 'repository').': <span class="fp-value"/></div>
+    </div>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -659,30 +694,27 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_uploadform() {
-        $rv = '<div class="fp-upload-form mdl-align">
-<div class="fp-content-center">            
-<form enctype="multipart/form-data" method="POST">
-  <table >
-    <tr class="{!}fp-file">
-      <td class="mdl-right"><label>'.get_string('attachment', 'repository').'</label>:</td>
-      <td class="mdl-left"><input type="file"/></td>
-    </tr>
-    <tr class="{!}fp-saveas">
-      <td class="mdl-right"><label>'.get_string('saveas', 'repository').'</label>:</td>
-      <td class="mdl-left"><input type="text"/></td>
-    </tr>
-    <tr class="{!}fp-setauthor">
-      <td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
-      <td class="mdl-left"><input type="text"/></td>
-    </tr>
-    <tr class="{!}fp-setlicense">
-      <td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
-      <td class="mdl-left"><select/></td>
-    </tr>
-  </table>
-</form>
-<div><button class="{!}fp-upload-btn">'.get_string('upload', 'repository').'</button></div>
-</div>
+        $rv = '
+<div class="fp-upload-form mdl-align">
+    <div class="fp-content-center">            
+        <form enctype="multipart/form-data" method="POST">
+            <table >
+                <tr class="{!}fp-file">
+                    <td class="mdl-right"><label>'.get_string('attachment', 'repository').'</label>:</td>
+                    <td class="mdl-left"><input type="file"/></td></tr>
+                <tr class="{!}fp-saveas">
+                    <td class="mdl-right"><label>'.get_string('saveas', 'repository').'</label>:</td>
+                    <td class="mdl-left"><input type="text"/></td></tr>
+                <tr class="{!}fp-setauthor">
+                    <td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
+                    <td class="mdl-left"><input type="text"/></td></tr>
+                <tr class="{!}fp-setlicense">
+                    <td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
+                    <td class="mdl-left"><select/></td></tr>
+            </table>
+        </form>
+        <div><button class="{!}fp-upload-btn">'.get_string('upload', 'repository').'</button></div>
+    </div>
 </div> ';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -693,9 +725,10 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_loading() {
-        return '<div style="text-align:center">
-<img src="'.$this->pix_url('i/loading').'" />
-<p>'.get_string('loading', 'repository').'</p>
+        return '
+<div style="text-align:center">
+    <img src="'.$this->pix_url('i/loading').'" />
+    <p>'.get_string('loading', 'repository').'</p>
 </div>';
     }
 
@@ -709,7 +742,8 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_error() {
-        $rv = '<div class="fp-content-error" ><div class="{!}fp-error" /></div>';
+        $rv = '
+<div class="fp-content-error" ><div class="{!}fp-error" /></div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
 
@@ -727,10 +761,11 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_message() {
-        $rv = '<div class="fp-msg">
-                    <div class="{!}fp-msg-text"></div>
-                    <div><button class="{!}fp-msg-butok">'.get_string('ok').'</button></div>
-                </div>';
+        $rv = '
+<div class="file-picker fp-msg">
+    <p class="{!}fp-msg-text"></p>
+    <a class="{!}fp-msg-butok fp-panel-button">'.get_string('ok').'</a>
+</div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
 
@@ -749,14 +784,16 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_processexistingfile() {
-        $rv = '<div class="fp-dlg"><div class="{!}fp-dlg-text"></div>
-<div class="fp-dlg-but"><button class="{!}fp-dlg-butoverwrite" >'.get_string('overwrite', 'repository').'</button></div>
-<div class="fp-dlg-but"><button class="{!}fp-dlg-butrename" /></div>
-<div class="fp-dlg-but"><button class="{!}fp-dlg-butcancel" >'.get_string('cancel').'</button></div>
+        $rv = '
+<div class="file-picker fp-dlg">
+    <p class="{!}fp-dlg-text"></p>
+    <a class="{!}fp-dlg-butoverwrite fp-panel-button" >'.get_string('overwrite', 'repository').'</a>
+    <a class="{!}fp-dlg-butcancel fp-panel-button" >'.get_string('cancel').'</a>
+    <a class="{!}fp-dlg-butrename fp-panel-button" />
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
-
+   
     /**
      * FilePicker JS template for repository login form including templates for each element type
      *
@@ -782,36 +819,28 @@ class core_files_renderer extends plugin_renderer_base {
     private function fp_js_template_loginform() {
         $rv = '
 <div class="fp-login-form">
-<div class="fp-content-center">
-  <form>
-    <table >
-      <tr class="{!}fp-login-popup">
-        <td colspan="2">
-          <label>'.get_string('popup', 'repository').'</label>
-          <p class="fp-popup"><button class="{!}fp-login-popup-but">'.get_string('login', 'repository').'</button></p>
-        </td>
-      </tr>
-      <tr class="{!}fp-login-textarea">
-        <td colspan="2"><p><textarea></textarea></p></td>
-      </tr>
-      <tr class="{!}fp-login-select">
-        <td align="right"><label></label></td>
-        <td align="left"><select></select></td>
-      </tr>
-      <tr class="{!}fp-login-input">
-        <td class="label"><label /></td>
-        <td class="input"><input/></td>
-      </tr>
-      <tr class="{!}fp-login-radiogroup">
-        <td align="right" width="30%" valign="top"><label /></td>
-        <td align="left" valign="top">
-          <p class="{!}fp-login-radio"><input /> <label /></p>
-        </td>
-      </tr>
-    </table>
-    <p><button class="{!}fp-login-submit">'.get_string('submit', 'repository').'</button></p>
-  </form>
-</div>
+    <div class="fp-content-center">
+        <form>
+            <table >
+                <tr class="{!}fp-login-popup">
+                    <td colspan="2">
+                        <label>'.get_string('popup', 'repository').'</label>
+                        <p class="fp-popup"><button class="{!}fp-login-popup-but">'.get_string('login', 'repository').'</button></p></td></tr>
+                <tr class="{!}fp-login-textarea">
+                    <td colspan="2"><p><textarea></textarea></p></td></tr>
+                <tr class="{!}fp-login-select">
+                    <td align="right"><label></label></td>
+                    <td align="left"><select></select></td></tr>
+                <tr class="{!}fp-login-input">
+                    <td class="label"><label /></td>
+                    <td class="input"><input/></td></tr>
+                <tr class="{!}fp-login-radiogroup">
+                    <td align="right" width="30%" valign="top"><label /></td>
+                    <td align="left" valign="top"><p class="{!}fp-login-radio"><input /> <label /></p></td></tr>
+            </table>
+            <p><button class="{!}fp-login-submit">'.get_string('submit', 'repository').'</button></p>
+        </form>
+    </div>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
diff --git a/pix/a/add_file.png b/pix/a/add_file.png
new file mode 100644 (file)
index 0000000..57d559e
Binary files /dev/null and b/pix/a/add_file.png differ
diff --git a/pix/a/create_folder.png b/pix/a/create_folder.png
new file mode 100644 (file)
index 0000000..643bc98
Binary files /dev/null and b/pix/a/create_folder.png differ
diff --git a/pix/a/download_all.png b/pix/a/download_all.png
new file mode 100644 (file)
index 0000000..7520b39
Binary files /dev/null and b/pix/a/download_all.png differ
diff --git a/pix/y/lm.gif b/pix/y/lm.gif
deleted file mode 100644 (file)
index b562300..0000000
Binary files a/pix/y/lm.gif and /dev/null differ
diff --git a/pix/y/lm.png b/pix/y/lm.png
new file mode 100644 (file)
index 0000000..0b112ab
Binary files /dev/null and b/pix/y/lm.png differ
diff --git a/pix/y/lmh.gif b/pix/y/lmh.gif
deleted file mode 100644 (file)
index a17fe23..0000000
Binary files a/pix/y/lmh.gif and /dev/null differ
diff --git a/pix/y/ln.png b/pix/y/ln.png
new file mode 100644 (file)
index 0000000..d2ac508
Binary files /dev/null and b/pix/y/ln.png differ
diff --git a/pix/y/lp.gif b/pix/y/lp.gif
deleted file mode 100644 (file)
index b9f5485..0000000
Binary files a/pix/y/lp.gif and /dev/null differ
diff --git a/pix/y/lp.png b/pix/y/lp.png
new file mode 100644 (file)
index 0000000..2bad8e5
Binary files /dev/null and b/pix/y/lp.png differ
diff --git a/pix/y/lph.gif b/pix/y/lph.gif
deleted file mode 100644 (file)
index f663714..0000000
Binary files a/pix/y/lph.gif and /dev/null differ
diff --git a/pix/y/tm.gif b/pix/y/tm.gif
deleted file mode 100644 (file)
index 56622cc..0000000
Binary files a/pix/y/tm.gif and /dev/null differ
diff --git a/pix/y/tm.png b/pix/y/tm.png
new file mode 100644 (file)
index 0000000..0b112ab
Binary files /dev/null and b/pix/y/tm.png differ
diff --git a/pix/y/tmh.gif b/pix/y/tmh.gif
deleted file mode 100644 (file)
index e42349e..0000000
Binary files a/pix/y/tmh.gif and /dev/null differ
diff --git a/pix/y/tp.gif b/pix/y/tp.gif
deleted file mode 100644 (file)
index 906e8c4..0000000
Binary files a/pix/y/tp.gif and /dev/null differ
diff --git a/pix/y/tp.png b/pix/y/tp.png
new file mode 100644 (file)
index 0000000..2bad8e5
Binary files /dev/null and b/pix/y/tp.png differ
diff --git a/pix/y/tph.gif b/pix/y/tph.gif
deleted file mode 100644 (file)
index 8aa7c25..0000000
Binary files a/pix/y/tph.gif and /dev/null differ
diff --git a/theme/base/pix/fp/dnd_arrow.png b/theme/base/pix/fp/dnd_arrow.png
new file mode 100644 (file)
index 0000000..771f95a
Binary files /dev/null and b/theme/base/pix/fp/dnd_arrow.png differ
index 559f39a..1d1c1ea 100644 (file)
@@ -1,78 +1,36 @@
 /**
- * File picker
+ * File Picker and File Manager
  */
-/* first or middle sibling, no children */
-.file-picker .ygtvtn, .filemanager .ygtvtn {background: url([[pix:moodle|y/tn]]) 0 0 no-repeat;width:17px;height:22px;}
-/* first or middle sibling, collapsable */
-.file-picker .ygtvtm, .filemanager .ygtvtm {background: url([[pix:moodle|y/tm]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* first or middle sibling, collapsable, hover */
-.file-picker .ygtvtmh, .filemanager .ygtvtmh {background: url([[pix:moodle|y/tmh]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* first or middle sibling, expandable */
-.file-picker .ygtvtp, .filemanager .ygtvtp {background: url([[pix:moodle|y/tp]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* first or middle sibling, expandable, hover */
-.file-picker .ygtvtph, .filemanager .ygtvtph {background: url([[pix:moodle|y/tph]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* last sibling, no children */
-.file-picker .ygtvln, .filemanager .ygtvln {background: url([[pix:moodle|y/ln]]) 0 0 no-repeat;width:17px;height:22px;}
-/* Last sibling, collapsable */
-.file-picker .ygtvlm, .filemanager .ygtvlm {background: url([[pix:moodle|y/lm]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* Last sibling, collapsable, hover */
-.file-picker .ygtvlmh, .filemanager .ygtvlmh {background: url([[pix:moodle|y/lmh]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* Last sibling, expandable */
-.file-picker .ygtvlp, .filemanager .ygtvlp {background: url([[pix:moodle|y/lp]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* Last sibling, expandable, hover */
-.file-picker .ygtvlph, .filemanager .ygtvlph {background: url([[pix:moodle|y/lph]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
-/* Loading icon */
-.file-picker .ygtvloading, .filemanager .ygtvloading {background: url([[pix:moodle|y/loading]]) 0 0 no-repeat;width:16px;height:22px;}
-/* the style for the empty cells that are used for rendering the depth* of the node */
-.file-picker .ygtvdepthcell, .filemanager .ygtvdepthcell {background: url([[pix:moodle|y/vline]]) 0 0 no-repeat;width:17px;height:22px;}
-.file-picker .ygtvblankdepthcell, .filemanager .ygtvblankdepthcell {width:17px;height:22px;}
-/* the style of the div around each node */
-.file-picker .ygtvitem  table, .filemanager .ygtvitem  table{margin-bottom:0;}
-.file-picker .ygtvitem  td, .filemanager .ygtvitem  td {border:none;padding:0;}
-/* the style of the div around each node's collection of children */
-* html .file-picker .ygtvchildren, * html .filemanager .ygtvchildren {height:1%;}
-/* the style of the text label in ygTextNode */
-.file-picker .ygtvlabel,
-.file-picker .ygtvlabel:link,
-.file-picker .ygtvlabel:visited,
-.file-picker .ygtvlabel:hover,
-.filemanager .ygtvlabel,
-.filemanager .ygtvlabel:link,
-.filemanager .ygtvlabel:visited,
-.filemanager .ygtvlabel:hover {margin-left:2px;text-decoration: none;}
-.file-picker .fp-treeview .fp-folder .fp-icon,
-.filemanager .fp-treeview .fp-folder .fp-icon {display:none;}
-
-.file-picker {font-size:12px;}
-.file-picker.fp-generallayout {width:700px;height:480px;}
-
-
-.file-picker {font-size:11px;color: #555;letter-spacing: .2px;}
-.file-picker a {color:#555;}
-.file-picker a:hover {color:#555;text-decoration: none;}
-.file-picker select, input, button, textarea {/*font: 99% arial,helvetica,clean,sans-serif;*/color:#555;letter-spacing: .2px;}
-.file-picker input {border: 1px solid #BBB;width: 265px;height: 18px;padding: 1px 6px;}
-.file-picker select {height: 22px;padding: 2px 1px;}
-.file-picker strong {background:#FFFFCC;}
-.file-picker .fp-content-center {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
+.filemanager, .file-picker {font-size:11px;color: #555;letter-spacing: .2px;}
+.filemanager a, .file-picker a {color:#555;}
+.filemanager a:hover, .file-picker a:hover {color:#555;text-decoration: none;}
+.filemanager select, input, button, textarea,
+.file-picker select, input, button, textarea {color:#555;letter-spacing: .2px;}
+.filemanager input, .file-picker input {border: 1px solid #BBB;width: 265px;height: 18px;padding: 1px 6px;}
+.filemanager select, .file-picker select {height: 22px;padding: 2px 1px;}
+.fp-content-center {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
 
 /*
- * Layout
+ * Dialogue (File Picker and File Manager)
  */
-.file-picker.fp-generallayout {/*width: 724px;*/min-width: 724px;max-width: 980px;border: none;border:1px solid #CCC;border-radius:10px;position: relative;}
-.file-picker .fp-wrapper {width:724px;}
-.file-picker .yui3-widget-hd {border-radius: 10px 10px 0px 0px;border-bottom: 1px solid #BBB;padding:5px 5px 5px 5px!important;text-align: center;font-size:12px;letter-spacing: 1px;color:#333!important; text-shadow: 1px 1px 1px #FFF;filter: dropshadow(color=#FFF, offx=1, offy=1);
+.yui3-panel-content {padding-bottom: 20px!important;background: #F2F2F2!important;border-radius: 8px;border: 1px solid #FFF!important;display: inline-block;-webkit-box-shadow: 5px 5px 20px 0px #666!important;-moz-box-shadow: 5px 5px 20px 0px #666!important;box-shadow: 5px 5px 20px 0px #666!important;}
+.yui3-widget-hd {border-radius: 10px 10px 0px 0px;border-bottom: 1px solid #BBB;padding:5px 5px 5px 5px!important;text-align: center;font-size:12px;letter-spacing: 1px;color:#333!important; text-shadow: 1px 1px 1px #FFF;filter: dropshadow(color=#FFF, offx=1, offy=1);
 background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#CCC')!important;background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC))!important;background: -moz-linear-gradient(top,  #FFF,  #CCC)!important;}
+.fp-panel-button {background: #FFF;padding: 3px 20px 2px 20px; text-align: center;margin:10px; border-radius: 10px;display: inline-block;-webkit-box-shadow: 2px 2px 3px .1px #999;-moz-box-shadow: 2px 2px 3px .1px #999;box-shadow: 2px 2px 3px .1px #999;}
+
+/*
+ * File Picker layout
+ */
+.file-picker.fp-generallayout {width: 724px;background: #FFF!important;border-radius:10px;border: 1px solid #CCC!important;position: relative;}
 .file-picker .fp-repo-area {width:180px;overflow:auto;display:inline-block;border-right:1px solid #BBB;position:absolute;top:26px;bottom:1px;}
-.file-picker .fp-right {background: yellow;height: auto;}
 .file-picker .fp-repo-items {vertical-align:top;display: inline-block;margin-left: 181px;}
-.file-picker .fp-navbar {background: #F2F2F2;min-height:27px;border-bottom: 1px solid #BBB;padding: 5px 8px;/*position: absolute;left:182px;right:0px;*/width:527px;}
-.file-picker .fp-content {background: #FFF;clear: both;overflow:auto;/*resize:both;*/width: 543px;min-width: 543px;max-width: 780px;height: 349px;min-height: 349px;max-height: 700px;/*border-bottom-right-radius: 10px;*//*top:100px;position: relative;*/margin-bottom: 6px;}
-.file-picker .fp-repo-items p{width: auto;}
+.file-picker .fp-navbar {background: #F2F2F2;min-height:22px;border-bottom: 1px solid #BBB;padding: 5px 8px;}
+.file-picker .fp-content {background: #FFF;clear: both;overflow:auto;width: 543px;height: 349px;margin-bottom:-14px;}
 .file-picker .fp-content .fp-object-container {width:98%;height:98%;}
 
 /*
- * Repositories
+ * Repositories on fp-repo-area (File Picker only)
  */
 .file-picker .fp-list {list-style-type:none;padding:0;float:left;width:100%;margin:0;}
 .dir-rtl .file-picker .fp-list {text-align:right;}
@@ -81,174 +39,235 @@ background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(st
 .file-picker .fp-repo-icon {padding: 0px 7px 0px 5px;}
 
 /*
- * Repository tools, path & view
+ * Tools, Path & View on fp-navbar (File Picker and File Manager)
  */
-.file-picker .fp-viewbar {float:right;width:69px;height:22px;/*margin-top:3px;*/margin-right:8px;}
-.file-picker .fp-viewbar.disabled {/*display:none;*/}
-.file-picker .fp-vb-icons {background:url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;width:22px;height:22px;display: inline-block;}
-.file-picker .fp-vb-icons.checked {background:url('[[pix:theme|fp/view_icon_selected]]');}
-.file-picker .fp-viewbar.disabled .fp-vb-icons {background:url('[[pix:theme|fp/view_icon_inactive]]');}
-.file-picker .fp-vb-details {background:url('[[pix:theme|fp/view_list_active]]') no-repeat 0px 0px;width:23px;height:22px;display: inline-block;/*margin-left: -4px;*/margin-left: -3px;}
-.file-picker .fp-vb-details.checked {background:url('[[pix:theme|fp/view_list_selected]]');}
-.file-picker .fp-viewbar.disabled .fp-vb-details {background:url('[[pix:theme|fp/view_list_inactive]]');}
-.file-picker .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_active]]') no-repeat 0px 0px;width:23px;height:22px;display: inline-block;/*margin-left: -4px;*/margin-left: -4px;}
-.file-picker .fp-vb-tree.checked {background:url('[[pix:theme|fp/view_tree_selected]]');}
-.file-picker .fp-viewbar.disabled .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_inactive]]');}
-
-.file-picker .fp-toolbar {/*padding:7px 0px 0px 0px;*/display: table-row;}
-.file-picker .fp-toolbar.empty {display:none;}
-.file-picker .fp-toolbar .disabled {display:none;}
-.file-picker .fp-toolbar div {display: inline-block;padding: 0px 2px 2px;}
-.file-picker .fp-toolbar img {vertical-align: -20%;margin-right: 5px;}
-.file-picker .fp-toolbar a {}
-.file-picker .fp-toolbar .fp-search {}
-.file-picker .fp-searchbar {}
-.file-picker .search-entry {background:#FFF url('[[pix:a/search]]') no-repeat 3px 3px;height:18px;width:230px;border: 1px solid #BBB;padding-left:20px;/*margin-left: 7px;*/}
+.fp-toolbar {display: table-row;line-height: 22px;}
+.fp-toolbar.empty {display:none;}
+.fp-toolbar .disabled {display:none;}
+.fp-toolbar div {display: inline-block;padding: 0px 2px;}
+.fp-toolbar img {vertical-align: -15%; margin-right: 5px;}
+.file-picker .search-entry {background:#FFF url('[[pix:a/search]]') no-repeat 3px 3px;height:18px;width:230px;border: 1px solid #BBB;padding-left:20px;}
 
 .file-picker .fp-pathbar {display: table-row;}
-.file-picker .fp-pathbar .fp-path-folder {background:url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;width:27px;height:12px;margin-left: 4px;}
-.file-picker .fp-pathbar .fp-path-folder-name {margin-left: 32px;line-height: 20px;}
+.fp-pathbar .fp-path-folder {background:url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;width:27px;height:12px;margin-left: 4px;}
+.fp-pathbar .fp-path-folder-name {margin-left: 32px;line-height: 20px;}
+
+.fp-viewbar {float:right;width:69px;height:22px;margin-right:8px;}
+.fp-vb-icons {background:url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;width:22px;height:22px;display: inline-block;}
+.fp-vb-icons.checked {background:url('[[pix:theme|fp/view_icon_selected]]');}
+.fp-viewbar.disabled .fp-vb-icons {background:url('[[pix:theme|fp/view_icon_inactive]]');}
+.fp-vb-details {background:url('[[pix:theme|fp/view_list_active]]') no-repeat 0px 0px;width:23px;height:22px;display: inline-block;margin-left: -4px;}
+.fp-vb-details.checked {background:url('[[pix:theme|fp/view_list_selected]]');}
+.fp-viewbar.disabled .fp-vb-details {background:url('[[pix:theme|fp/view_list_inactive]]');}
+.fp-vb-tree {background:url('[[pix:theme|fp/view_tree_active]]') no-repeat 0px 0px;width:23px;height:22px;display: inline-block;margin-left: -4px;}
+.fp-vb-tree.checked {background:url('[[pix:theme|fp/view_tree_selected]]');}
+.fp-viewbar.disabled .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_inactive]]');}
 
 /*
- * Icon view
+ * Icon view (File Picker and File Manager)
  */
-.file-picker .fp-iconview .fp-file {float:left;display: block;text-align:center;padding: 5px 5px;}
-.file-picker .fp-iconview .fp-thumbnail {/*overflow: hidden;*/display: table-cell;vertical-align: middle;}
-.file-picker .fp-iconview .fp-thumbnail img {border: 1px solid #CCC;padding: 3px;-webkit-box-shadow: 1px 1px 2px 0px #CCC;-moz-box-shadow: 1px 1px 2px 0px #CCC;box-shadow: 1px 1px 2px 0px #CCC;}
-/*.file-picker .fp-iconview .fp-file .fp-thumbnail.over {border:1px solid red;}*/
-.file-picker .fp-iconview .fp-filename {height:28px;min-width:50px;word-wrap:break-word;padding-top: 5px;overflow: hidden;}
+.fp-iconview .fp-file {float:left;display: block;text-align:center;padding: 5px 5px;margin-bottom: 33px;position: relative;}
+.fp-iconview .fp-thumbnail {display: table-cell;vertical-align: middle;}
+.fp-iconview .fp-thumbnail img {border: 1px solid #CCC;padding: 3px;-webkit-box-shadow: 1px 1px 2px 0px #CCC;-moz-box-shadow: 1px 1px 2px 0px #CCC;box-shadow: 1px 1px 2px 0px #CCC;}
+.fp-iconview .fp-file .fp-thumbnail:hover {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;}
+.fp-iconview .fp-filename {height:28px;min-width:50px;word-wrap:break-word;padding-top: 5px;overflow: hidden;position: absolute;}
+.fp-iconview .fp-filename:hover {overflow: visible;z-index: 1000;background-color: #FFF;position:absolute;display: table;padding-bottom: 12px;}
 
 /*
- * Table view
+ * Table view (File Picker only)
  */
 .file-picker .yui3-datatable table {border: 0px solid #BBB;width:100%;}
 .file-picker .yui3-datatable-header {background: #FFF;border-bottom: 1px solid #CCC;border-left: 0 solid #FFF;color: #555;}
 .file-picker .yui3-datatable-columns .yui3-datatable-sorted, .file-picker .yui3-datatable-sortable-column:hover {background-color: #FFF;}
-.file-picker .yui3-datatable-odd .yui3-datatable-cell {background-color: #F2F2F2;border-left: 0px solid #F2F2F2;}
-.file-picker .yui3-datatable-data .yui3-datatable-odd .yui3-datatable-sorted {background-color: #F2F2F2;}
+.file-picker .yui3-datatable-odd .yui3-datatable-cell {background-color: #F6F6F6;border-left: 0px solid #F6F6F6;}
+.file-picker .yui3-datatable-data .yui3-datatable-odd .yui3-datatable-sorted {background-color: #F6F6F6;}
 .file-picker .yui3-datatable-even .yui3-datatable-cell {background-color: #FFF;border-left: 0px solid #FFF;}
 .file-picker .yui3-datatable-data .yui3-datatable-even .yui3-datatable-sorted {background-color: #FFF;}
 .file-picker .fp-icon img {max-height:16px;max-width:16px;}
 
 /*
- * Login
+ * Tree view (File Picker and File Manager)
+ */
+/*.file-picker .fp-treeview .fp-folder .fp-icon, .filemanager .fp-treeview .fp-folder .fp-icon {}*/
+/* first or middle sibling, no children */
+/*.file-picker .ygtvtn, .filemanager*/ .ygtvtn {background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;width:17px;height:22px;}
+/* first or middle sibling, collapsable */
+/*.file-picker .ygtvtm, .filemanager*/ .ygtvtm {background: url('[[pix:moodle|y/tm]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* first or middle sibling, collapsable, hover */
+/*.file-picker .ygtvtmh, .filemanager*/ .ygtvtmh {background: url('[[pix:moodle|y/tm]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* first or middle sibling, expandable */
+/*.file-picker .ygtvtp, .filemanager*/ .ygtvtp {background: url('[[pix:moodle|y/tp]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* first or middle sibling, expandable, hover */
+/*.file-picker .ygtvtph, .filemanager*/ .ygtvtph {background: url('[[pix:moodle|y/tp]]') 0 0 no-repeat;width:13px;height:22px;cursor:pointer;}
+/* last sibling, no children */
+/*.file-picker .ygtvln, .filemanager*/ .ygtvln {background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;width:17px;height:22px;}
+/* Last sibling, collapsable */
+/*.file-picker .ygtvlm, .filemanager*/ .ygtvlm {background: url('[[pix:moodle|y/lm]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* Last sibling, collapsable, hover */
+/*.file-picker .ygtvlmh, .filemanager*/ .ygtvlmh {background: url('[[pix:moodle|y/lm]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* Last sibling, expandable */
+/*.file-picker .ygtvlp, .filemanager*/ .ygtvlp {background: url('[[pix:moodle|y/lp]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* Last sibling, expandable, hover */
+/*.file-picker .ygtvlph, .filemanager*/ .ygtvlph {background: url('[[pix:moodle|y/lp]]') 0 0 no-repeat;width:13px;height:12px;cursor:pointer;}
+/* Loading icon */
+/*.file-picker .ygtvloading, .filemanager*/ .ygtvloading {background: url('[[pix:moodle|y/loading]]') 0 0 no-repeat;width:16px;height:22px;}
+/* the style for the empty cells that are used for rendering the depth* of the node */
+/*.file-picker .ygtvdepthcell, .filemanager*/ .ygtvdepthcell {background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;width:17px;height:22px;}
+/*.file-picker .ygtvblankdepthcell, .filemanager*/ .ygtvblankdepthcell {width:17px;height:22px;}
+/* the style of the div around each node */
+/*.file-picker .ygtvitem  table, .filemanager .ygtvitem  table{margin-bottom:0;}*/
+/*.file-picker .ygtvitem  td, .filemanager .ygtvitem  td {border:none;padding:0;}*/
+/* the style of the div around each node's collection of children */
+/** html .file-picker .ygtvchildren, * html .filemanager .ygtvchildren {height:1%;}*/
+/* the style of the text label in ygTextNode */
+/*.file-picker .ygtvlabel,.file-picker .ygtvlabel:link,.file-picker .ygtvlabel:visited,.file-picker .ygtvlabel:hover,
+.filemanager .ygtvlabel,.filemanager .ygtvlabel:link,.filemanager .ygtvlabel:visited,.filemanager .ygtvlabel:hover {margin-left:2px;text-decoration: none;}*/
+a.ygtvspacer:hover {color: transparent;text-decoration: none;}
+.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {background-color: transparent;cursor: pointer;margin-left: 2px;text-decoration: none;}
+/*.file-picker*/ .ygtvfocus {background-color: /*#FFF*/ transparent;}
+
+/*
+ * Repositories Login on fp-content (File Picker only)
  */
 .file-picker .fp-login-form {height: 100%;width: 100%;display: table;}
 .file-picker .fp-login-form table {margin: 0 auto;}
 .file-picker .fp-login-form p {text-align: center;margin-top: 3em;}
-.file-picker .fp-login-form .fp-login-input .label {text-align: right;vertical-align: middle;/*width: 30%;*/}
+.file-picker .fp-login-form .fp-login-input .label {text-align: right;vertical-align: middle;}
 .file-picker .fp-login-form .fp-login-input .input {text-align: left;}
 .file-picker .fp-login-form input[type="checkbox"]{width: 15px;height:15px;}
 
 /*
- * Select
- */
-.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-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;}
-
-/*
- * Upload
+ * Upload on fp-content (File Picker only)
  */
 .file-picker .fp-upload-form {height: 100%;width: 100%;display: table;}
 .file-picker .fp-upload-form table {margin: 0 auto;}
-.file-picker .fp-upload-btn {/*clear:both;*/margin: 2em;}
+.file-picker .fp-upload-btn {margin: 2em;}
 
 /*
- * Error
+ * File exists dialogue on Upload (File Picker only)
  */
-.file-picker .fp-content-error {height: 100%;width: 100%;display: table;text-align: center;}
-.file-picker .fp-content-error .fp-error {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
-
-.file-picker .fp-msg {border: none;border:1px solid #CCCCCC;border-radius:10px;text-align: center;padding-bottom: 30px;}
-.file-picker .fp-msg .fp-msg-text {min-width:200px;/*min-height:50px;*/max-width:500px;max-height:300px;overflow:auto;}
-.file-picker .fp-msg.fp-msg-error .fp-msg-text {padding: 30px 40px 20px 40px;margin-bottom: 10px;}
-.file-picker .fp-msg .fp-msg-butok {}
+.file-picker.fp-dlg {text-align: center;}
+.file-picker.fp-dlg .fp-dlg-text {padding: 40px 20px 10px 20px;}
 
+/*
+ * Error dialogue on Upload (File Picker only)
+ */
+.file-picker.fp-msg {text-align: center;}
+.file-picker.fp-msg .fp-msg-text {padding: 40px 20px 10px 20px;min-width:200px;max-width:500px;max-height:300px;overflow:auto;}
+.file-picker.fp-msg.fp-msg-error .fp-msg-text {padding: 40px 20px 10px 20px;}
 
+/*
+ * Error on fp-content (File Picker only)
+ */
+.file-picker .fp-content-error {height: 100%;width: 100%;display: table;text-align: center;}
+.file-picker .fp-content-error .fp-error {height: 100%;width: 100%;display:table-cell;vertical-align: middle;padding: 40px 20px 10px 20px;}
 
+/*
+ * Lazy loading on fp-content (File Picker only)
+ */
 .file-picker .fp-nextpage {clear:both;align:center;}
 .file-picker .fp-nextpage .fp-nextpage-link {align:center;}
 .file-picker .fp-nextpage .fp-nextpage-loading {display:none;}
 .file-picker .fp-nextpage.loading .fp-nextpage-link {display:none;}
 .file-picker .fp-nextpage.loading .fp-nextpage-loading {display:block;}
-.file-picker .fp-popup {text-align:center;}
+/*
+ * Select Dialogue (File Picker and File Manager)
+ */
+.file-picker.fp-select {width:420px;}
+.fp-select .fp-hr {clear: both;height: 1px; background-color: #FFF;border-bottom: 1px solid #BBB;width: auto; margin: 5px 20px;}
+.fp-select table {margin: 10px 20px;}
 
-.filepicker-filelist {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
+/*.file-select table input[type="radio"]{text-align: left;}*/
 
-/* file picker search dialog */
-.file-picker div.bd {text-align:left;}
+.fp-select-update {float:right;width: auto;margin-right: 20px;}
+.fp-select .fp-thumbnail {float:left;min-width:110px;min-height:110px;line-height: 110px;text-align: center;margin: 10px 20px 0px 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;}
+.fp-select .fp-thumbnail img {border: 1px solid #CCC;padding:3px;vertical-align: middle;margin: 10px;}
+.fp-select .fp-fileinfo {display: inline-block;margin-top: 4px;margin-right: 20px;}
+.file-picker.fp-select .fp-fileinfo {/*width:240px;*/}
+.fp-select .fp-fileinfo div {padding: 4px 0px;}
 
-/**
+.file-picker.fp-select .uneditable {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 form {display:none;}
+
+ /*
  * File Manager
  */
-.filemanager-toolbar {margin: 5px 0;}
-.filemanager-toolbar a {border: 1px solid #AACCEE;background: #F4FAFF;color: black;padding: 3px;}
-.filemanager-toolbar a:hover {background: #FFFFFF;}
-.filemanager-toolbar .helplink a {border: 0px; background: transparent;}
-.fp-pathbar {margin:0;}
-.filemanager .fp-pathbar.empty {display:none;}
-.filemanager-container {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid;position: relative;}
-.filemanager-container ul{margin:0;padding:0;}
-.filemanager-container ul li{white-space:nowrap;list-style-type:none;}
-.filemanager-container ul li a{padding:0}
 .filemanager-loading{display:none}
 .jsenabled .filemanager-loading{display:block}
-.fm-menuicon{cursor: pointer;}
-#fm-move-div {margin: 6px;}
-#fm-move-div strong{color:red;}
-.fm-file-entry{border: 1px solid red;}
-.fm-operation {font-weight: bold;}
-
-.filemanager-container,
-.filepicker-filelist {overflow:hidden;}
-
-.filemanager.fm-loading .fp-pathbar,
 .filemanager.fm-loading .filemanager-toolbar,
+.filemanager.fm-loading .fp-pathbar,
 .filemanager.fm-loading .filemanager-container {display:none;}
-
 .filemanager.fm-loaded .filemanager-loading {display:none;}
-
-.filemanager.fm-nofiles .fp-btn-download {display:none;}
-
-.filemanager.fm-nomkdir .fp-btn-mkdir {display:none;}
-
 .filemanager.fm-maxfiles .fp-btn-add {display:none;}
 .filemanager.fm-maxfiles .dndupload-message {display:none;}
-
+.filemanager.fm-nofiles .fp-btn-download {display:none;}
 .filemanager .fm-empty-container {display:none;}
-.filemanager.fm-noitems .fm-empty-container {display:block;}
 .filemanager.fm-noitems .filemanager-container .fp-content {display:none;}
-
 .filemanager .filemanager-updating {display:none;text-align:center;}
 .filemanager.fm-updating .filemanager-updating {display:block;}
 .filemanager.fm-updating .fm-content-wrapper {display:none;}
-.filemanager .fp-iconview .fp-file {float:left;text-align:center;}
-.filemanager .fp-iconview .fp-file div {overflow: hidden;}
-.filemanager .fp-iconview .fp-file .fp-filename {height:48px;text-align:center;min-width:50px;}
-.filemanager .fp-mainfile .fp-filename {font-weight:bold;}
+.filemanager.fm-nomkdir .fp-btn-mkdir {display:none;}
+
+ /*
+ * File Manager layout
+ */
+.fp-restrictions{text-align: right;}
+.filemanager .fp-navbar {background: #F2F2F2;border-top: 1px solid #BBB;border-left: 1px solid #BBB;border-right: 1px solid #BBB;}
+.filemanager-toolbar{padding: 5px 8px;min-height:22px;}
+.fp-pathbar {border-top: 1px solid #BBB;padding: 5px 8px 1px;min-height: 20px;}
+.filemanager .fp-pathbar.empty {display:none;}
+.filemanager-container {background: #FFF;clear: both;overflow:auto;border: 1px solid #BBB;min-height: 140px;position: relative;}
+/*.filemanager-container ul{margin:0;padding:0;}
+.filemanager-container ul li{white-space:nowrap;list-style-type:none;}
+.filemanager-container ul li a{padding:0}*/
+.filemanager .fp-content{overflow: auto;max-height: 400px;}
+.filepicker-filelist {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
+.filemanager-container, .filepicker-filelist {overflow:hidden;}
+
+/*
+ * Table view (File Manager only)
+ */
+.filemanager .yui3-datatable table {border: 0px solid #BBB;width:100%;}
+.filemanager .yui3-datatable-header {background: #FFF;border-bottom: 1px solid #CCC;border-left: 0 solid #FFF;color: #555;}
+.filemanager .yui3-datatable-columns .yui3-datatable-sorted, .filemanager .yui3-datatable-sortable-column:hover {background-color: #FFF;}
+.filemanager .yui3-datatable-odd .yui3-datatable-cell {background-color: #F6F6F6;border-left: 0px solid #F6F6F6;}
+.filemanager .yui3-datatable-data .yui3-datatable-odd .yui3-datatable-sorted {background-color: #F6F6F6;}
+.filemanager .yui3-datatable-even .yui3-datatable-cell {background-color: #FFF;border-left: 0px solid #FFF;}
+.filemanager .yui3-datatable-data .yui3-datatable-even .yui3-datatable-sorted {background-color: #FFF;}
+
+/*
+ * Drag and drop support (File Manager only)
+ */
+.filemanager.fm-noitems .fm-empty-container {display:block;position: absolute; top: 10px;bottom: 10px;left:10px;right: 10px;border: 2px dashed #BBB;padding-top: 85px;}
+.filemanager-container .dndupload-target,
+.filepicker-filelist .dndupload-target {background:#FFF;position:absolute;top:10px;left:10px;bottom:10px;right:10px;text-align:center;z-index:1000;border: 2px dashed #BBB;padding-top: 85px;-webkit-box-shadow:  0px 0px 0px 10px #FFF;-moz-box-shadow: 0px 0px 0px 10px #FFF;box-shadow:  0px 0px 0px 10px #FFF;}
+.filemanager-container.dndupload-over .dndupload-target,
+.filepicker-filelist.dndupload-over .dndupload-target {background:#FFF;position:absolute;top:10px;left:10px;bottom:10px;right:10px;border: 2px dashed #4c70c3;padding-top: 85px;}
+.dndupload-message {display:none;}
+.dndsupported .dndupload-message {display:inline;}
+.dndupload-target {display:none;}
+.dndsupported .dndupload-ready .dndupload-target {display:block;}
+.dndupload-uploadinprogress {display:none;text-align:center;}
+.dndupload-uploading .dndupload-uploadinprogress {display:block;}
+.dndupload-arrow {background:url('[[pix:theme|fp/dnd_arrow]]') 0 0 no-repeat;width:56px;height:47px;position:absolute;left: 45%;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite;}@keyframes mymove {0%{top:10px;} 12%{top:40px;} 30%{top:20px} 65%{top:35px;} 100%{top:9px;}}@-moz-keyframes mymove{0%{top:10px;} 12%{top:40px;} 30%{top:20px} 65%{top:35px;} 100%{top:9px;}}@-webkit-keyframes mymove {0%{top:10px;} 12%{top:40px;} 30%{top:20px} 65%{top:35px;} 100%{top:9px;}}
 
+/*
+ * Folder Context Menu (File Manager only)
+ */
 .filemanager .fp-contextmenu {display:none;}
-.filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:block;position:absolute;right:0px;top:0px;}
+.filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:block;position:absolute;right:7px;bottom:5px;}
 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:inline;}
 
+/*
+ * Select Dialogue (File Manager only)
+ */
 .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,
@@ -260,26 +279,35 @@ background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(st
 .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-mainfile .fp-filename {font-weight:bold;}
 .filemanager.fp-select.fp-folder .fp-file-download {display:none;} /* to be implemented */
+.fm-operation {font-weight: bold;}
 
 .filemanager .fp-iconview .fp-reficons {position:absolute;height:100%;width:100%;top:0;left:0;z-index:1000;}
-.filemanager .fp-iconview .fp-file.fp-hasreferences .fp-reficons {background: url([[pix:moodle|t/lock]]) no-repeat;background-position:bottom left;}
-.filemanager .fp-iconview .fp-file.fp-isreference .fp-reficons {background: url([[pix:moodle|t/right]]) no-repeat;background-position:bottom right;}
+.filemanager .fp-iconview .fp-file.fp-hasreferences .fp-reficons {background: url('[[pix:moodle|t/lock]]') no-repeat;background-position:bottom left;}
+.filemanager .fp-iconview .fp-file.fp-isreference .fp-reficons {background: url('[[pix:moodle|t/right]]') no-repeat;background-position:bottom right;}
 
 .filemanager.fp-select .fp-original.fp-unknown {display:none;}
 .filemanager.fp-select .fp-original .fp-originloading {display:none;}
 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {display:inline;}
 
 /*
- * Drag and drop support
+ * Create folder dialogue (File Manager only)
  */
-.filemanager-container .dndupload-target,
-.filepicker-filelist .dndupload-target {background:#f7f998;position:absolute;height:100%;width:100%;top:0;left:0;text-align:center;padding:5px;z-index:1000}
-.filemanager-container.dndupload-over .dndupload-target,
-.filepicker-filelist.dndupload-over .dndupload-target {background:#8EF947;font-weight:bold}
-.dndupload-message {display:none;}
-.dndsupported .dndupload-message {display:inline;}
-.dndupload-target {display:none;}
-.dndsupported .dndupload-ready .dndupload-target {display:block;}
-.dndupload-uploadinprogress {display:none;text-align:center;}
-.dndupload-uploading .dndupload-uploadinprogress {display:block;}
+.filemanager .fp-mkdir-dlg input {margin-top: 20px;margin-left: 20px;float:left;}
+.filemanager .fp-dlg-butcreate {margin-top: 20px;margin-right: 20px;}
+
+
+/*
+ * Confirm dialogue for delete (File Manager only)
+ */
+.filemanager.fp-dlg {text-align: center;}
+.filemanager.fp-dlg .fp-dlg-text {padding: 0px 10px;min-width:200px;max-width:340px;max-height:300px;overflow:auto;line-height: 22px;margin: 40px 20px 20px 20px;}
+
+
+
+
+/* 
+ *file picker search dialog 
+ */
+.file-picker div.bd {text-align:left;}