3 files changed, 28 insertions, 13 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 0928da3a..5306eb5b 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -4,6 +4,21 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+/* Cleanup TODO - now that we removed the color toolbar from the tools panel, we no longer load the colortoolbar reel.
+                  Currently the color chips in the property inspector rely on the colortoolbar button style so we
+                  copied the class here. When we do the color feature cleanup we should remove this dependency.
+*/
+.colortoolbar button {
+  float: left;
+  clear: both;
+  width: 27px;
+  height: 27px;
+  background: black;
+  border: 1px solid #000;
+  padding: 0;
+  margin: 0px;
+}
+
 .propertiesPanel {
     color:#FFF;
     overflow-x: hidden;
@@ -256,17 +271,17 @@ padding-right:6px;
     content: "•";
 }
 
-.propertiesPanel input.nj-skinned label {
+.propertiesPanel .checkbox-label {
     position: absolute;
-    top: 0;
-    left: 15px;
+    top: 4px;
+    padding-left: 5px;
+    /*left: 15px;*/
     font-size: 10px;
     width:55px;
     text-align: left;
     font-weight: normal;
     color:#FFF;
 }
-
 .propertiesPanel input[type='radio'].nj-skinned {
     text-indent: 0px;
     line-height: 5px;
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 3ec48687..fa62c850 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -228,7 +228,7 @@ exports.Properties = Montage.create(Component, {
 
             if(isRoot) {
                 var backgroundChip = this.customSections[0].content.controls["background"];
-                backgroundChip.color = ElementsMediator.getProperty(el, "background");
+                if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background");
             }
 
                         var previousInput = this.application.ninja.colorController.colorModel.input;
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 876fe110..49b4414e 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -19,7 +19,7 @@ var HT = require("js/components/hottext.reel").HotText;
 var Dropdown = require("js/components/combobox.reel").Combobox;
 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 LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox;
 var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
 var Button = require("montage/ui/button.reel").Button;
 
@@ -77,7 +77,7 @@ exports.CustomSection = Montage.create(Component, {
                     this.rows.push(tmpRow);
 
                 } else if(this._fields[i].length === 3) {
-                    
+
                 }
 
             }
@@ -103,7 +103,7 @@ exports.CustomSection = Montage.create(Component, {
     handleChange: {
                 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});
                 }
@@ -262,10 +262,10 @@ exports.CustomSection = Montage.create(Component, {
                 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: false
-                                });
+                        boundObject: this.controls,
+                        boundObjectPropertyPath: aField.enabled.boundProperty,
+                        oneway: false
+                    });
                 } else {
                     obj.enabled = aField.enabled;
                 }
@@ -349,7 +349,7 @@ exports.CustomSection = Montage.create(Component, {
         value: function(aField) {
 
             // Generate Textfield
-            var obj = Checkbox.create();
+            var obj = LabelCheckbox.create();
 
             // Set Values for TextField
             if (aField.id)          obj.id = aField.id;