7 files changed, 105 insertions, 160 deletions

diff --git a/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.css b/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.css
index 7f11c225..092ca626 100755
--- a/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.css
+++ b/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.css
@@ -5,7 +5,7 @@
  </copyright> */
 
 .newfileLocation .newFileName{
-    width:70%;
+    width:65%;
     margin-left:5px;
 }
 
@@ -49,7 +49,7 @@
 }
 
 .newfileLocation .nameText{
-    margin-right:31px;
+    margin-right:28px;
 }
 
 .newfileLocation .hottextunit{
@@ -57,3 +57,6 @@
     display: inline;
 }
 
+.newfileLocation .fileExtension{
+    color:#d7d7d7;
+}
diff --git a/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.html b/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.html
index d7fbc235..8c0327eb 100755
--- a/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.html
+++ b/js/io/ui/new-file-dialog/new-file-location.reel/new-file-location.html
@@ -76,14 +76,18 @@
         <div class="template"></div>
     </div>
     <div class="locationSelection">
-        <div><span class="nameText">NAME:</span><input id="newFileName" class="nj-skinned newFileName" type="search" value="" /></div>
+        <div>
+            <span class="nameText">NAME:</span>
+            <input id="newFileName" class="nj-skinned newFileName" type="search" value="" />
+            <span class="fileExtension"></span>
+        </div>
         <div>
             <span>DIRECTORY:</span>
             <div id="fileInputField"></div>
         </div>
         <br />
-        <div><span>WIDTH:</span><span class="templatePx" id="templateWidth"></span></div>
-        <div><span>HEIGHT:</span><span class="templatePx" id="templateHeight"></span></div>
+        <div style="display:none;"><span>WIDTH:</span><span class="templatePx" id="templateWidth"></span></div>
+        <div style="display:none;"><span>HEIGHT:</span><span class="templatePx" id="templateHeight"></span></div>
     </div>
 </div>
 </body>
diff --git a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.css b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.css
index 7ef6d2ce..95ce01f9 100755
--- a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.css
+++ b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.css
@@ -153,4 +153,8 @@
     border:2px solid #a1a1a1;
     background-image:none;
     cursor:auto;
+}
+
+.newfile .atree ul{
+    -webkit-padding-start: 10px;
 }
\ No newline at end of file
diff --git a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.html b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.html
index eb4a8045..58bbed30 100755
--- a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.html
+++ b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.html
@@ -10,36 +10,6 @@
     <link rel="stylesheet" type="text/css" href="new-file-options-navigator.css">
     <script type="text/montage-serialization">
     {
-        "okButton": {
-            "module": "montage/ui/button.reel",
-            "name": "Button",
-            "properties": {
-                "element": {"#": "okButton"},
-                "identifier": "okButton"
-            },
-            "listeners": [
-                {
-                    "type": "action",
-                    "listener": {"@": "owner"}
-                }
-            ]
-        },
-
-        "cancelButton": {
-            "module": "montage/ui/button.reel",
-            "name": "Button",
-            "properties": {
-                "element": {"#": "cancelButton"},
-                "identifier": "cancelButton"
-            },
-            "listeners": [
-                {
-                    "type": "action",
-                    "listener": {"@": "owner"}
-                }
-            ]
-        },
-
         "newFileLocation":{
             "module": "js/io/ui/new-file-dialog/new-file-location.reel",
             "name": "NewFileLocation",
@@ -70,7 +40,7 @@
 <div id="newfile" class="newfile">
     <div class="title">Create New File</div>
     <div class="container left-nav">
-        <div class="projectTypeHeader"><span>File Type</span></div>
+        <div class="projectTypeHeader"><span>Choose Type</span></div>
         <div id="projectTypeTree" class="projectTypeTree"></div>
     </div>
     <div class="container right-nav">
diff --git a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js
index 3a2e3e96..2f148621 100644
--- a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js
+++ b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js
@@ -9,7 +9,6 @@ var Montage = require("montage/core/core").Montage,
      iconsListModule = require("js/components/ui/icon-list-basic/iconsList.reel"),
     treeModule = require("js/components/ui/tree-basic/tree.reel"),
     newFileLocationSelectionModule = require("js/io/ui/new-file-dialog/new-file-workflow-controller");
-    //nj= ("js/lib/NJUtils.js").NJUtils;
 
 var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(Component, {
 
@@ -82,6 +81,9 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
             this.eventManager.addEventListener("newFileDirectorySet", function(evt){that.handleNewFileDirectorySet(evt);}, false);
             this.eventManager.addEventListener("newFileNameSet", function(evt){that.handleNewFileNameSet(evt);}, false);
 
+            this.okButton.addEventListener("click", function(evt){that.handleOkButtonAction(evt);}, false);
+            this.cancelButton.addEventListener("click", function(evt){that.handleCancelButtonAction(evt);}, false);
+
             if(!!this.newFileModel.defaultProjectType){
                 var templates = this.newFileModel.prepareContents(this.newFileModel.defaultProjectType);
                 this.templateList = iconsListModule.IconsList.create();
@@ -92,6 +94,14 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
 
                 this.selectedProjectType = {"uri":this.newFileModel.defaultProjectType, "element":null};
             }
+
+            //update file Extension
+            if(!!this.newFileModel.projectTypeData[this.newFileModel.defaultProjectType].fileExtension){
+                var fileExtensionEl = this.element.querySelector(".fileExtension");
+                if(!!fileExtensionEl){
+                    fileExtensionEl.innerHTML = ""+this.newFileModel.projectTypeData[this.newFileModel.defaultProjectType].fileExtension;
+                }
+            }
         }
 
     },
@@ -128,7 +138,15 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
 
                 //clear current template selection
                 if((!!this.selectedTemplate) && (this.selectedTemplate.element.classList.contains("selected"))){
-                                    this.selectedTemplate.element.classList.remove("selected");
+                    this.selectedTemplate.element.classList.remove("selected");
+                }
+