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