MDL-31901 filemanager and filepicker styling

- Swaped tool buttons and view buttons sequence for keyboard access both on filemanager and filepicker
- Added "new folder name" label and "cancel" button on create a folder dialogue
- Added href="#" and resized fonts on confirmation  and message dialogue

diff --git a/files/renderer.php b/files/renderer.php
index bd5303f..e9479f7 100644 (file)
--- a/files/renderer.php
+++ b/files/renderer.php
@@ -195,16 +195,16 @@ class core_files_renderer extends plugin_renderer_base {
     </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 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>
         <div class="fp-pathbar">
             <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name" href="#"></a></span>
@@ -297,8 +297,10 @@ class core_files_renderer extends plugin_renderer_base {
     private function fm_js_template_mkdir() {
         $rv = '
 <div class="fp-mkdir-dlg">
-    <input type="text">
-    <a class="{!}fp-dlg-butcreate fp-panel-button">'.get_string('create').'</a>
+    <p>New folder name:</p>
+    <input type="text"><br/>
+    <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>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -418,10 +420,8 @@ class core_files_renderer extends plugin_renderer_base {
         $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>
+    <a class="{!}fp-dlg-butconfirm fp-panel-button" href="#">'.get_string('ok').'</a>
+    <a class="{!}fp-dlg-butcancel fp-panel-button" href="#">'.get_string('cancel').'</a>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -510,17 +510,12 @@ class core_files_renderer extends plugin_renderer_base {
 <div class="file-picker fp-generallayout">
     <div class="fp-repo-area">
         <ul class="fp-list">
-            <li class="{!}fp-repo"><img class="{!}fp-repo-icon" width="16" height="16" />&nbsp;<a class="{!}fp-repo-name" href="#"></a></li>
+            <li class="{!}fp-repo"><a href="#"><img class="{!}fp-repo-icon" width="16" height="16" />&nbsp;<span class="{!}fp-repo-name" /span></a></li>
         </ul>
     </div>
     <div class="fp-repo-items">
         <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>
@@ -529,6 +524,11 @@ class core_files_renderer extends plugin_renderer_base {
                     <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 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>
             <div class="fp-pathbar">
                  <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name" href="#"></a></span>
@@ -780,7 +780,7 @@ class core_files_renderer extends plugin_renderer_base {
         $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>
+    <a class="{!}fp-msg-butok fp-panel-button" href="#">'.get_string('ok').'</a>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }

diff --git a/theme/base/pix/fp/alias.png b/theme/base/pix/fp/alias.png
new file mode 100644 (file)
index 0000000..e169592
Binary files /dev/null and b/theme/base/pix/fp/alias.png differ

diff --git a/theme/base/pix/fp/link.png b/theme/base/pix/fp/link.png
new file mode 100644 (file)
index 0000000..c456ece
Binary files /dev/null and b/theme/base/pix/fp/link.png differ

diff --git a/theme/base/style/filemanager.css b/theme/base/style/filemanager.css
index 8f7e504..09f8983 100644 (file)
--- a/theme/base/style/filemanager.css
+++ b/theme/base/style/filemanager.css
@@ -36,14 +36,14 @@ background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(st
  */
 .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;}
-.file-picker .fp-list .fp-repo {display:block;padding:.5em .7em;}
+.file-picker .fp-list .fp-repo a{display:block;padding:.5em .7em;}
 .file-picker .fp-list .fp-repo.active {background:#F2F2F2;}
 .file-picker .fp-repo-icon {padding: 0px 7px 0px 5px;}
 
 /*
  * Tools, Path & View on fp-navbar (File Picker and File Manager)
  */
-.fp-toolbar {display: table-row;line-height: 22px;}
+.fp-toolbar {display: table-row;line-height: 22px;float:left;}
 .fp-toolbar.empty {display:none;}
 .fp-toolbar .disabled {display:none;}
 .fp-toolbar div {display: inline-block;padding: 0px 2px;}
@@ -150,20 +150,20 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
  * File exists dialogue on Upload (File Picker only)
  */
 .file-picker.fp-dlg {text-align: center;}
-.file-picker.fp-dlg .fp-dlg-text {padding: 40px 20px 10px 20px;}
+.file-picker.fp-dlg .fp-dlg-text {padding: 40px 20px 10px 20px;font-size: 12px;}
 
 /*
  * 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;}
+.file-picker.fp-msg .fp-msg-text {padding: 40px 20px 10px 20px;min-width:200px;max-width:500px;max-height:300px;overflow:auto;font-size: 12px;}
+.file-picker.fp-msg.fp-msg-error .fp-msg-text {padding: 40px 20px 10px 20px;font-size: 12px;}
 
 /*
  * 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;}
+.file-picker .fp-content-error .fp-error {height: 100%;width: 100%;display:table-cell;vertical-align: middle;padding: 40px 20px 10px 20px;font-size: 12px;}
 
 /*
  * Lazy loading on fp-content (File Picker only)
@@ -236,8 +236,8 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
  */
 .filemanager .fp-iconview .fp-reficons1 {position:absolute;height:100%;width:100%;top:0;left:0;z-index:1000;}
 .filemanager .fp-iconview .fp-reficons2 {position:absolute;height:100%;width:100%;top:0;left:0;z-index:1001;}
-.filemanager .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {background: url('[[pix:moodle|t/lock]]') no-repeat;background-position:bottom left;}
-.filemanager .fp-iconview .fp-file.fp-isreference .fp-reficons2 {background: url('[[pix:moodle|t/right]]') no-repeat;background-position:bottom right;}
+.filemanager .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {background: url('[[pix:theme|fp/link]]') no-repeat;background-position:bottom right;}
+.filemanager .fp-iconview .fp-file.fp-isreference .fp-reficons2 {background: url('[[pix:theme|fp/alias]]') no-repeat;background-position:bottom left;}
 
 /*
  * Table view (File Manager only)
@@ -261,7 +261,6 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
 /*
  * Drag and drop support (File Manager only)
  */
-/*.filepicker-filelist div:not(.dndupload-target),*/
 .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;text-align:center;z-index: 3000;}
 .filepicker-filelist .dndupload-target,
 .filemanager-container .dndupload-target {background:#FFF;position:absolute;top:10px;bottom:10px;left:10px;right:10px;border: 2px dashed #fb7979;padding-top:85px;text-align:center;z-index:3000;-webkit-box-shadow:  0px 0px 0px 10px #FFF;-moz-box-shadow: 0px 0px 0px 10px #FFF;box-shadow:  0px 0px 0px 10px #FFF;z-index: 3000;}
@@ -303,20 +302,23 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
 
 .filemanager.fp-select .fp-reflist.fp-unknown {display:none;}
 .filemanager.fp-select .fp-reflist .fp-reflistloading {display:none;}
+.filemanager.fp-select .fp-refcount {max-width: 265px;}
 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {display:inline;}
-.filemanager.fp-select .fp-reflist .fp-value {max-width:400px;max-height:50px;overflow:auto;}
+.filemanager.fp-select .fp-reflist .fp-value {background: #FFF;border: 1px solid #BBB;padding: 8px 7px;margin: 0px;max-width: 265px;max-height: 75px;overflow:auto;}
+.filemanager.fp-select .fp-reflist .fp-value li {padding-bottom: 7px;}
 
 /*
  * Create folder dialogue (File Manager only)
  */
-.filemanager .fp-mkdir-dlg input {margin-top: 20px;margin-left: 20px;float:left;}
-.filemanager .fp-dlg-butcreate {margin-top: 20px;margin-right: 20px;}
+.filemanager .fp-mkdir-dlg {text-align: center;}
+.filemanager .fp-mkdir-dlg p {text-align: left;margin: 40px 20px 0px;}
+.filemanager .fp-mkdir-dlg input {margin: 0px 20px 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;}
+.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;font-size: 12px;}
 
 /*
  *file picker search dialog