MDL-42236 File Manger/Picker - Matching UI with standard UI

files/renderer.php

@@ -201,14 +201,14 @@ class core_files_renderer extends plugin_renderer_base {
     <div class="fp-navbar">
         <div class="filemanager-toolbar">
             <div class="fp-toolbar">
-                <div class="{!}fp-btn-add"><a role="button" href="#"><img src="'.$this->pix_url('a/add_file').'" /> '.$straddfile.'</a></div>
-                <div class="{!}fp-btn-mkdir"><a role="button" href="#"><img src="'.$this->pix_url('a/create_folder').'" /> '.$strmakedir.'</a></div>
-                <div class="{!}fp-btn-download"><a role="button" href="#"><img src="'.$this->pix_url('a/download_all').'" /> '.$strdownload.'</a></div>
+                <div class="{!}fp-btn-add"><a role="button" href="#"><img src="'.$this->pix_url('a/add_file').'" alt="'.$straddfile.'" /></a></div>
+                <div class="{!}fp-btn-mkdir"><a role="button" href="#"><img src="'.$this->pix_url('a/create_folder').'" alt="'.$strmakedir.'" /></a></div>
+                <div class="{!}fp-btn-download"><a role="button" href="#"><img src="'.$this->pix_url('a/download_all').'" alt="'.$strdownload.'" /></a></div>
             </div>
             <div class="{!}fp-viewbar">
-                <a title="'. get_string('displayicons', 'repository') .'" class="{!}fp-vb-icons" href="#"></a>
-                <a title="'. get_string('displaydetails', 'repository') .'" class="{!}fp-vb-details" href="#"></a>
-                <a title="'. get_string('displaytree', 'repository') .'" class="{!}fp-vb-tree" href="#"></a>
+                <a title="'. get_string('displayicons', 'repository') .'" class="{!}fp-vb-icons" href="#"><img alt="" src="'. $this->pix_url('fp/view_icon_active', 'theme') .'" /></a>
+                <a title="'. get_string('displaydetails', 'repository') .'" class="{!}fp-vb-details" href="#"><img alt="" src="'. $this->pix_url('fp/view_list_active', 'theme') .'" /></a>
+                <a title="'. get_string('displaytree', 'repository') .'" class="{!}fp-vb-tree" href="#"><img alt="" src="'. $this->pix_url('fp/view_tree_active', 'theme') .'" /></a>
             </div>
         </div>
         <div class="fp-pathbar">
@@ -536,14 +536,14 @@ class core_files_renderer extends plugin_renderer_base {
                     <div class="{!}fp-tb-search"><form></form></div>
                     <div class="{!}fp-tb-refresh"><a href="#"><img alt="'. get_string('refresh', 'repository') .'"  src="'.$this->pix_url('a/refresh').'" /></a></div>
                     <div class="{!}fp-tb-logout"><img alt="'. get_string('logout', 'repository') .'" src="'.$this->pix_url('a/logout').'" /><a href="#"></a></div>
-                    <div class="{!}fp-tb-manage"><a href="#"><img alt="'. get_string('settings', 'repository') .'" src="'.$this->pix_url('a/setting').'" /> '.get_string('manageurl', 'repository').'</a></div>
-                    <div class="{!}fp-tb-help"><a href="#"><img alt="'. get_string('help', 'repository') .'" src="'.$this->pix_url('a/help').'" /> '.get_string('help').'</a></div>
+                    <div class="{!}fp-tb-manage"><a href="#"><img alt="'. get_string('settings', 'repository') .'" src="'.$this->pix_url('a/setting').'" /></a></div>
+                    <div class="{!}fp-tb-help"><a href="#"><img alt="'. get_string('help', 'repository') .'" src="'.$this->pix_url('a/help').'" /></a></div>
                     <div class="{!}fp-tb-message"></div>
                 </div>
                 <div class="{!}fp-viewbar">
-                    <a title="'. get_string('displayicons', 'repository') .'" class="{!}fp-vb-icons" href="#"></a>
-                    <a title="'. get_string('displaydetails', 'repository') .'" class="{!}fp-vb-details" href="#"></a>
-                    <a title="'. get_string('displaytree', 'repository') .'" class="{!}fp-vb-tree" href="#"></a>
+                    <a title="'. get_string('displayicons', 'repository') .'" class="{!}fp-vb-icons" href="#"><img alt="" src="'. $this->pix_url('fp/view_icon_active', 'theme') .'" /></a>
+                    <a title="'. get_string('displaydetails', 'repository') .'" class="{!}fp-vb-details" href="#"><img alt="" src="'. $this->pix_url('fp/view_list_active', 'theme') .'" /></a>
+                    <a title="'. get_string('displaytree', 'repository') .'" class="{!}fp-vb-tree" href="#"><img alt="" src="'. $this->pix_url('fp/view_tree_active', 'theme') .'" /></a>
                 </div>
                 <div class="fp-clear-left"></div>
             </div>

theme/base/style/filemanager.css

@@ -33,7 +33,7 @@ background: #E2E2E2;filter: progid:DXImageTransform.Microsoft.gradient(startColo
 .file-picker .fp-repo-items {float:left; width:693px;}
 .dir-rtl .file-picker .fp-repo-items {float:right;}
 .file-picker .fp-navbar {background: #F2F2F2;min-height:22px;border-bottom: 1px solid #BBBBBB;padding: 5px 8px;}
-.file-picker .fp-content {background: #FFFFFF;clear: both;overflow:auto;height: 468px;}
+.file-picker .fp-content {background: #FFFFFF;clear: both;overflow:auto;height: 432px;}
 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content { width: 100%; }
 
 .file-picker .fp-content-loading {height: 100%;width: 100%;display: table;text-align:center;}
@@ -66,38 +66,33 @@ background: #E2E2E2;filter: progid:DXImageTransform.Microsoft.gradient(startColo
 /*
  * Tools, Path & View on fp-navbar (File Picker and File Manager)
  */
-.fp-toolbar {display: table-row;line-height: 22px;float:left; max-width: 70%;}
-
+.fp-toolbar {display: table-row;line-height: 22px;float:left; max-width: 70%; }
 .dir-rtl .fp-toolbar {float: right;}
-
 .fp-toolbar.empty {display:none;}
 .fp-toolbar .disabled {display:none;}
-.fp-toolbar div {display: inline-block;padding: 0px 2px;padding-right: 10px;}
-.dir-rtl .fp-toolbar div {width:100px;}
-.fp-toolbar img {vertical-align: -15%; margin-right: 5px;}
-
+.file-picker .fp-toolbar div, .fp-navbar .filemanager-toolbar .fp-toolbar div { float: left; margin: 9px 0 9px 9px; background: white; border: 1px solid #CCCCCC; border-bottom: 1px solid #B3B3B3; border-radius: 4px; width:40px; height: 30px;}
+.fp-toolbar div {display: block;}
+.fp-toolbar a { display: block; height: 30px; width: 40px;}
+.fp-toolbar a:hover { background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%); background-color: #ebebeb; }
+.fp-toolbar a:active { background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%); background-color: #dfdfdf; }
+.dir-rtl .fp-navbar .filemanager-toolbar .fp-toolbar div { margin: 9px 9px 9px 0; }
+.file-picker .fp-toolbar div.disabled  { display: none;}
+.fp-toolbar img {vertical-align: -15%; margin: 7px 12px;}
 .fp-toolbar .fp-tb-search {width: 228px;height: 14px;}
 .fp-toolbar .fp-tb-search input {background:#FFFFFF url('[[pix:a/search]]') no-repeat 3px 3px;padding: 2px 6px 1px 20px;width: 200px;height: 16px;border: 1px solid #BBBBBB;}
-
-.fp-viewbar {float:right;width:69px;height:22px;margin-right:8px;}
+.fp-navbar .filemanager-toolbar .fp-toolbar
 .dir-rtl .fp-toolbar img {vertical-align: -35%;}
-.dir-rtl .fp-viewbar {float: left;width: 100px;}
-
-.fp-vb-icons {background:url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;width:22px;height:22px;display: inline-block;}
-.dir-rtl .fp-vb-icons {background:url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0; display: block; float:left; margin-right: 4px;}
-.fp-vb-icons.checked {background:url('[[pix:theme|fp/view_icon_selected]]');}
-.dir-rtl .fp-vb-icons.checked {background:url('[[pix:theme|fp/view_icon_selected]]'); display: block; float:left; margin-right: 4px;}
-.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;}
-.dir-rtl .fp-vb-details {background:url('[[pix:theme|fp/view_list_active]]') no-repeat 0px 0px; display: block; float:left;  margin-right: 4px;}
-.fp-vb-details.checked {background:url('[[pix:theme|fp/view_list_selected]]');}
-.dir-rtl .fp-vb-details.checked {background:url('[[pix:theme|fp/view_list_selected]]'); display: block; float:left; margin-right: 4px;}
-.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;}
-.dir-rtl .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_active]]') no-repeat 0px 0px; display: block; float:left;  margin-right: 4px;}
-.fp-vb-tree.checked {background:url('[[pix:theme|fp/view_tree_selected]]');}
-.dir-rtl .fp-vb-tree.checked {background:url('[[pix:theme|fp/view_tree_selected]]'); display: block; float:left; margin-right: 4px;}
-.fp-viewbar.disabled .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_inactive]]');}
+.dir-rtl .file-picker .fp-viewbar, .dir-rtl .fp-navbar .filemanager-toolbar .fp-viewbar {float: left; }
+.dir-rtl .file-picker .fp-viewbar { margin-left: 0; }
+.file-picker .fp-viewbar, .fp-navbar .filemanager-toolbar .fp-viewbar {float:right; margin:9px;  background: white; border: 1px solid #CCCCCC; border-radius: 4px; border-bottom: 1px solid #B3B3B3; height: 30px;}
+.fp-viewbar .fp-vb-icons, .fp-viewbar .fp-vb-details, .fp-viewbar .fp-vb-tree { width:40px;height:30px;display: block; float: left; border-right: 1px solid #CCCCCC;}
+.fp-viewbar a.fp-vb-icons { border-radius: 4px 0 0 4px; }
+.fp-viewbar .fp-vb-tree { border-right: 0; border-radius: 0 4px 4px 0; }
+.fp-viewbar a img { margin: 7px 12px; }
+.fp-viewbar a:hover { background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%); background-color: #ebebeb; }
+.fp-viewbar a:active { background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%); background-color: #dfdfdf; }
+.fp-viewbar a.checked { background-color: #dfdfdf; }
+.fp-viewbar.disabled a { opacity: .45; background: none; cursor: default; }
 .file-picker .fp-clear-left {clear: left;}
 
 /* over ride hover rule from core.css*/
@@ -287,7 +282,7 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
  */
 .fp-restrictions{text-align: right;}
 .filemanager .fp-navbar {background: #F2F2F2;border-top: 1px solid #BBBBBB;border-left: 1px solid #BBBBBB;border-right: 1px solid #BBBBBB;}
-.filemanager-toolbar{padding: 5px 8px;min-height:22px;}
+.filemanager-toolbar{min-height: 48px;}
 .fp-pathbar {border-top: 1px solid #BBBBBB;padding: 5px 8px 1px;min-height: 20px;}
 
 .filemanager .fp-pathbar.empty {display:none;}

theme/bootstrapbase/less/moodle/filemanager.less

@@ -104,15 +104,18 @@
 }
 .file-picker .fp-navbar {
     background: #F2F2F2;
-    min-height: 22px;
     border-bottom: 1px solid #BBBBBB;
-    padding: 5px 8px;
+    min-height: 48px;
 }
+.file-picker .fp-navbar .fp-viewbar {
+    margin: 9px; 
+}
+
 .file-picker .fp-content {
     background: #FFFFFF;
     clear: both;
     overflow: auto;
-    height: 468px;
+    height: 432px;
 }
 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
     width: 100%;
@@ -187,10 +190,7 @@
 }
 // Tools, Path & View on fp-navbar (File Picker and File Manager)
 .fp-toolbar {
-    display: table-row;
-    line-height: 22px;
     float: left;
-    max-width: 70%;
 }
 .dir-rtl .fp-toolbar {
     float: right;
@@ -202,14 +202,14 @@
     display: none;
 }
 .fp-toolbar div {
-    display: inline-block;
-    .ie7-inline-block();
-    padding: 0 2px;
-    padding-right: 10px;
+    display: block;
+    float: left;
+    margin-right: 9px;
 }
 .dir-rtl .fp-toolbar div {
-    width: 100px;
-    padding-right: 0px;
+    display: block;
+    float: right;
+    margin-left: 9px;
 }
 .fp-toolbar img {
     vertical-align: -15%;
@@ -228,94 +228,60 @@
 }
 .fp-viewbar {
     float: right;
-    width: 69px;
-    height: 22px;
-    margin-right: 8px;
+    height: 30px;
+    border: 1px solid #CCC;
+    border-bottom: 1px solid #B3B3B3;
+    border-radius: 4px; 
+    background: white;
+}
+.fp-repo-items fp-viewbar {
+    margin: 9px; 
 }
 .dir-rtl .fp-toolbar img {
     vertical-align: -35%;
 }
 .dir-rtl .fp-viewbar {
     float: left;
-    width: 100px;
 }
-.fp-vb-icons {
-    background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
-    width: 22px;
-    height: 22px;
-    display: inline-block;
-    .ie7-inline-block();
-}
-.dir-rtl .fp-vb-icons {
-    background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
+
+.fp-viewbar a {
+    width: 40px;
+    height: 30px;
+    border-right: 1px solid #CCC;
     display: block;
-    float: left;
-    margin-right: 4px;
+    float:left;
 }
-.fp-vb-icons.checked {
-    background: url('[[pix:theme|fp/view_icon_selected]]');
+.fp-viewbar a:hover {
+    background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%);
+    background-color: #ebebeb;
 }
-.dir-rtl .fp-vb-icons.checked {
-    background: url('[[pix:theme|fp/view_icon_selected]]');
-    display: block;
-    float: left;
-    margin-right: 4px;
+
+.fp-viewbar a:active {
+    background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%);
+    background-color: #dfdfdf;
 }
-.fp-viewbar.disabled .fp-vb-icons {
-    background: url('[[pix:theme|fp/view_icon_inactive]]');
+
+.fp-viewbar a.fp-vb-icons {
+    border-radius: 4px 0 0 4px;
 }
-.fp-vb-details {
-    background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
-    width: 23px;
-    height: 22px;
-    display: inline-block;
-    .ie7-inline-block();
-    margin-left: -4px;
+.fp-viewbar a.fp-vb-tree {
+    border-right: 0;
+    border-radius: 0 4px 4px 0;
 }
-.dir-rtl .fp-vb-details {
-    background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
-    display: block;
-    float: left;
-    margin-right: 4px;
+.fp-viewbar a img {
+    margin: 7px 12px;
 }
-.fp-vb-details.checked {
-    background: url('[[pix:theme|fp/view_list_selected]]');
+
+.fp-viewbar a.checked {
+    background-color: #dfdfdf;
 }
-.dir-rtl .fp-vb-details.checked {
-    background: url('[[pix:theme|fp/view_list_selected]]');
-    display: block;
-    float: left;
-    margin-right: 4px;
-}
-.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 0 0;
-    width: 23px;
-    height: 22px;
-    display: inline-block;
-    .ie7-inline-block();
-    margin-left: -4px;
-}
-.dir-rtl .fp-vb-tree {
-    background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
-    display: block;
-    float: left;
-    margin-right: 4px;
-}
-.fp-vb-tree.checked {
-    background: url('[[pix:theme|fp/view_tree_selected]]');
-}
-.dir-rtl .fp-vb-tree.checked {
-    background: url('[[pix:theme|fp/view_tree_selected]]');
-    display: block;
-    float: left;
-    margin-right: 4px;
-}
-.fp-viewbar.disabled .fp-vb-tree {
-    background: url('[[pix:theme|fp/view_tree_inactive]]');
+
+.fp-viewbar.disabled a {
+    opacity: .45;
+    background: none;
+    cursor: default;
 }
+
 .file-picker .fp-clear-left {
     clear: left;
 }
@@ -827,8 +793,7 @@ a.ygtvspacer:hover {
     border-bottom: none;
 }
 .filemanager-toolbar{
-    padding: 5px 8px;
-    min-height: 22px;
+    padding: 9px;
     overflow: hidden;
 }
 .fp-pathbar {
@@ -836,6 +801,61 @@ a.ygtvspacer:hover {
     padding: 5px 8px 1px;
     min-height: 20px;
 }
+
+.file-picker .fp-toolbar {
+    padding: 9px;
+}
+
+.fp-toolbar .fp-btn-add, 
+.fp-toolbar .fp-btn-download,
+.fp-toolbar .fp-btn-mkdir,
+.fp-toolbar .fp-tb-help,
+.fp-toolbar .fp-tb-manage,
+.fp-toolbar .fp-tb-logout,
+.fp-toolbar .fp-tb-refresh
+ {
+    border: 1px solid #CCC;
+    border-bottom: 1px solid #B3B3B3;
+    border-radius: 4px; 
+    background: white;
+    width: 40px; 
+    height: 30px;
+}
+
+.fp-toolbar a:hover {
+    background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%);
+    background-color: #ebebeb;
+}
+
+.fp-toolbar a:active {
+    background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%);
+    background-color: #dfdfdf;
+}
+
+.fp-btn-add a,
+.fp-btn-download a,
+.fp-btn-mkdir a,
+.fp-tb-help a,
+.fp-tb-manage a,
+.fp-tb-logout a,
+.fp-tb-refresh a
+{
+    display: block;
+    width: 40px; 
+    height: 30px;
+    border-radius: 4px; 
+}
+
+.fp-btn-add img,
+.fp-btn-download img,
+.fp-btn-mkdir img,
+.fp-tb-help img,
+.fp-tb-manage img,
+.fp-tb-logout img,
+.fp-tb-refresh img { 
+    margin: 7px 12px;
+}
+
 .filemanager .fp-pathbar.empty {
     display: none;
 }