Merge pull request #297 from mqg734/PI_HotTextFixes

Fixing properties panel to support px and % for body and other elements.

3 files changed, 47 insertions, 15 deletions

diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 9df16112..c599dcb0 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -233,6 +233,12 @@ exports.CustomSection = Montage.create(Component, {
               boundObjectPropertyPath: "value"
             });
 
+            //Bind object value to controls list so it can be manipulated
+            Object.defineBinding(this.controls, aField.id + "Units", {
+              boundObject: obj,
+              boundObjectPropertyPath: "units"
+            });
+
             return obj;
         }
     },
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html
index ccc7a159..d322f826 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.html
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html
@@ -29,9 +29,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "PosX"},
                 "maxValue": 10000,
-                "minValue": -10000
+                "minValue": -10000,
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
+                "units": {"<->": "@owner.leftUnits"},
                 "value": {"<->": "@owner.leftPosition"}
             }
         },
@@ -40,9 +43,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "PosY"},
                 "maxValue": 10000,
-                "minValue": -10000
+                "minValue": -10000,
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
+                "units": {"<->": "@owner.topUnits"},
                 "value": {"<->": "@owner.topPosition"}
             }
         },
@@ -50,9 +56,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
         "PosH": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
-                "element": {"#": "PosH"}
+                "element": {"#": "PosH"},
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
+                "units": {"<->": "@owner.heightUnits"},
                 "value": {"<->": "@owner.heightSize"}
             }
         },
@@ -65,6 +74,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "units": "px"
             },
             "bindings": {
+                "units": {"<->": "@owner.widthUnits"},
                 "value": {"<->": "@owner.widthSize"}
             }
 
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.js b/js/panels/properties.reel/sections/position-size.reel/position-size.js
index fef2b195..94c0bbf2 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.js
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js
@@ -53,17 +53,33 @@ exports.PositionSize = Montage.create(Component, {
         value: 0
     },
 
+    leftUnits: {
+        value: "px"
+    },
+
     topPosition: {
         value: 0
     },
 
+    topUnits: {
+        value: "px"
+    },
+
     heightSize: {
         value: 0
     },
 
+    heightUnits: {
+        value: "px"
+    },
+
     widthSize: {
         value: 0
     },
+
+    widthUnits: {
+        value: "px"
+    },
 /*
     widthSize: {
         get: function() { return this._widthSize;},
@@ -173,7 +189,7 @@ exports.PositionSize = Montage.create(Component, {
             if(!event.wasSetByCode) {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
-                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition);
+                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + this.leftControl.units] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
             }
         }
@@ -186,7 +202,7 @@ exports.PositionSize = Montage.create(Component, {
             if(!event.wasSetByCode) {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
-                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition);
+                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + this.topControl.units] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
             }
         }
@@ -197,7 +213,7 @@ exports.PositionSize = Montage.create(Component, {
             var prevPosition, items;
 
             if(!event.wasSetByCode) {
-                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+                if(this.savedPosition) prevPosition = [this.savedPosition];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot];
 
@@ -211,7 +227,7 @@ exports.PositionSize = Montage.create(Component, {
                     this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
                 }
 
-                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
+                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + this.heightControl.units] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
             }
         }
@@ -222,7 +238,7 @@ exports.PositionSize = Montage.create(Component, {
             var prevPosition, items;
 
             if(!event.wasSetByCode) {
-                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+                if(this.savedPosition) prevPosition = [this.savedPosition];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot];
 
@@ -237,7 +253,7 @@ exports.PositionSize = Montage.create(Component, {
 
                 }
 
-                this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition);
+                this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + this.widthControl.u