2 files changed, 23 insertions, 13 deletions

diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 4a868a6d..b8261f26 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -128,7 +128,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
                                         this.popupSwitchInputTo(this.palettes);
                                 }.bind(this), true);
                         //
-                        this.drawPalette(this.defaultPalette);
+                        this.drawPalette(this.defaultPalette, this.colorManager);
                 } else {
                         this.btnPalette.style.display = 'none';
                 }
@@ -297,7 +297,7 @@ if (this._components.wheel._value) {
     ////////////////////////////////////////////////////////////////////
     //
     drawPalette: {
-        value: function (c) {
+        value: function (c, m) {
                 var i, button;
                 //
                 this.palettes.style.display = 'block';
@@ -316,27 +316,31 @@ if (this._components.wheel._value) {
                                         color = b._event.srcElement.colorValue;
                                         color.wasSetByCode = false;
                                         color.type = 'change';
-                                        this.colorManager[b._event.srcElement.colorMode] = color;
+                                        m[b._event.srcElement.colorMode] = color;
                                 } else {
-                                        if (this.colorManager.mode === 'hsl') {
-                                                rgb = this.colorManager.hexToRgb(b._event.srcElement.colorValue);
+                                        if (m.mode === 'hsl') {
+                                                rgb = m.hexToRgb(b._event.srcElement.colorValue);
                                                 if (rgb) {
-                                                        color = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b);
+                                                        color = m.rgbToHsl(rgb.r, rgb.g, rgb.b);
                                                         color.wasSetByCode = false;
                                                         color.type = 'change';
-                                                        this.colorManager.hsl = color;
+                                                        m.hsl = color;
                                                 } else {
-                                                        this.colorManager.applyNoColor(false);
+                                                        m.applyNoColor(false);
                                                 }
                                         } else {
-                                                color = this.colorManager.hexToRgb(b._event.srcElement.colorValue);
+                                                color = m.hexToRgb(b._event.srcElement.colorValue);
                                                 if (color) {
                                                         color.wasSetByCode = false;
                                                         color.type = 'change';
-                                                        this.colorManager.rgb = color;
+                                                        m.rgb = color;
                                                 } else {
-                                                        this.colorManager.applyNoColor(false);
+                                                        m.applyNoColor(false);
                                                 }
+                                                //TODO: Remove this is a hack
+                                                if (!this.props.panel) {
+                                                        this.dispatchEvent({type: 'change', wasSetByCode: false, mode: 'hex', value: b._event.srcElement.colorValue});
+                                                }
                                         }
                                 }
                         }.bind(this), true);
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 91f776bd..d5cc8ac8 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -621,6 +621,8 @@ exports.ColorPopupManager = Montage.create(Component, {
                                         this.colorChipChange(e);
                                 } else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'nocolor')) {
                                         this.colorChipChange(e);
+                                } else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'hex')) {
+                                        this.colorChipChange(e);
                                 }
                         }
                         return;
@@ -637,14 +639,18 @@ exports.ColorPopupManager = Montage.create(Component, {
                                                 this._popupGradientChipBase.colorManager.alpha = {value: e._target._numValue/100, type: 'change', wasSetByCode: false}; 
                                         }
                                         this.colorGradientChipChange(e);
-                                }
+                                } else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'hex')) {
+                                        this.colorGradientChipChange(e);
+                                }
                         } else {
                                 if (!isNaN(e._target._xStart) && !e._event.wasSetByCode) {
                                         if (!isNaN(e._target._numValue)) {
                                                 this._popupGradientChipBase.colorManager.alpha = {value: e._target._numValue/100, type: 'change', wasSetByCode: false}; 
                                         }
                                         this.colorGradientChipChange(e);
-                                }
+                                } else if (!e._event.wasSetByCode && (e._event.mode && e._event.mode === 'hex')) {
+                                        this.colorGradientChipChange(e);
+                                }
                             }
                         return;
                 }