3 files changed, 132 insertions, 59 deletions

diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css
index 2d9f1189..9c85c6b5 100644
--- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css
+++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css
@@ -12,7 +12,11 @@
     padding-left:15px;
     padding-bottom:15px;
     color:#ffffff;
-    background-color:#313131;
+    background-color:#494949;
+    font-family: 'Droid Sans', sans-serif;
+    border-radius: 8px;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, .8);
+        text-shadow: 1px 1px 1px #000;
 }
 
 .picker .pickerHeader{
@@ -20,7 +24,7 @@
 }
 
 .picker .container{
-    border: 1px groove #000000;
+    border: 1px solid #000000;
     overflow: auto;
     background-color:#5f5f5f;
 }
@@ -39,21 +43,26 @@
     width:75%;
     height:88%;
     overflow: hidden;
+    border-left: none;
 }
 
 .picker .right-top{
-    border: 1px groove #000000;
+    border-right: 1px solid #000000;
     overflow: auto;
     min-height:150px;
     height:75%;
     width:auto;
+    border-right: none;
 }
 
 .picker .right-bottom{
-    border: 1px groove #000000;
+    border: 1px solid #000000;
+    border-left: none;
     overflow: auto;
     height:20%;
     padding: 10px;
+    border-bottom: none;
+    border-right: none;
 }
 
 .picker .driversList{
@@ -63,6 +72,7 @@
 
 .picker .driversList:hover{
     cursor:pointer;
+    background-color: #444444;
 }
 
 .picker .highlighted{
@@ -193,8 +203,49 @@
     pointer:auto;
 }
 
+.picker .buttons button {
+        float: left;
+        width: 100px;
+        margin-top: 3px;
+}
+
 .picker .okButton{
-    margin-right:25px;
+        margin: 0px 22px 0px 8px; 
+    /*
+margin-right:25px;
+    -webkit-box-align: center;
+    text-align: center;
+    cursor: default;
+    padding: 0px 6px 0px;
+    border:2px solid #d1d1d1;
+    background-color: #e1e1e1;
+    box-sizing: border-box;
+    border-radius:10px;
+    background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%);
+    cursor:pointer;
+*/
+}
+
+.picker .cancelButton{
+    /*
+-webkit-box-align: center;
+    text-align: center;
+    cursor: default;
+    padding: 0px 6px 0px;
+    border:2px solid #d1d1d1;
+    background-color: #e1e1e1;
+    box-sizing: border-box;
+    border-radius:10px;
+    background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%);
+    cursor:pointer;
+*/
+}
+
+.picker input[type="button"]:disabled{
+    background-color: #a1a1a1;
+    border:2px solid #a1a1a1;
+    background-image:none;
+    cursor:auto;
 }
 
 
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html
index bf421247..20cb0c68 100644..100755
--- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html
+++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html
@@ -10,7 +10,6 @@
     <link rel="stylesheet" type="text/css" href="pickerNavigator.css">
     <script type="text/montage-serialization">
         {
-
             "owner":{
                 "module": "js/components/ui/FilePicker/pickerNavigator.reel",
                 "name":"PickerNavigator",
@@ -68,10 +67,10 @@
         <div id="right-bottom" class="right-bottom"></div>
     </div>
     <div class="buttons">
-        <input id="cancelButton" type="button" value="CANCEL" class="cancelButton" />
-        <input id="okButton" disabled="true" type="button" value="OK" class="okButton" />
+        <button id="cancelButton" value="CANCEL" class="cancelButton nj-skinned">Cancel</button>
+        <button id="okButton" disabled="true" value="OK" class="okButton nj-skinned">Ok</button>
     </div>
-    <div id="filters" class="filters">
+    <div id="filters" class="filters" style="display:block;">
         <div class="dropdown hide"></div>
         <span class="dropdownArrow">&#9660</span>
         <span id="filterVal" class="filterVal">*.*</span>
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js
index 299d44f5..6b0d92f7 100644
--- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js
+++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js
@@ -7,7 +7,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component,
     iconsListModule = require("js/components/ui/icon-list-basic/iconsList.reel"),
-    filePickerControllerModule = require("js/components/ui/FilePicker/file-picker-controller"),
     treeModule = require("js/components/ui/tree-basic/tree.reel");
 
 var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
@@ -150,6 +149,12 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
                     leftNav.appendChild(newDiv);
                     if(dirObj.uri === this.pickerModel.currentRoot){
                         newDiv.classList.add("highlighted");
+                        //enable ok for logical drive selections, when in directory selection mode
+                        if(this.pickerModel.inFileMode === false){
+                            this.okButton.removeAttribute("disabled");
+                            //put into selectedItems..currently single selection is supported
+                            this.selectedItems = [dirObj.uri];
+                        }
                     }
 
                     newDiv.addEventListener("click", function(evt){that.handleTopLevelDirectoryClicks(evt, dirObj);}, false);
@@ -209,26 +214,27 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
             this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly
             this.backArrow.addEventListener("click", this, false);
             this.forwardArrow.addEventListener("click", this, false);
-            this.okButton.addEventListener("click", this, false);
-            this.cancelButton.addEventListener("click", this, false);
-
-            //populate filters
-            var filtersDD = this.element.querySelector(".filters .dropdown");