From 1a759361b82127f9d5c1428dc889fffdf2daaf86 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Thu, 3 May 2012 15:11:56 -0700
Subject: 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.

---
 .../brush-properties.reel/brush-properties.js      |   1 +
 .../line-properties.reel/line-properties.js        |   8 ++
 .../oval-properties.reel/oval-properties.js        |   8 ++
 .../pen-properties.reel/pen-properties.css         |  20 ++++
 .../pen-properties.reel/pen-properties.html        |  16 ++-
 .../pen-properties.reel/pen-properties.js          |  83 +++++++++++++-
 .../rect-properties.reel/rect-properties.js        |  10 +-
 .../shape-properties.reel/shape-properties.css     |  22 +++-
 .../shape-properties.reel/shape-properties.html    |  14 ++-
 .../shape-properties.reel/shape-properties.js      | 125 +++++++++++++++++----
 .../text-properties.reel/text-properties.html      |   4 +-
 .../text-properties.reel/text-properties.js        |   1 -
 12 files changed, 274 insertions(+), 38 deletions(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js
index fdcd50f8..677cd2d9 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -36,6 +36,7 @@ exports.BrushProperties = Montage.create(ToolProperties, {
             }
         }
     },
+
     strokeSize: {
         get: function() { return this._strokeSize; }
     },
diff --git a/js/components/tools-properties/line-properties.reel/line-properties.js b/js/components/tools-properties/line-properties.reel/line-properties.js
index e1ecf790..ce8c0494 100755
--- a/js/components/tools-properties/line-properties.reel/line-properties.js
+++ b/js/components/tools-properties/line-properties.reel/line-properties.js
@@ -24,6 +24,14 @@ exports.LineProperties = Montage.create(ToolProperties, {
     },
 
      // Public API
+    fill: {
+        get: function () { return this.base.fill; }
+    },
+
+    stroke: {
+        get: function () { return this.base.stroke; }
+    },
+
     use3D: {
         get: function() { return this.base._use3D; }
     },
diff --git a/js/components/tools-properties/oval-properties.reel/oval-properties.js b/js/components/tools-properties/oval-properties.reel/oval-properties.js
index ddeb64ee..3edd9214 100755
--- a/js/components/tools-properties/oval-properties.reel/oval-properties.js
+++ b/js/components/tools-properties/oval-properties.reel/oval-properties.js
@@ -24,6 +24,14 @@ exports.OvalProperties = Montage.create(ToolProperties, {
     },
 
     // Public API
+    fill: {
+        get: function () { return this.base.fill; }
+    },
+
+    stroke: {
+        get: function () { return this.base.stroke; }
+    },
+
     use3D: {
         get: function() { return this.base._use3D; }
     },
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.css b/js/components/tools-properties/pen-properties.reel/pen-properties.css
index 7f1b0f7f..01a0ca1f 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.css
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css
@@ -4,3 +4,23 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+ 
+ .optionsPenTool {
+    padding: 6px;
+}
+
+ .optionsPenTool > * {
+    float:left;
+}
+
+ .optionsPenTool .fillColorCtrl,  .optionsPenTool .strokeColorCtrl {
+    width: 20px;
+    height: 18px;
+    margin: 2px 6px;
+}
+
+ .optionsPenTool .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    background-color: rgb(54, 54, 54);
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index e835f69d..176663df 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -28,20 +28,24 @@
                 "prototype": "js/components/tools-properties/pen-properties.reel",
                 "properties": {
                     "element": {"#": "penProperties"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
+                    "_strokeColorCtrl": {"#": "strokeColorCtrl"},
                     "_strokeSize": {"@": "strokeSizeHT"}
                 }
             }
     	}
-	    </script>
+        </script>
        
     </head>
 
     <body>
-    <div data-montage-id="penProperties" class="subToolHolderPanel">
-        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
-            <label class="label"> Stroke:</label>
-            <div id="strokeSize" class="label"></div>
-        </div>
+    <div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
+        <div class="colorCtrlIcon FillTool"></div>
+        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+        <div class="colorCtrlIcon PencilTool"></div>
+        <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
+        <label class="label"> Stroke:</label>
+        <div id="strokeSize" class="label"></div>
     </div>
     </body>
 
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index b57f9a6f..cd205e07 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -7,8 +7,87 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
-exports.PenProperties = Montage.create(ToolProperties, {
+var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
+    addedColorChips: { value: false },
+
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
+    },
+
+    _stroke: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
+    },
+
+    stroke: {
+        enumerable: true,
+        get: function () {
+            return this._stroke;
+        },
+        set: function (value) {
+            if (value !== this._stroke) {
+                this._stroke = value;
+            }
+        }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+
     strokeSize: {
-        get: function() { return this._strokeSize; }
+        get: function () {
+            return this._strokeSize; 
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(PenProperties).draw.call(this);
+
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                // setup fill color
+                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+
+                // setup stroke color
+                this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
+
+                this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+                this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
+
+                this.addedColorChips = true;
+            }
+
+            if (this.addedColorChips) {
+                this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+            }
+        }
+    },
+
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
+
+    handleStrokeColorChange: {
+        value: function (e) {
+            this.stroke = e._event;
+            this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
     }
 });
\ No newline at end of file
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index f023f4bb..c1cb3945 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -42,6 +42,14 @@ exports.RectProperties = Montage.create(ToolProperties, {
     },
 
     // Public API
+    fill: {
+        get: function () { return this.base.fill; }
+    },
+
+    stroke: {
+        get: function () { return this.base.stroke; }
+    },
+
     use3D: {
         get: function() { return this.base._use3D; }
     },
@@ -125,6 +133,4 @@ exports.RectProperties = Montage.create(ToolProperties, {
             
         }
     }
-
-
 });
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 0441c1cf..6efa615c 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -2,4 +2,24 @@
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
\ No newline at end of file
+ </copyright> */
+ 
+ .optionsShapeTool {
+    padding: 6px;
+}
+
+ .optionsShapeTool > * {
+    float:left;
+}
+
+ .optionsShapeTool .fillColorCtrl,  .optionsShapeTool .strokeColorCtrl {
+    width: 20px;
+    height: 18px;
+    margin: 2px 6px;
+}
+
+ .optionsShapeTool .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    background-color: rgb(54, 54, 54);
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 117664a3..d3faab75 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -36,6 +36,7 @@
                 }
             },
 
+
             "_strokeSize1": {
                 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                 "properties": {
@@ -108,6 +109,10 @@
                     "_materialLabel": {"#": "materialLabel"},
                     "_strokeIcon": {"#": "strokeIcon"},
 
+                    "_fillColorCtrlIcon": {"#": "fillColorCtrlIcon"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
+                    "_strokeColorCtrl": {"#": "strokeColorCtrl"},
+
                     "_strokeSize": {"@": "_strokeSize1"},
                     "ovalProperties": {"@": "ovalProperties1"},
                     "rectProperties": {"@": "rectProperties1"},
@@ -121,20 +126,23 @@
 
             }
     	}
-	    </script>
+        </script>
 
      
     </head>
 
     <body>
-        <div id="shapeProperties" class="subToolHolderPanel">
+        <div id="shapeProperties" class="subToolHolderPanel optionsShapeTool">
             <div id="shapeToolsList">
                 <div id="toolbutton"></div>
             </div>
+            <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+            <div class="colorCtrlIcon PencilTool"></div>
+            <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
 
             <label class="label">Stroke:</label>
             <div id="strokeControl" class="label"></div>
-
             <div id="customProperties">
                 <div id="ovalProperties" class="label"></div>
                 <div id="rectProperties" class="label"></div>
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index 79567453..74875544 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -8,12 +8,75 @@ var Montage = require("montage/core/core").Montage,
     ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
     ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
-exports.ShapeProperties = Montage.create(ToolProperties, {
+var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, {
     toolsData: { value: null },
-    _use3D:    { value: false },
+    _use3D: { value: false },
+    addedColorChips: { value: false },
+
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
+        //this._fillColorCtrl.color('nocolor', null);
+    },
+
+    _stroke: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
+    },
+
+    stroke: {
+        enumerable: true,
+        get: function () {
+            return this._stroke;
+        },
+        set: function (value) {
+            if (value !== this._stroke) {
+                this._stroke = value;
+            }
+        }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(ShapeProperties).draw.call(this);
+
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                // setup fill color
+                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+
+                // setup stroke color
+                this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
+
+                this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+                this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
+
+                this.addedColorChips = true;
+            }
+
+            if (this.addedColorChips) {
+                this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+            }
+        }
+    },
 
     _subPrepare: {
-        value: function() {
+        value: function () {
             this.rectProperties.visible = true;
 
             Object.defineBinding(this._strokeMaterial, "items", {
@@ -33,21 +96,32 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
         }
     },
 
-    _selectedSubTool: { value: null, enumerable: false},
+    _selectedSubTool: { value: null, enumerable: false },
 
-    selectedSubTool : {
-        get: function() { return this._selectedSubTool;},
-        set: function(value) {
-            if(value) {
+    selectedSubTool: {
+        get: function () { return this._selectedSubTool; },
+        set: function (value) {
+            if (value) {
 
-                this._selectedSubTool? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false;
+                this._selectedSubTool ? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false;
 
                 this._selectedSubTool = value;
                 this[this._selectedSubTool.properties].visible = true;
 
-                if(this._useWebGL.checked)
-                {
-                    if(this._selectedSubTool.id === "LineTool") {
+                if (this._selectedSubTool.id === "LineTool") {
+                    this._fillColorCtrl.style["display"] = "none";
+                    this._fillColorCtrl.visible = false;
+                    this._fillColorCtrlIcon.style["display"] = "none";
+                    this._fillColorCtrlIcon.visible = false;                    
+                } else {
+                    this._fillColorCtrl.style["display"] = "";
+                    this._fillColorCtrl.visible = true;
+                    this._fillColorCtrlIcon.style["display"] = "";
+                    this._fillColorCtrlIcon.visible = true;
+                }
+
+                if (this._useWebGL.checked) {
+                    if (this._selectedSubTool.id === "LineTool") {
                         this._fillIcon.style["display"] = "none";
                         this._fillMaterial.visible = false;
                     } else {
@@ -55,27 +129,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                         this._fillMaterial.visible = true;
                     }
                 }
-                
             }
         }
     },
 
     handleChange: {
-        value: function(event) {
-            if(this._useWebGL.checked)
-            {
+        value: function (event) {
+            if (this._useWebGL.checked) {
                 this._use3D = true;
                 this._materialLabel.style["display"] = "";
                 this._strokeIcon.style["display"] = "";
                 this._strokeMaterial.visible = true;
-                if(this.selectedSubTool.id !== "LineTool")
-                {
+                if (this.selectedSubTool.id !== "LineTool") {
                     this._fillIcon.style["display"] = "";
                     this._fillMaterial.visible = true;
                 }
             }
-            else
-            {
+            else {
                 this._use3D = false;
                 this._materialLabel.style["display"] = "none";
                 this._strokeIcon.style["display"] = "none";
@@ -84,6 +154,19 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                 this._fillMaterial.visible = false;
             }
         }
-    }
+    },
 
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
+
+    handleStrokeColorChange: {
+        value: function (e) {
+            this.stroke = e._event;
+            this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    }
 });
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index 03786d76..23de2bca 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -21,7 +21,7 @@
                     "fontSelection": {"@": "fontSelection"},
                     "fontSettings": {"@": "fontSettings"},
                     "fontSize": {"@": "fontSize"},
-                    "fontColor": {"@": "fontColor"},
+                    "fontColor": {"#": "fontColorCtrl"},
                     "btnBold": {"@": "btnBold"},
                     "btnItalic": {"@": "btnItalic"},
                     "btnUnderline": {"@": "btnUnderline"},
@@ -306,7 +306,7 @@
             <button id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <select id="fontSize" class="nj-skinned"></select>
-            <div class="fontColor"></div>
+            <div data-montage-id="fontColorCtrl" class="fontColor"></div>
             <div class="btnGroup">
                 <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button>
                 <button id="btnItalic" class="btnItalic nj-skinned" style="font-style: italic;"></button>
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index 88d38ffe..fa2ec066 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -202,7 +202,6 @@ exports.TextProperties = Montage.create(ToolProperties, {
             if (!this.initialized) {
 
                 //Setup Font Selection tool
-                this.fontColor = this.element.getElementsByClassName("fontColor")[0];
                 this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80};
                 this.application.ninja.colorController.addButton("chip", this.fontColor);
                 this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
-- 
cgit v1.2.3


From 29ad6355ef60cfb3b3fc7f780504f3ed30845883 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Mon, 7 May 2012 14:30:47 -0700
Subject: More implementation of moving color chips to the individual subtools.

Removed the tool color bar
Added new icons for inkbottle
Removed Pencil tool
Removed Inkbottle tool
Added chips to the pen, brush and tag tools
Aligned controls in several subtools
---
 .../layout/tools-list.reel/tools-list.html         | 10 -----
 js/components/layout/tools-list.reel/tools-list.js |  4 --
 .../tools-properties.reel/tools-properties.html    | 16 --------
 .../brush-properties.reel/brush-properties.css     | 22 ++++++++++
 .../brush-properties.reel/brush-properties.html    | 29 ++++++-------
 .../brush-properties.reel/brush-properties.js      | 48 +++++++++++++++++++++-
 .../fill-properties.reel/fill-properties.html      |  2 +-
 .../pen-properties.reel/pen-properties.css         |  8 ++--
 .../pen-properties.reel/pen-properties.html        |  5 ++-
 .../pencil-properties.reel/pencil-properties.css   |  6 ---
 .../pencil-properties.reel/pencil-properties.html  | 31 --------------
 .../pencil-properties.reel/pencil-properties.js    | 25 -----------
 .../shape-properties.reel/shape-properties.css     |  7 +++-
 .../shape-properties.reel/shape-properties.html    |  8 ++--
 .../tag-properties.reel/tag-properties.css         | 16 ++++++++
 .../tag-properties.reel/tag-properties.html        | 10 ++++-
 .../tag-properties.reel/tag-properties.js          | 47 ++++++++++++++++++++-
 js/components/ui/color-chip.reel/color-chip.css    | 10 -----
 18 files changed, 172 insertions(+), 132 deletions(-)
 delete mode 100755 js/components/tools-properties/pencil-properties.reel/pencil-properties.css
 delete mode 100755 js/components/tools-properties/pencil-properties.reel/pencil-properties.html
 delete mode 100755 js/components/tools-properties/pencil-properties.reel/pencil-properties.js

(limited to 'js/components')

diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html
index acee20b2..f559e748 100755
--- a/js/components/layout/tools-list.reel/tools-list.html
+++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -85,9 +85,6 @@
             "LineTool1": {
                 "prototype": "js/tools/LineTool"
             },
-            "PencilTool1": {
-                "prototype": "js/tools/PencilTool"
-            },
             "BrushTool1": {
                 "prototype": "js/tools/BrushTool"
             },
@@ -97,9 +94,6 @@
             "InkBottleTool1": {
                 "prototype": "js/tools/InkBottleTool"
             },
-            "EyedropperTool1": {
-                "prototype": "js/tools/EyedropperTool"
-            },
             "EraserTool1": {
                 "prototype": "js/tools/EraserTool"
             },
@@ -142,11 +136,9 @@
                     "OvalTool":               {"@": "OvalTool1"},
                     "RectTool":               {"@": "RectTool1"},
                     "LineTool":               {"@": "LineTool1"},
-                    "PencilTool":             {"@": "PencilTool1"},
                     "BrushTool":              {"@": "BrushTool1"},
                     "FillTool":               {"@": "FillTool1"},
                     "InkBottleTool":          {"@": "InkBottleTool1"},
-                    "EyedropperTool":         {"@": "EyedropperTool1"},
                     "EraserTool":             {"@": "EraserTool1"},
                     "RotateStageTool3D":      {"@": "RotateStageTool3D1"},
                     "PanTool":                {"@": "PanTool1"},
@@ -169,8 +161,6 @@
                     <hr />
                 </div>
             </div>
-            <!-- TODO: Remove and add as a component -->
-            <div id="colortoolbar"></div>
             <div id="disabledCondition" class="panelDisabled"></div>
         </div>
 
diff --git a/js/components/layout/tools-list.reel/tools-list.js b/js/components/layout/tools-list.reel/tools-list.js
index d68e8a56..ed4ee45f 100755
--- a/js/components/layout/tools-list.reel/tools-list.js
+++ b/js/components/layout/tools-list.reel/tools-list.js
@@ -20,11 +20,9 @@ exports.ToolsList = Montage.create(Component, {
     OvalTool:               { value: null },
     RectTool:               { value: null },
     LineTool:               { value: null },
-    PencilTool:             { value: null },
     BrushTool:              { value: null },
     FillTool:               { value: null },
     InkBottleTool:          { value: null },
-    EyedropperTool:         { value: null },
     EraserTool:             { value: null },
     RotateStageTool3D:      { value: null },
     PanTool:                { value: null },
@@ -68,10 +66,8 @@ exports.ToolsList = Montage.create(Component, {
             this.OvalTool.options = this.application.ninja.toolsProperties.shapeProperties.ovalProperties;
             this.RectTool.options = this.application.ninja.toolsProperties.shapeProperties.rectProperties;
             this.LineTool.options = this.application.ninja.toolsProperties.shapeProperties.lineProperties;
-            this.PencilTool.options = this.application.ninja.toolsProperties.pencilProperties;
             this.BrushTool.options = this.application.ninja.toolsProperties.brushProperties;
             
-            this.EyedropperTool.options = this.application.ninja.toolsProperties.eyedropperProperties;
             this.EraserTool.options = this.application.ninja.toolsProperties.eraserProperties;
             this.RotateStageTool3D.options = this.application.ninja.toolsProperties.rotateStageProperties;
             this.PanTool.options = this.application.ninja.toolsProperties.panProperties;
diff --git a/js/components/layout/tools-properties.reel/tools-properties.html b/js/components/layout/tools-properties.reel/tools-properties.html
index 8dd0f713..c51ab27d 100755
--- a/js/components/layout/tools-properties.reel/tools-properties.html
+++ b/js/components/layout/tools-properties.reel/tools-properties.html
@@ -66,12 +66,6 @@
                     }
                 }
             },
-            "pencilProperties1": {
-                "prototype": "js/components/tools-properties/pencil-properties.reel",
-                "properties": {
-                    "element": {"#": "pencilProperties"}
-                }
-            },
             "brushProperties1": {
                 "prototype": "js/components/tools-properties/brush-properties.reel",
                 "properties": {
@@ -90,12 +84,6 @@
                     "element": {"#": "inkbottleProperties"}
                 }
             },
-            "eyedropperProperties1": {
-                "prototype": "js/components/tools-properties/eyedropper-properties.reel",
-                "properties": {
-                    "element": {"#": "eyedropperProperties"}
-                }
-            },
             "eraserProperties1": {
                 "prototype": "js/components/tools-properties/eraser-properties.reel",
                 "properties": {
@@ -147,11 +135,9 @@
                     "penProperties":                {"@": "penProperties1"},
                     "textProperties":               {"@": "textProperties1"},
                     "shapeProperties":              {"@": "shapeProperties1"},
-                    "pencilProperties":             {"@": "pencilProperties1"},
                     "brushProperties":              {"@": "brushProperties1"},
                     "fillProperties":               {"@": "fillProperties1"},
                     "inkbottleProperties":          {"@": "inkbottleProperties1"},
-                    "eyedropperProperties":         {"@": "eyedropperProperties1"},
                     "eraserProperties":             {"@": "eraserProperties1"},
                     "rotateStageProperties":        {"@": "rotateStageProperties1"},
                     "panProperties":                {"@": "panProperties1"},
@@ -179,11 +165,9 @@
             <div id="penProperties"></div>
             <div id="textProperties"></div>
             <div id="shapeProperties"></div>
-            <div id="pencilProperties"></div>
             <div id="brushProperties"></div>
             <div id="fillProperties"></div>
             <div id="inkbottleProperties"></div>
-            <div id="eyedropperProperties"></div>
             <div id="eraserProperties"></div>
             <div id="rotateStageProperties"></div>
             <div id="panProperties"></div>
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.css b/js/components/tools-properties/brush-properties.reel/brush-properties.css
index 7f1b0f7f..0912dd7e 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.css
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.css
@@ -3,4 +3,26 @@
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
+ 
+ .optionsBrushTool {
+    padding: 6px;
+}
 
+ .optionsBrushTool > * {
+    float:left;
+}
+
+ .optionsBrushTool .fillColorCtrl {
+    width: 20px;
+    height: 18px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
+}
+
+ .optionsBrushTool .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index b0c02734..e4cd69b8 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -64,6 +64,7 @@
                 "prototype": "js/components/tools-properties/brush-properties.reel",
                 "properties": {
                     "element": {"#": "brushProperties"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
                     "_strokeSize": {"@": "strokeSizeHT"},
                     "_strokeHardness": {"@": "strokeHardnessHT"},
                     "_doSmoothing": {"#": "doSmoothing"},
@@ -74,24 +75,24 @@
                 }
             }
     	}
-	    </script>
+        </script>
 
     </head>
 
     <body>
-        <div data-montage-id="brushProperties" class="subToolHolderPanel">
-            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
-                <label class="label"> Width:</label>
-                <div id="strokeSize" class="label"></div>
-                <label class="label"> Hardness:</label>
-                <div id="strokeHardness" class="label"></div>
-                <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
-                <div id="smoothingAmount" class="label"></div>
-                <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
-                <label class="label" id="angleLabel"> Angle:</label>
-                <div id="strokeAngle" class="label"></div>
-
-            </div>
+        <div data-montage-id="brushProperties" class="subToolHolderPanel optionsBrushTool">
+            <div class="colorCtrlIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
+            <label class="label"> Width:</label>
+            <div id="strokeSize" class="label"></div>
+            <label class="label"> Hardness:</label>
+            <div id="strokeHardness" class="label"></div>
+            <input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
+            <div id="smoothingAmount" class="label"></div>
+            <input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
+            <label class="label" id="angleLabel">Angle:</label>
+            <div id="strokeAngle" class="label"></div>
         </div>
     </body>
 
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js
index 677cd2d9..7a0d21f1 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -8,7 +8,46 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
-exports.BrushProperties = Montage.create(ToolProperties, {
+var BrushProperties = exports.BrushProperties = Montage.create(ToolProperties, {
+    addedColorChips: { value: false },
+
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(BrushProperties).draw.call(this);
+
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+
+                this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+
+                this.addedColorChips = true;
+            }
+
+            if (this.addedColorChips) {
+                this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+            }
+        }
+    },
+
     _subPrepare: {
         value: function() {
             this.handleChange(null);
@@ -37,6 +76,13 @@ exports.BrushProperties = Montage.create(ToolProperties, {
         }
     },
 
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
+
     strokeSize: {
         get: function() { return this._strokeSize; }
     },
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index b81b09ba..6532907e 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -35,7 +35,7 @@
 
     <body>
         <div id="fillProperties" class="subToolHolderPanel">
-            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>
+            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> Use WebGL</label>
 
             <div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
                 <label class="label"> Materials:</label>
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.css b/js/components/tools-properties/pen-properties.reel/pen-properties.css
index 01a0ca1f..d08d0abd 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.css
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css
@@ -4,7 +4,6 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
- 
  .optionsPenTool {
     padding: 6px;
 }
@@ -16,11 +15,14 @@
  .optionsPenTool .fillColorCtrl,  .optionsPenTool .strokeColorCtrl {
     width: 20px;
     height: 18px;
-    margin: 2px 6px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
 }
 
  .optionsPenTool .colorCtrlIcon {
     width: 20px;
     height: 20px;
-    background-color: rgb(54, 54, 54);
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index 176663df..9bae188e 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -40,10 +40,11 @@
 
     <body>
     <div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
-        <div class="colorCtrlIcon FillTool"></div>
-        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
         <div class="colorCtrlIcon PencilTool"></div>
         <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
+        <div class="colorCtrlIcon FillTool"></div>
+        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+        <div class="nj-divider divider-vertical">&nbsp;</div>
         <label class="label"> Stroke:</label>
         <div id="strokeSize" class="label"></div>
     </div>
diff --git a/js/components/tools-properties/pencil-properties.reel/pencil-properties.css b/js/components/tools-properties/pencil-properties.reel/pencil-properties.css
deleted file mode 100755
index 7f1b0f7f..00000000
--- a/js/components/tools-properties/pencil-properties.reel/pencil-properties.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-
diff --git a/js/components/tools-properties/pencil-properties.reel/pencil-properties.html b/js/components/tools-properties/pencil-properties.reel/pencil-properties.html
deleted file mode 100755
index fc5f541e..00000000
--- a/js/components/tools-properties/pencil-properties.reel/pencil-properties.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE HTML>
-<!-- <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> -->
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-        <link rel="stylesheet" type="text/css" href="pencil-properties.css">
-
-        <script type="text/montage-serialization">
-        {
-
-            "owner": {
-                "prototype": "js/components/tools-properties/pencil-properties.reel",
-                "properties": {
-                    "element": {"#": "pencilProperties"}
-                }
-            }
-    	}
-	    </script>
-       
-    </head>
-
-    <body>
-        <div id="pencilProperties" class="subToolHolderPanel">
-        </div>
-    </body>
-
-</html>
\ No newline at end of file
diff --git a/js/components/tools-properties/pencil-properties.reel/pencil-properties.js b/js/components/tools-properties/pencil-properties.reel/pencil-properties.js
deleted file mode 100755
index e1be4b5e..00000000
--- a/js/components/tools-properties/pencil-properties.reel/pencil-properties.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
-
-exports.PencilProperties = Montage.create(ToolProperties, {
-
-    
-    _subPrepare: {
-        value: function() {
-            //this.divElement.addEventListener("click", this, false);
-        }
-    },
-
-    handleClick: {
-        value: function(event) {
-           // this.selectedElement = event._event.target.id;
-        }
-    }
-});
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 6efa615c..1100bc70 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -5,7 +5,7 @@
  </copyright> */
  
  .optionsShapeTool {
-    padding: 6px;
+    padding: 4px;
 }
 
  .optionsShapeTool > * {
@@ -16,10 +16,13 @@
     width: 20px;
     height: 18px;
     margin: 2px 6px;
+    border: 1px black solid;
 }
 
  .optionsShapeTool .colorCtrlIcon {
     width: 20px;
     height: 20px;
-    background-color: rgb(54, 54, 54);
+    margin-top: 2px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index d3faab75..3c492e6e 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -136,11 +136,11 @@
             <div id="shapeToolsList">
                 <div id="toolbutton"></div>
             </div>
-            <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
-            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
             <div class="colorCtrlIcon PencilTool"></div>
             <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
-
+            <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
             <label class="label">Stroke:</label>
             <div id="strokeControl" class="label"></div>
             <div id="customProperties">
@@ -149,7 +149,7 @@
                 <div id="lineProperties" class="label"></div>
             </div>
 
-            <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/>Use WebGL</label>
+            <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>Use WebGL</label>
 
             <label id="materialLabel" class="label">Material:</label>
             <div id="strokeIcon" class="pencilToolUp" style="float: left;"></div>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css
index 7f1b0f7f..7969dff9 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.css
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css
@@ -4,3 +4,19 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+ .tagRadioButtons .fillColorCtrl {
+    width: 18px;
+    height: 18px;
+    margin-top: 6px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
+}
+
+ .tagRadioButtons .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 6px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index c80ba36e..379c37a0 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -17,7 +17,9 @@
                 "properties": {
                     "element": {"#": "tagProperties"},
 
-                    "divElement": {"#": "divTool"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
+
+                   "divElement": {"#": "divTool"},
                     "imageElement": {"#": "imageTool"},
                     "videoElement": {"#": "videoTool"},
                     "canvasElement": {"#": "canvasTool"},
@@ -30,13 +32,17 @@
                 }
             }
     	}
-	    </script>
+        </script>
        
     </head>
 
     <body>
         <div id="tagProperties" class="subToolHolderPanel">
             <div id="tagToolContainer" class="tagRadioButtons">
+                <div class="leftLabel colorCtrlIcon FillTool"></div>
+                <div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
+                <div class="nj-divider divider-vertical">&nbsp;</div>
+
                 <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
                 <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
                 <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 1caabc35..32063d9a 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -8,7 +8,7 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
-exports.TagProperties = Montage.create(ToolProperties, {
+var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
     divElement:     { value: null, enumerable: false },
     imageElement:   { value: null, enumerable: false },
     videoElement:   { value: null, enumerable: false },
@@ -17,6 +17,24 @@ exports.TagProperties = Montage.create(ToolProperties, {
     classField:     { value: null, enumerable: false },
     customName:     { value: null, enumerable: false },
     customLabel:    { value: null, enumerable: false },
+    addedColorChips: { value: false },
+
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'nocolor', color: null, webGlColor: null }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
 
     _subPrepare: {
         value: function() {
@@ -31,6 +49,33 @@ exports.TagProperties = Montage.create(ToolProperties, {
         }
     },
 
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(TagProperties).draw.call(this);
+
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+
+                this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+
+                this.addedColorChips = true;
+            }
+
+            if (this.addedColorChips) {
+                this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+            }
+        }
+    },
+
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
+
     handleClick: {
         value: function(event) {
             this.selectedElement = event._event.target.id;
diff --git a/js/components/ui/color-chip.reel/color-chip.css b/js/components/ui/color-chip.reel/color-chip.css
index da75c41e..7c7135a2 100755
--- a/js/components/ui/color-chip.reel/color-chip.css
+++ b/js/components/ui/color-chip.reel/color-chip.css
@@ -19,13 +19,3 @@
     padding: 0;
     background: none;
 }
-
-.colortoolbar .chipContainer {
-	margin: 1px 1px 1px 1px !important;
-	width: 40px !important;
-	height: 20px !important;
-    border: 0;
-    padding: 0;
-    background-image: url(../../../../images/colorpanel/transparent.png) !important;
-    background-repeat: repeat !important;
-}
\ No newline at end of file
-- 
cgit v1.2.3


From 33bb9b7e97e9ec3bd664b3e1c3e7297ba8d07ede Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Mon, 7 May 2012 15:44:18 -0700
Subject: more work on making subtool styling/layout consistent

---
 .../fill-properties.reel/fill-properties.css                 |  7 +++++++
 .../fill-properties.reel/fill-properties.html                |  5 ++---
 .../selection-properties.reel/selection-properties.css       |  8 ++++++--
 .../selection-properties.reel/selection-properties.html      | 12 ++++++------
 .../shape-properties.reel/shape-properties.html              |  2 +-
 5 files changed, 22 insertions(+), 12 deletions(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.css b/js/components/tools-properties/fill-properties.reel/fill-properties.css
index 7f1b0f7f..58b1c1e8 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.css
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.css
@@ -4,3 +4,10 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+.optionsFillTool {
+    padding: 6px;
+}
+
+ .optionsFillTool > * {
+    float:left;
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index 6532907e..abc2e843 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -34,9 +34,8 @@
     </head>
 
     <body>
-        <div id="fillProperties" class="subToolHolderPanel">
-            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> Use WebGL</label>
-
+        <div id="fillProperties" class="subToolHolderPanel optionsFillTool">
+            <input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
             <div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
                 <label class="label"> Materials:</label>
                 <div id="fillIcon" class="bucketToolUp" style="float: left;"></div>
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.css b/js/components/tools-properties/selection-properties.reel/selection-properties.css
index e3fe1755..1d5eb513 100755
--- a/js/components/tools-properties/selection-properties.reel/selection-properties.css
+++ b/js/components/tools-properties/selection-properties.reel/selection-properties.css
@@ -4,6 +4,10 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-.selectionProperties {
-    margin-top: -6px;
+.optionsSelectionTool {
+    padding: 6px;
+}
+
+ .optionsSelectionTool > * {
+    float:left;
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.html b/js/components/tools-properties/selection-properties.reel/selection-properties.html
index f0b907af..3d2456c6 100755
--- a/js/components/tools-properties/selection-properties.reel/selection-properties.html
+++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html
@@ -25,18 +25,18 @@
     </head>
 
     <body>
-        <div id="selectionProperties" class="subToolHolderPanel">
-            <label class="label subOption optionLabel"><input id="transformCheck" type="checkbox" name="transformControl" class="checkBoxAlign"/>Transform Controls</label>
+        <div id="selectionProperties" class="subToolHolderPanel optionsSelectionTool">
+            <input id="transformCheck" type="checkbox" name="transformControl" class="nj-skinned"/><label class="label">Transform Controls&nbsp&nbsp</label>
             <div id="toolPropertiesPanel-selectionDivOptions">
                 <div class="subOption"><div id="topAlign" class="topAlignUp" title="Top Align"></div></div>
                 <div class="subOption"><div id="rightAlign" class="rightAlignUp" title="Right Align"></div></div>
-                <div class="subOption"><div id="bottomAlign" class="bottomAlignUp" title="Bottom Align"></div></div>
-                <div class="subOption"><div id="vLeft" class="verticalLeftUp" title="Vertical Left"></div></div>
+                <div class="subOption subOptionSpacer"><div id="bottomAlign" class="bottomAlignUp" title="Bottom Align"></div></div>
+                <div class="subOption "><div id="vLeft" class="verticalLeftUp" title="Vertical Left"></div></div>
                 <div class="subOption"><div id="vRight" class="verticalRightUp" title="Vertical Right"></div></div>
-                <div class="subOption"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div>
+                <div class="subOption subOptionSpacer"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div>
                 <div class="subOption"><div id="distTop" class="distTopUp" title="Distance Top"></div></div>
                 <div class="subOption"><div id="distCenter" class="distCenterUp" title="Distance Center"></div></div>
-                <div class="subOption"><div id="distBottom" class="distBottomUp" title="Distance Bottom"></div></div>
+                <div class="subOption subOptionSpacer"><div id="distBottom" class="distBottomUp" title="Distance Bottom"></div></div>
                 <div class="subOption"><div id="distLeft" class="distLeftUp" title="Distance Left"></div></div>
                 <div class="subOption"><div id="distVCenter" class="distVCenterUp" title="Distance Center"></div></div>
                 <div class="subOption"><div id="distRight" class="distRightUp" title="Distance Right"></div></div>
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 3c492e6e..cc3534f2 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -149,7 +149,7 @@
                 <div id="lineProperties" class="label"></div>
             </div>
 
-            <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>Use WebGL</label>
+            <input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
 
             <label id="materialLabel" class="label">Material:</label>
             <div id="strokeIcon" class="pencilToolUp" style="float: left;"></div>
-- 
cgit v1.2.3


From 1196fcee1c7e5e86edb387cdbc1b08d40926ca15 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Mon, 7 May 2012 17:39:30 -0700
Subject: Fixed missing quote from last merge

---
 .../tools-properties/brush-properties.reel/brush-properties.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index 38b317e2..a820dd04 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -91,7 +91,7 @@
             <input data-montage-id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
             <div data-montage-id="smoothingAmount" class="label"></div>
             <input data-montage-id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
-            <label data-montage-id="angleLabel class="label"">Angle:</label>
+            <label data-montage-id="angleLabel" class="label"">Angle:</label>
             <div data-montage-id="strokeAngle" class="label"></div>
         </div>
     </body>
-- 
cgit v1.2.3


From dd663d8fe9191cc57c9cebe6d425562cb45982c2 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Tue, 8 May 2012 07:25:09 -0700
Subject: Removed unused SubSelect Tool

---
 .../layout/tools-list.reel/tools-list.html         |  4 ---
 js/components/layout/tools-list.reel/tools-list.js |  2 --
 .../tools-properties.reel/tools-properties.html    |  8 ------
 .../subselection-properties.html                   | 32 ----------------------
 .../subselection-properties.js                     | 14 ----------
 5 files changed, 60 deletions(-)
 delete mode 100755 js/components/tools-properties/subselection-properties.reel/subselection-properties.html
 delete mode 100755 js/components/tools-properties/subselection-properties.reel/subselection-properties.js

(limited to 'js/components')

diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html
index 0c51aa9a..d5c33624 100755
--- a/js/components/layout/tools-list.reel/tools-list.html
+++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -55,9 +55,6 @@
             "SelectionTool1": {
                 "prototype": "js/tools/SelectionTool"
             },
-            "SubselectionTool1": {
-                "prototype": "js/tools/SubSelectTool"
-            },
             "Rotate3DTool1": {
                 "prototype": "js/tools/RotateObject3DTool"
             },
@@ -126,7 +123,6 @@
                 "properties": {
                     "element": {"#": "toolsList"},
                     "SelectionTool":          {"@": "SelectionTool1"},
-                    "SubselectionTool":       {"@": "SubselectionTool1"},
                     "Rotate3DTool":           {"@": "Rotate3DTool1"},
                     "Translate3DTool":        {"@": "Translate3DTool1"},
                     "TagTool":                {"@": "TagTool1"},
diff --git a/js/components/layout/tools-list.reel/tools-list.js b/js/components/layout/tools-list.reel/tools-list.js
index ed4ee45f..a10b6c3e 100755
--- a/js/components/layout/tools-list.reel/tools-list.js
+++ b/js/components/layout/tools-list.reel/tools-list.js
@@ -10,7 +10,6 @@ var Component = require("montage/ui/component").Component;
 exports.ToolsList = Montage.create(Component, {
 
     SelectionTool:          { value: null },
-    SubselectionTool:       { value: null },
     Rotate3DTool:           { value: null },
     Translate3DTool:        { value: null },
     TagTool:                { value: null },
@@ -51,7 +50,6 @@ exports.ToolsList = Montage.create(Component, {
             this.PenTool.options = this.application.ninja.toolsProperties.shapeProperties.lineProperties;//this.application.Ninja.toolsProperties.penProperties;
 
             this.SelectionTool.options = this.application.ninja.toolsProperties.selectionProperties;
-            this.SubselectionTool.options = this.application.ninja.toolsProperties.subSelectionProperties;
 
             this.Rotate3DTool.options = this.application.ninja.toolsProperties.rotate3DProperties;
             this.Translate3DTool.options = this.application.ninja.toolsProperties.rotate3DProperties;
diff --git a/js/components/layout/tools-properties.reel/tools-properties.html b/js/components/layout/tools-properties.reel/tools-properties.html
index a24ce658..e7d1ac8b 100755
--- a/js/components/layout/tools-properties.reel/tools-properties.html
+++ b/js/components/layout/tools-properties.reel/tools-properties.html
@@ -18,12 +18,6 @@
                     "element": {"#": "selectionProperties"}
                 }
             },
-            "subSelectionProperties1": {
-                "prototype": "js/components/tools-properties/subselection-properties.reel[SubSelectionProperties]",
-                "properties": {
-                    "element": {"#": "subSelectionProperties"}
-                }
-            },
             "object3DProperties1": {
                 "prototype": "js/components/tools-properties/object3d-properties.reel[Object3DProperties]",
                 "properties": {
@@ -128,7 +122,6 @@
                 "properties": {
                     "element": {"#": "toolsProperties"},
                     "selectionProperties":          {"@": "selectionProperties1"},
-                    "subSelectionProperties":       {"@": "subSelectionProperties1"},
                     "rotate3DProperties":           {"@": "object3DProperties1"},
                     "translate3DProperties":        {"@": "object3DProperties1"},
                     "tagProperties":                {"@": "tagProperties1"},
@@ -159,7 +152,6 @@
     <body>
         <di