Merge pull request #247 from mqg734/Dom-Architecture

Fixing button and radio controls in the Properties Panel and repetition and file-chooser control in the Materials Panel.

5 files changed, 41 insertions, 12 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index d18599d6..bac722cd 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -43,7 +43,7 @@
                     "data": {
                         "boundObject": {"@": "materialsProperties"},
                         "boundObjectPropertyPath": "objectAtCurrentIteration",
-                        "oneway": false
+                        "oneway": true
                     }
                 },
                 "listeners": [
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index bd10f7a5..a4f758cf 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -625,6 +625,11 @@ exports.MaterialsPopup = Montage.create(Component, {
                     }
                 ]
     },
+
+    materialsProperties: {
+        serializable: true,
+        value: null
+    },
     
     _materialsData: {
                 enumerable: true,
@@ -641,7 +646,7 @@ exports.MaterialsPopup = Montage.create(Component, {
             },
         set: function(data) {
             this._materialsData = data;
-            if(this.materialsProperties)
+            if(this.materialsProperties && data.length)
             {
                 this.materialsProperties.needsDraw = true;
             }
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 5306eb5b..84f52ed4 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -285,6 +285,7 @@ padding-right:6px;
 .propertiesPanel input[type='radio'].nj-skinned {
     text-indent: 0px;
     line-height: 5px;
+    margin: -4px 0 0 0;
 }
 
 .propertiesPanel input[type='radio'].nj-skinned label {
@@ -303,4 +304,34 @@ input label {
 .propertiesPanel .rotation .fieldRow {
     -webkit-box-flex:0;
     width:45px;
+}
+
+.propertiesPanel div.montage-button:disabled {
+    opacity: 0.4;
+}
+
+.propertiesPanel div.montage-button {
+    font-size: 9px;
+    cursor: pointer;
+    display: block;
+    margin: -3px 0 0 -12px;
+    padding: 4px;
+    border: 1px #313131 solid;
+    background-color: #474747;
+    background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%);
+    border-radius: 4px;
+    color: white;
+    text-transform: uppercase;
+    cursor: pointer;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+    width: 18px;
+    height: 14px;
+}
+
+.propertiesPanel div.montage-button:active {
+    background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%);
+}
+
+.propertiesPanel div.montage-button:hover {
+    -webkit-box-shadow: 0px 0px 3px #b4b4b4;
 }
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
index bdcbff7f..c3af0668 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
@@ -22,10 +22,7 @@
                 "element": { "#": "slotElement" }
             },
             "bindings": {
-                "content" : {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "content"
-                }
+                "content": {"<-": "@owner.content"}
             }
         },
         "slot2": {
@@ -34,10 +31,7 @@
                 "element": { "#": "slotElement2" }
             },
             "bindings": {
-                "content" : {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "content2"
-                }
+                "content": {"<-": "@owner.content2"}
             }
         }
     }
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
index 4c5c80d7..2f81aa2e 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
@@ -44,8 +44,7 @@ exports.DualRow = Montage.create(Component, {
             }
             if(this.label2 !== null) {
                 if(this.content2.type === "button") {
-                    this.content2.element = document.createElement("button");
-                    this.content2.element.classList.add("nj-skinned");
+                    this.content2.label = this.label2;
                     this.element.getElementsByClassName("lbl")[1].style.display = "none";
                 } else {
                     this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";