MDL-31901: Change the UI in filepicker CSS rendered and images

files/renderer.php

@@ -396,37 +396,32 @@ class core_files_renderer extends plugin_renderer_base {
     private function fp_js_template_generallayout() {
         $rv = '
 <div class="file-picker fp-generallayout">
-  <div>
-    <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 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>
+        </ul>
     </div>
-  </div>
-  <div style="vertical-align:top;">
-    <div style="width:200px;height:400px;display:inline-block;overflow:auto;">
-      <ul class="fp-list">
-        <li class="{!}fp-repo"><img class="{!}fp-repo-icon" width="16" height="16" />&nbsp;<span class="{!}fp-repo-name"></span></li>
-      </ul>
-    </div>
-    <div style="width:480px;height:400px;display:inline-block;vertical-align:top;">
-      <div class="{!}fp-toolbar">
-        <div class="{!}fp-tb-back"><a>'.get_string('back', 'repository').'</a></div>
-        <div class="{!}fp-tb-search">
-          <img src="'.$this->pix_url('a/search').'" />
-          <form/>
+    <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>
+            <div class="fp-pathbar">
+                 <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name" href="#"></a></span>         
+            </div>         
         </div>
-        <div class="{!}fp-tb-refresh"><a><img src="'.$this->pix_url('a/refresh').'" />'.get_string('refresh', 'repository').'</a></div>
-        <div class="{!}fp-tb-logout"><img src="'.$this->pix_url('a/logout').'" /><a></a></div>
-        <div class="{!}fp-tb-manage"><a><img src="'.$this->pix_url('a/setting').'" /> '.get_string('manageurl', 'repository').'</a></div>
-        <div class="{!}fp-tb-help"><a><img src="'.$this->pix_url('a/help').'" /> '.get_string('help').'</a></div>
-      </div>
-      <div class="fp-pathbar" style="background:#ddffdd">
-        <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name"></a><span>/</span></span>
-      </div>
-      <div class="{!}fp-content"></div>
+        <div class="{!}fp-content"></div>
     </div>
-  </div>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -449,10 +444,10 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_iconfilename() {
-        $rv = '<div class="fp-file">
+        $rv = '<a class="{!}fp-file" href="#" >
     <div class="{!}fp-thumbnail"></div>
     <div class="{!}fp-filename"></div>
-</div>';
+</a>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
 
@@ -535,7 +530,9 @@ class core_files_renderer extends plugin_renderer_base {
 <p>'.get_string('loading', 'repository').'</p>
 </div>
 <form>
-<p class="{!}fp-thumbnail"></p>
+<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>
@@ -546,15 +543,16 @@ class core_files_renderer extends plugin_renderer_base {
 <tr class="{!}fp-setlicense"><td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
 <td class="mdl-left"><select></select></td></tr>
 </table>
-<p><button class="{!}fp-select-confirm" >'.get_string('getfile', 'repository').'</button>
-<button class="{!}fp-select-cancel" >'.get_string('cancel').'</button></p>
 </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);
     }
@@ -579,8 +577,9 @@ class core_files_renderer extends plugin_renderer_base {
      */
     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 width="100%">
+  <table >
     <tr class="{!}fp-file">
       <td class="mdl-right"><label>'.get_string('attachment', 'repository').'</label>:</td>
       <td class="mdl-left"><input type="file"/></td>
@@ -600,6 +599,7 @@ class core_files_renderer extends plugin_renderer_base {
   </table>
 </form>
 <div><button class="{!}fp-upload-btn">'.get_string('upload', 'repository').'</button></div>
+</div>
 </div> ';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -626,7 +626,7 @@ class core_files_renderer extends plugin_renderer_base {
      * @return string
      */
     private function fp_js_template_error() {
-        $rv = '<div class="{!}fp-error" />';
+        $rv = '<div class="fp-content-error" ><div class="{!}fp-error" /></div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
 
@@ -700,8 +700,9 @@ 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 width="100%">
+    <table >
       <tr class="{!}fp-login-popup">
         <td colspan="2">
           <label>'.get_string('popup', 'repository').'</label>
@@ -716,8 +717,8 @@ class core_files_renderer extends plugin_renderer_base {
         <td align="left"><select></select></td>
       </tr>
       <tr class="{!}fp-login-input">
-        <td align="right" width="30%" valign="center"><label /></td>
-        <td align="left"><input/></td>
+        <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>
@@ -728,6 +729,7 @@ class core_files_renderer extends plugin_renderer_base {
     </table>
     <p><button class="{!}fp-login-submit">'.get_string('submit', 'repository').'</button></p>
   </form>
+</div>
 </div>';
         return preg_replace('/\{\!\}/', '', $rv);
     }
@@ -755,7 +757,7 @@ class core_files_renderer extends plugin_renderer_base {
      * Default contents is one text input field with name="s"
      */
     public function repository_default_searchform() {
-        $str = '<label>'.get_string('keyword', 'repository').': </label><br/><input name="s" value="" /><br/>';
+        $str = '<input class="search-entry" name="s" value="Search" />';
         return $str;
     }
 }

repository/filepicker.js

@@ -1117,23 +1117,14 @@ M.core_filepicker.init = function(Y, options) {
                 centered     : true,
                 modal        : true,
                 visible      : false,
+                minWidth     : this.fpnode.getStylePx('minWidth'),
+                minHeight    : this.fpnode.getStylePx('minHeight'),
+                maxWidth     : this.fpnode.getStylePx('maxWidth'),
+                maxHeight    : this.fpnode.getStylePx('maxHeight'),
                 render       : true
             });
             // allow to move the panel dragging it by it's header:
             this.mainui.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']});
-            // Check if CSS for the node sets min-max width/height and therefore if panel shall be resizable:
-            var resizeconstraints = {
-              minWidth: this.fpnode.getStylePx('minWidth')?this.fpnode.getStylePx('minWidth'):this.fpnode.getStylePx('width'),
-              minHeight: this.fpnode.getStylePx('minHeight')?this.fpnode.getStylePx('minHeight'):this.fpnode.getStylePx('height'),
-              maxWidth: this.fpnode.getStylePx('maxWidth')?this.fpnode.getStylePx('maxWidth'):this.fpnode.getStylePx('width'),
-              maxHeight: this.fpnode.getStylePx('maxHeight')?this.fpnode.getStylePx('maxHeight'):this.fpnode.getStylePx('height'),
-              preserveRatio: false
-            };
-            if (resizeconstraints.minWidth < resizeconstraints.maxWidth ||
-                    resizeconstraints.minHeight < resizeconstraints.maxHeight) {
-                this.mainui.plug(Y.Plugin.Resize)
-                this.mainui.resize.plug(Y.Plugin.ResizeConstrained, resizeconstraints);
-            }
             this.mainui.show();
             // create panel for selecting a file (initially hidden)
             this.selectui = new Y.Panel({

theme/base/style/filemanager.css

@@ -45,47 +45,148 @@
 
 .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 {padding:0;margin:0;text-align:left;max-height:350px;overflow:auto;border:1px solid black;}
-.file-picker .fp-login-form {text-align:center;}
-.file-picker .fp-searchbar {float:right;}
-.file-picker .fp-viewbar {width:300px;float:left;}
-.file-picker .fp-viewbar.disabled {display:none;}
-.file-picker .fp-viewbar .checked {font-weight:bold;}
-.file-picker .fp-toolbar {padding: .8em;background: #FFFFCC;text-align:center;margin: 3px;}
-.file-picker .fp-toolbar.empty {display:none;}
-.file-picker .fp-toolbar div {display: inline-block;}
-.file-picker .fp-toolbar .disabled {display:none;}
-.file-picker .fp-toolbar a {padding: 0 .5em;}
+.file-picker .fp-content-center {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
+
+/*
+ * Layout
+ */
+.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);
+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;}
+.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;}
+
+/*
+ * Repositories
+ */
 .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;border-bottom:1px dotted gray;padding: .5em;}
-.file-picker .fp-list .fp-repo.active {background:#AACCEE;}
+.file-picker .fp-list .fp-repo {display:block;padding:.5em .7em;}
+.file-picker .fp-list .fp-repo.active {background:#F2F2F2;}
+.file-picker .fp-repo-icon {padding: 0px 7px 0px 5px;}
+
+/*
+ * Repository tools, path & view
+ */
+.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;*/}
+
+.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;}
+
+/*
+ * Icon view
+ */
+.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;}
+
+/*
+ * Table view
+ */
+.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-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
+ */
+.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 .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
+ */
+.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;}
+
+/*
+ * Error
+ */
+.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-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-pathbar {margin: .4em;border-bottom: 1px dotted gray;}
-.file-picker .fp-pathbar a {padding: .4em;}
-.file-picker .fp-select {width:550px;height:430px;text-align:center;overflow:auto;}
-.file-picker .fp-select .uneditable {display:none;}
-.file-picker .fp-select p {margin: 1em;}
-.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-upload-form {margin: 2em 0;text-align:center;}
-.file-picker .fp-upload-btn {clear:both;margin-top: 2em;}
 .file-picker .fp-popup {text-align:center;}
-.file-picker .fp-iconview .fp-file {float:left;text-align:center;}
-.file-picker .fp-iconview .fp-file div {overflow: hidden;}
-.file-picker .fp-iconview .fp-file .fp-filename {height:48px;text-align:center;min-width:50px;}
-.file-picker .fp-error {padding: 2em 0;margin: 3em 5px;text-align:center;background: #FFBBBB;}
-.file-picker .fp-msg {}
-.file-picker .fp-msg .fp-msg-text {min-width:300px;min-height:150px;max-width:500px;max-height:300px;overflow:auto;}
-.file-picker .fp-msg.fp-msg-error .fp-msg-text {color:red;}
-.file-picker .fp-msg .fp-msg-butok {text-align:center;}
+
 .filepicker-filelist {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
+
 /* file picker search dialog */
 .file-picker div.bd {text-align:left;}
 
@@ -167,4 +268,3 @@
 .dndsupported .dndupload-ready .dndupload-target {display:block;}
 .dndupload-uploadinprogress {display:none;text-align:center;}
 .dndupload-uploading .dndupload-uploadinprogress {display:block;}
-