5 files changed, 91 insertions, 16 deletions

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..703ef950 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) {
+                    // TODO - For now, always bind to this.controls[someProperty]
+                    Object.defineBinding(obj, "enabled", {
+                                    boundObject: this.controls,
+                                    boundObjectPropertyPath: aField.enabled.boundProperty,
+                                    oneway: true
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
+
+            obj.addEventListener("action", this, false);
+
+            this.controls[aField.id] = obj;
+
+            return obj;
+        }
     }
 
 });
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
index 227a232b..7f8fdbc2 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
@@ -8,7 +8,33 @@
     display: none;
 }
 
-.fieldCol .disabled
-{
+.fieldCol .disabled {
     color:#999999;
-}
\ No newline at end of file
+}
+
+
+#posBound {
+    position: absolute;
+    left: 105px;
+    border: none;
+    background-color: transparent;
+    top: 2px;
+    opacity: 0.7;
+    width: 17px;
+    height: 18px;
+    margin-right: 10px;
+}
+
+#posBound:hover {
+    opacity: 1;
+}
+
+.unlock{
+    background: url("../../../../../images/optionsbar/unlinked.png") no-repeat;
+
+}
+
+.lockUp {
+    background: url("../../../../../images/optionsbar/link.png") no-repeat;
+}
+
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
index 6e355f31..f50724c5 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
@@ -85,13 +85,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             }
         },
         "bindButton": {
-            "module": "js/components/button.reel",
-            "name":  "Button",
+            "prototype": "montage/ui/toggle-button.reel",
             "properties": {
-                "element": {"#" :"posBound"},
-                "isToggleButton": true,
-                "onState": "LockToolUp",
-                "offState": "UnLockToolUp"
+                "element": {"#": "posBound"},
+                "pressedClass": "lockUp",
+                "preventFocus": true,
+                "identifier": "ratio"
             }
         }
     }
@@ -119,7 +118,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
        </section>
         <hr />
         <section class="fieldCol">
-            <button id="posBound"></button>
+            <button id="posBound" class="unlock"></button>
             <label>Width:</label>
             <article class="fieldRow twoCol">
                 <div>
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
index 49117090..1e47916f 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
@@ -100,7 +100,7 @@ exports.PosSize = Montage.create(Component, {
      */
     handleRatioAction: {
         value: function() {
-            if(this.bindButton.value) {
+            if(this.bindButton.pressed) {
                 this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
                 if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
 
@@ -148,7 +148,7 @@ exports.PosSize = Montage.create(Component, {