3 files changed, 80 insertions, 39 deletions

diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css
index 2d9f1189..93578ec1 100644
--- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css
+++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css
@@ -63,6 +63,7 @@
 
 .picker .driversList:hover{
     cursor:pointer;
+    background-color: #444444;
 }
 
 .picker .highlighted{
@@ -195,6 +196,36 @@
 
 .picker .okButton{
     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..bd427f97 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" />
+        <input id="cancelButton" type="button" value="CANCEL" class="cancelButton nj-skinned" />
+        <input id="okButton" disabled="true" type="button" value="OK" class="okButton nj-skinned" />
     </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..d7a19c14 100644
--- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js
+++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js
@@ -209,26 +209,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");
-            if(!!this.pickerModel.fileFilters
-                && (typeof this.pickerModel.fileFilters === "object")
-                && ('splice' in this.pickerModel.fileFilters)
-                && ('join' in this.pickerModel.fileFilters)){
-                this.pickerModel.fileFilters.forEach(function(aFilter){
-                    var newDiv = document.createElement("div");
-                    newDiv.innerHTML = aFilter;
-                    filtersDD.appendChild(newDiv);
-                    newDiv.addEventListener("click", function(evt){that.handleFilterClick(evt, aFilter, filtersDD)}, false);
-                }, this);
-            }
 
-            var renderedWidth = this.getComputedWidth(filtersDD);
-            this.filters.style.width = "" + (parseInt((renderedWidth.substring(0, (renderedWidth.length - 2)))) + 20) + "px";
+            //populate filters if in file selection mode
+            if(this.pickerModel.inFileMode === true){
+                var filtersDD = this.element.querySelector(".filters .dropdown");
+                if(!!this.pickerModel.fileFilters
+                    && (typeof this.pickerModel.fileFilters === "object")
+                    && ('splice' in this.pickerModel.fileFilters)
+                    && ('join' in this.pickerModel.fileFilters)){
+                    this.pickerModel.fileFilters.forEach(function(aFilter){
+                        var newDiv = document.createElement("div");
+                        newDiv.innerHTML = aFilter;
+                        filtersDD.appendChild(newDiv);
+                        newDiv.addEventListener("click", function(evt){that.handleFilterClick(evt, aFilter, filtersDD)}, false);
+                    }, this);
+                }
 
+                var renderedWidth = this.getComputedWidth(filtersDD);
+                this.filters.style.width = "" + (parseInt((renderedWidth.substring(0, (renderedWidth.length - 2)))) + 20) + "px";
+            }else{
+                this.filters.style.display = "none";
+            }
             /**
              * attach click event listeners to the addressbar dropdown arrows
              */
@@ -244,6 +245,9 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
             this.resultsArea.addEventListener("click", function(evt){that.handleResultsAreaClick(evt);}, false);
             this.element.addEventListener("click", function(evt){that.handlePickerNavClick(evt);}, false);
 
+            this.okButton.addEventListener("click", function(evt){that.handleOkButtonAction(evt);}, false);
+            this.cancelButton.addEventListener("click", function(evt){that.handleCancelButtonAction(evt);}, false);
+
             //ready to show picker now
             this.element.style.visibility = "visible";
         }
@@ -263,11 +267,11 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
         }
     },
 
-    //TODO: add uri pattern validation 
-    validateUri:{
+    cleanupUri:{
         writable: false,
         enumerable:true,
         value: function(folderUri){
+            folderUri = folderUri.replace(/^\s+|\s+$/g,"");  // strip any leading or trailing spaces
             //remove unnecessary / from end - for Win and Mac .... don't trim for the root
             if(((folderUri.charAt(folderUri.length - 1) === "/") || (folderUri.charAt(folderUri.length - 1) === "\\")) && (folderUri !== "/")){
                 folderUri = folderUri.substring(0, (folderUri.length - 1));
@@ -324,7 +328,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
         writable:false,
         enumerable:true,
         value:function(uri){
-            uri = this.validateUri(uri);
+            uri = this.cleanupUri(uri);
             var arr = [];
             var temp = new String(uri);
             while(temp.indexOf("/") != -1){
@@ -532,8 +536,6 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
             this.refreshButton.identifier = "refreshButton";
             this.backArrow.identifier = "backArrow";
             this.forwardArrow.identifier = "forwardArrow";
-            this.okButton.identifier = "okButton";
-            this.cancelButton.identifier = "cancelButton";
             this.iconView.identifier = "iconView";
             this.treeView.identifier = "treeView";
             this.resultsArea.identifier = "resultsArea";
@@ -622,6 +624,16 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
                         this.currentSelectedNode = evt.target;