First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools.

1 files changed, 1420 insertions, 1415 deletions

diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index af62dd07..64cdc360 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -15,35 +15,35 @@ var Montage = 			require("montage/core/core").Montage,
 ////////////////////////////////////////////////////////////////////////
 //Exporting as ColorPanelBase
 exports.ColorPanelBase = Montage.create(Component, {
-        ////////////////////////////////////////////////////////////////////
-        //
-        hasTemplate: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    hasTemplate: {
         value: true
     },
     ////////////////////////////////////////////////////////////////////
     //Storing ColorPanel sliders mode
     _panelMode: {
-        enumerable: false,
-        value: 'rgb'
+        enumerable: false,
+        value: 'rgb'
     },
     ////////////////////////////////////////////////////////////////////
     //Storing ColorPanel sliders mode
     panelMode: {
-        enumerable: true,
-        get: function() {
+        enumerable: true,
+        get: function () {
             return this._panelMode;
         },
-        set: function(value) {
-                if (value !== this._panelMode) {
-                        this._panelMode = value;
-                }
+        set: function (value) {
+            if (value !== this._panelMode) {
+                this._panelMode = value;
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
     _colorBar: {
-        enumerable: false,
-        value: null
+        enumerable: false,
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
@@ -54,19 +54,19 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     colorManager: {
-        enumerable: true,
-        get: function() {
+        enumerable: true,
+        get: function () {
             return this._colorManager;
         },
-        set: function(value) {
-                if (value !== this._colorManager) {
-                        this._colorManager = value;
-                        //Updating input buttons
-                        this._colorManager.addEventListener('change', this._update.bind(this));
-                        this._colorManager.addEventListener('changing', this._update.bind(this));
-                        //Updating history buttons once color is set
-                        this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
-                }
+        set: function (value) {
+            if (value !== this._colorManager) {
+                this._colorManager = value;
+                //Updating input buttons
+                this._colorManager.addEventListener('change', this._update.bind(this));
+                this._colorManager.addEventListener('changing', this._update.bind(this));
+                //Updating history buttons once color is set
+                this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -78,50 +78,50 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     _combo: {
-        enumerable: false,
-        value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}]
+        enumerable: false,
+        value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}]
     },
     ////////////////////////////////////////////////////////////////////
     //
     _buttons: {
-        enumerable: false,
-        value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []}
+        enumerable: false,
+        value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] }
     },
     ////////////////////////////////////////////////////////////////////
     //
     historyCache: {
-        enumerable: false,
-        value: {current: null, previous: null}
+        enumerable: false,
+        value: { current: null, previous: null }
     },
     ////////////////////////////////////////////////////////////////////
     //
     colorChipProps: {
-        enumerable: true,
-        value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}
+        enumerable: true,
+        value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false }
     },
     ////////////////////////////////////////////////////////////////////
     //
     currentChip: {
-        enumerable: true,
-        value: null
+        enumerable: true,
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     previousInput: {
-        enumerable: true,
-        value: null
+        enumerable: true,
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Setting up elements/components
     prepareForDraw: {
-        enumerable: false,
-        value: function() {
-                //TODO: Remove temporary hack, color history should be initilized
+        enumerable: false,
+        value: function () {
+            //TODO: Remove temporary hack, color history should be initilized
             this.addEventListener('firstDraw', this, false);
             this.application.ninja.colorController.colorView = this;
-                this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
-                this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];
-        }
+            this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}];
+            this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}];
+        }
     },
 
     handleFirstDraw: {
@@ -131,1521 +131,1526 @@ exports.ColorPanelBase = Montage.create(Component, {
             this.application.ninja.colorController.createToolbar();
             this.applyDefaultColors();
             this.removeEventListener('firstDraw', this, false);
+
+            // Workaround for delaying subtool colorchip creation until the color panel is initialized.
+            // This can be removed and the subtools must be updated once we create a new view for color buttons
+            // and they no longer rely on the view of the color panel.
+            this.application.ninja.colorController.colorPanelDrawn = true;
         }
     },
 
     ////////////////////////////////////////////////////////////////////
     //Assigning values and binding
     willDraw: {
-        enumerable: false,
-        value: function() {
-                ////////////////////////////////////////////////////////////
-                //TODO: remove ID dependencies
-                createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element);
-                createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element);
-                createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element);
-                createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element);
-                ////////////////////////////////////////////////////////////
-                //Function to create slider/hottext combination
-                function createCombo (c, slid, htid, color, e) {
+        enumerable: false,
+        value: function () {
+            ////////////////////////////////////////////////////////////
+            //TODO: remove ID dependencies
+            createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element);
+            createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element);
+            createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element);
+            createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element);
+            ////////////////////////////////////////////////////////////
+            //Function to create slider/hottext combination
+            f