5 files changed, 37 insertions, 8 deletions

diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.css b/js/components/ui/icon-list-basic/icon.reel/icon.css
index 9fb180d2..203db65c 100644
--- a/js/components/ui/icon-list-basic/icon.reel/icon.css
+++ b/js/components/ui/icon-list-basic/icon.reel/icon.css
@@ -35,7 +35,7 @@
 
 .icon .iconLabel{
     margin-top:8px;
-    white-space: nowrap;
+    white-space: pre;
     text-overflow: ellipsis;
     line-height:15px;
     overflow: hidden;
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.js b/js/components/ui/icon-list-basic/icon.reel/icon.js
index 1ef6e277..7d36bc59 100755
--- a/js/components/ui/icon-list-basic/icon.reel/icon.js
+++ b/js/components/ui/icon-list-basic/icon.reel/icon.js
@@ -86,7 +86,7 @@ var Icon = exports.Icon = Montage.create(Component, {
                 this.metadata = "Name: "+this.icondata.name;
             }
             this.metadata = this.metadata + "<br />" + "Type: "+this.icondata.type;
-            if(this.icondata.size){this.metadata = this.metadata + "<br />" + "Size: "+this.icondata.size;}
+            if(this.icondata.size){this.metadata = this.metadata + "<br />" + "Size: "+this.icondata.size+ " bytes";}
             if(this.icondata.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.icondata.creationDate);}
             if(this.icondata.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.icondata.modifiedDate);}
 
diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 58b1be9f..cd59c02c 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -9,7 +9,7 @@ var Montage = require("montage/core/core").Montage,
     HotText = require("js/components/hottext.reel").HotText,
     HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit,
     Slider = require("js/components/slider.reel").Slider,
-    Button = require("js/components/button.reel").Button,
+    Button = require("montage/ui/button.reel").Button,
     Checkbox = require("js/components/checkbox.reel").Checkbox,
     Combobox = require("js/components/combobox.reel").Combobox,
     TextField = require("js/components/TextField.reel").TextField,
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.css b/js/components/ui/tree-basic/treeItem.reel/treeItem.css
index f8e67541..d33404e7 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.css
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.css
@@ -29,7 +29,7 @@
 }
 
 .atreeItem .name{
-    white-space: nowrap;
+    white-space: pre;
     text-overflow:ellipsis;
     line-height:15px;
     overflow: hidden;
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
index a67dad43..e9e5c1fb 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -107,8 +107,8 @@ exports.TreeItem = Montage.create(Component, {
             //icon or text click sends selection event
             var contentEls = this.element.querySelectorAll(".atreeItemContent");
             for(var i=0;i<contentEls.length;i++){
-                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, false);
-                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, false);
+                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, true);
+                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, true);
             }
 
             this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false);
@@ -118,12 +118,12 @@ exports.TreeItem = Montage.create(Component, {
                 this.metadata = "Name: "+this.treeItemData.name;
             }
             this.metadata = this.metadata + "<br />" + "Type: "+this.treeItemData.type;
-            if(this.treeItemData.size){this.metadata = this.metadata + "<br />" + "Size: "+this.treeItemData.size;}
+            if(this.treeItemData.size){this.metadata = this.metadata + "<br />" + "Size: "+this.treeItemData.size+ " bytes";}
             if(this.treeItemData.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.treeItemData.creationDate);}
             if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);}
 
             if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){
-                this.toggleContent(this.treeArrow);
+                this.expand(this.treeArrow);
             }
             if(this.treeItemData.uri === this.highlightedUri){
                 this.itemName.classList.add("selected");
@@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, {
         }
     },
 
+    expand:{
+        writable:false,
+        enumerable:true,
+        value:function(el){
+            //if children already drawn then just hide/show
+            if(this.element.getElementsByTagName("ul").length > 0){
+                var theParent = this.element.getElementsByTagName("ul")[0].parentNode;
+                if(theParent.classList.contains("hideTree")){//collapsed
+                    theParent.classList.remove("hideTree");//expand
+                    el.innerHTML = "&#9660;";
+                }
+            }
+            //else send event to draw the children
+            else{
+                var treeClickEvent = document.createEvent("Events");
+                treeClickEvent.initEvent("drawTree", false, false);
+                treeClickEvent.uri = this.treeItemData.uri;
+                treeClickEvent.uriType = this.treeItemData.type;
+                var divEl = document.createElement("div");
+                this.element.appendChild(divEl);
+                treeClickEvent.subTreeContainer = divEl;
+                this.element.dispatchEvent(treeClickEvent);
+
+                el.innerHTML = "&#9660;";
+            }
+        }
+    },
+
+
     /**
      * Event Listeners
      */