1 files changed, 23 insertions, 13 deletions

diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index 26d4932f..40c384fb 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -170,7 +170,7 @@ exports.ColorPanelBase = Montage.create(Component, {
             this.addButton('current', this.btnCurrent);
             this.addButton('previous', this.btnPrevious);
             //
-            this.addButton('hexinput', this.hextext);
+            this.addButton('hexinput', this.hextext, this.colorManager);
             this.addButton('reset', this.btnDefault);
             this.addButton('nocolor', this.btnNoColor);
             this.addButton('swap', this.btnSwap);
@@ -461,7 +461,7 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     addButton: {
-        value: function (type, button) {
+        value: function (type, button, manager) {
             //
             switch (type.toLocaleLowerCase()) {
                 case 'chip':
@@ -480,7 +480,13 @@ exports.ColorPanelBase = Montage.create(Component, {
                         }
                         if (c && c.css) {
                             this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
-                            this.style.backgroundColor = c.css;
+                            if (m === 'gradient') {
+                                this.style.backgroundImage = c.css;
+                                this.style.backgroundColor = 'transparent';
+                            } else {
+                                    this.style.backgroundColor = c.css;
+                                    this.style.backgroundImage = 'none';
+                            }
                         } else {
                             this.drawNoColor(this, this.cvs);
                         }
@@ -673,8 +679,8 @@ exports.ColorPanelBase = Montage.create(Component, {
                 case 'hexinput':
                     var hexinp = HotText.create();
                     hexinp.element = button;
-                    hexinp.labelFunction = this._updateHexValue.bind(this);
-                    hexinp.inputFunction = this._hottextHexInput.bind(this);
+                    hexinp.labelFunction = this._updateHexValue.bind(manager);
+                    hexinp.inputFunction = this._hottextHexInput.bind(manager);
                     hexinp.needsDraw = true;
                     this._buttons.hexinput.push(hexinp);
                     return hexinp;
@@ -1244,23 +1250,23 @@ exports.ColorPanelBase = Montage.create(Component, {
             }
             //Checking for panel mode and converting the color to the panel mode
             if (this._panelMode === 'hsl') {
-                rgb = this.colorManager.hexToRgb(color);
+                rgb = this.hexToRgb(color);
                 if (rgb) {
-                    update = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b);
+                    update = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
                     update.wasSetByCode = false;
                     update.type = 'change';
-                    this.colorManager.hsl = update;
+                    this.hsl = update;
                 } else {
-                    this.colorManager.applyNoColor(false);
+                    this.applyNoColor(false);
                 }
             } else {
-                update = this.colorManager.hexToRgb(color);
+                update = this.hexToRgb(color);
                 if (update) {
                     update.wasSetByCode = false;
                     update.type = 'change';
-                    this.colorManager.rgb = update;
+                    this.rgb = update;
                 } else {
-                    this.colorManager.applyNoColor(false);
+                    this.applyNoColor(false);
                 }
             }
         }
@@ -1269,7 +1275,7 @@ exports.ColorPanelBase = Montage.create(Component, {
     //
     _updateHexValue: {
         value: function (v) {
-            return this.colorManager.hex;
+            return this.hex;
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -1463,6 +1469,10 @@ exports.ColorPanelBase = Montage.create(Component, {
                     }
                 }
             } else {
+                if (this.colorManager.input === 'chip') {
+                        this.application.ninja.colorController.colorPopupManager.hideColorPopup();
+                        return;
+                }
                 //TODO: Change popup to use montage's built in popup
                 this.application.ninja.colorController.colorPopupManager.hideColorPopup();
                 //