Support button control in Properties Panel and use them for edit fill and stroke material.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

5 files changed, 84 insertions, 27 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index d72d9c14..b3ac9ddb 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage =                   require("montage/core/core").Montage,
     CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
-    njModule = require("js/lib/NJUtils");
-
-var World = require("js/lib/drawing/world").World;
-var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    njModule = require("js/lib/NJUtils"),
+    World = require("js/lib/drawing/world").World,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 exports.ShapesController = Montage.create(CanvasController, {
 
@@ -100,6 +99,12 @@ exports.ShapesController = Montage.create(CanvasController, {
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
+                case "editStrokeMaterial":
+                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()});
+                    break;
+                case "editFillMaterial":
+                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index ba03c347..28ffa536 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -402,6 +402,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+                            type: "button",
+                            id: "editStrokeMaterial",
+                            prop: "editStrokeMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
@@ -414,6 +421,13 @@ exports.PiData = Montage.create( Montage, {
                             dataField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        },
+                        {
+                            type: "button",
+                            id: "editFillMaterial",
+                            prop: "editFillMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index 5fd86d00..2176c6d5 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -26,28 +26,9 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         }
     },
 
-    willDraw: {
-        enumerable: false,
-        value: function() {
-
-        }
-    },
-    
-    draw: {
-        enumerable: false,
-        value: function() {
-
-        }
-    },
-
-    _loadXMLDoc: {
-        value:function(dname) {
-            if (window.XMLHttpRequest) {
-                xhttp = new XMLHttpRequest();
-            }
-            xhttp.open("GET", dname, false);
-            xhttp.send();
-            return xhttp.responseXML;
+    prepareForDraw: {
+        value : function() {
+            this.eventManager.addEventListener("showMaterialPopup", this, false);
         }
     },
 
@@ -74,6 +55,13 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         }
     },
 
+    handleShowMaterialPopup: {
+        enumerable: false,
+        value: function (event) {
+            this._showMaterialPopup(event.detail.materialId);
+        }
+    },
+
     _materialPopup: {
         enumerable:true,
         value:null
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 72d216ca..4c5c80d7 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
@@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, {
                 this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":";
             }
             if(this.label2 !== null) {
-                this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+                if(this.content2.type === "button") {
+                    this.content2.element = document.createElement("button");
+                    this.content2.element.classList.add("nj-skinned");
+                    this.element.getElementsByClassName("lbl")[1].style.display = "none";
+                } else {
+                    this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+                }
             } else {
                 this.element.getElementsByClassName("lbl")[1].style.display = "none";
             }
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 3c595980..d7334afe 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -20,6 +20,7 @@ var TextField = require("js/components/textfield.reel").TextField;
 var FileInput = require("js/components/ui/file-input.reel").FileInput;
 var Checkbox = require("js/components/checkbox.reel").Checkbox;
 var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
+var Button = require("montage/ui/button.reel").Button;
 
 exports.CustomSection = Montage.create(Component, {
 
@@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, {
         }
     },
 
+    handleAction: {
+        value:function(event) {
+            if(event._event.wasSetByCode) return;
+
+            var obj = event.currentTarget;
+            this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
+        }
+    },
+
     _dispatchPropEvent: {
         value: function(event) {
 //            console.log(event);
@@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, {
                 case "file"     : return this.createFileInput(fields);
                 case "checkbox" : return this.createCheckbox(fields);
                 case "chip"     : return this.createColorChip(fields);
+                case "button"     : return this.createButton(fields);
             }
         }
     },
@@ -351,6 +362,39 @@ exports.CustomSection = Montage.create(Component, {
 
             return obj;
         }
+    },
+
+    createButton: {
+        value: function(aField) {
+            var obj = Button.create();
+
+            // Set Values for Button
+            if (aField.id)                  obj.id = aField.id;
+            if (aField.label)               obj.label = aField.label;
+            if (aField.prop)                obj.prop = aField.prop;
+
+            // Special casing button so slot uses "button" tag instead of "div"
+            obj.type = "button";
+
+            if (aField.enabled) {
+                if(aField.enabled.boundObject) {