3 files changed, 35 insertions, 10 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index d1aa750a..786eb57a 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -314,11 +314,11 @@ input label {
     width:45px;
 }
 
-.propertiesPanel div.montage-button:disabled {
+.propertiesPanel div[type=button]:disabled {
     opacity: 0.4;
 }
 
-.propertiesPanel div.montage-button {
+.propertiesPanel div[type=button] {
     font-size: 9px;
     cursor: pointer;
     display: block;
@@ -336,10 +336,10 @@ input label {
     height: 14px;
 }
 
-.propertiesPanel div.montage-button:active {
+.propertiesPanel div[type=button]:active {
     background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%);
 }
 
-.propertiesPanel div.montage-button:hover {
+.propertiesPanel div[type=button]:hover {
     -webkit-box-shadow: 0px 0px 3px #b4b4b4;
 }
\ No newline at end of file
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 5719a63d..b2941fe8 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -296,9 +296,20 @@ exports.Properties = Montage.create(Component, {
 
                 // Root element color chip
                 if(isRoot) {
-                    var backgroundChip = this.customSections[0].content.controls["background"];
-                    var rootBackgroundColor = ElementsMediator.getProperty(el, "background");
-
+                        //
+                    var rootBackgroundColor, backgroundChip = this.customSections[0].content.controls["background"];
+                    //
+                    if (ElementsMediator.getProperty(el, "background-image")) {
+                            rootBackgroundColor = ElementsMediator.getProperty(el, "background-image");
+                            if (!rootBackgroundColor.mode) rootBackgroundColor = null;
+                    } else if (ElementsMediator.getProperty(el, "background-color")){
+                            rootBackgroundColor = ElementsMediator.getProperty(el, "background-color");
+                            if (!rootBackgroundColor.mode) rootBackgroundColor = null;
+                    } else if (ElementsMediator.getProperty(el, "background")){
+                            rootBackgroundColor = ElementsMediator.getProperty(el, "background");
+                            if (!rootBackgroundColor.mode) rootBackgroundColor = null;
+                    }
+                    //
                     if(rootBackgroundColor) {
                         backgroundChip.color = rootBackgroundColor;
                     } else {
@@ -373,7 +384,7 @@ exports.Properties = Montage.create(Component, {
                         }
                     }
                 }
-
+                if (previousInput === 'chip') return;
                 this.application.ninja.colorController.colorModel.input =  previousInput;
                 var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1];
                         color.c.wasSetByCode = true;
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 9c31cf45..ed4616da 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -20,7 +20,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox;
 var TextField = require("js/components/textfield.reel").TextField;
 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;
+var Button = require("montage/ui/native/button.reel").Button;
 
 exports.CustomSection = Montage.create(Component, {
 
@@ -115,11 +115,25 @@ exports.CustomSection = Montage.create(Component, {
         value: function(event) {
             // Change the stage color for now
             //console.log(this, event);
-            if (event._event.color && event._event.color.css) {
+            
+            if (event._event.colorMode !== 'gradient' && event._event.color) {
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], 'background-color', [event._event.color.css], "Change", "pi", '');
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], 'background-image', ['none'], "Change", "pi", '');
+            } else if (event._event.color) {
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], 'background-image', [event._event.color.css], "Change", "pi", '');
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], 'background-color', ['none'], "Change", "pi", '');
+            } else {
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], 'background-image', ['none'], "Change", "pi", '');
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], 'background-color', ['none'], "Change", "pi", '');
+            }
+            
+            /*
+if (event._event.color && event._event.color.css) {
                 ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
             } else {
                     ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, ['none'], "Change", "pi", '');
             }
+*/
             /*
             var propEvent = document.createEvent("CustomEvent");
             propEvent.initEvent("propertyChange", true, true);