12 files changed, 274 insertions, 38 deletions
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 data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
-        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+        <div class="colorCtrlIcon FillTool"></div>
-            <label class="label"> Stroke:</label>
+        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
-            <div id="strokeSize" class="label"></div>
+        <div class="colorCtrlIcon PencilTool"></div>
-        </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);

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, {
36	}	36	}
37	}	37	}
38	},	38	},
		39
39	strokeSize: {	40	strokeSize: {
40	get: function() { return this._strokeSize; }	41	get: function() { return this._strokeSize; }
41	},	42	},


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, {
24	},	24	},
25		25
26	// Public API	26	// Public API
		27	fill: {
		28	get: function () { return this.base.fill; }
		29	},
		30
		31	stroke: {
		32	get: function () { return this.base.stroke; }
		33	},
		34
27	use3D: {	35	use3D: {
28	get: function() { return this.base._use3D; }	36	get: function() { return this.base._use3D; }
29	},	37	},


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, {
24	},	24	},
25		25
26	// Public API	26	// Public API
		27	fill: {
		28	get: function () { return this.base.fill; }
		29	},
		30
		31	stroke: {
		32	get: function () { return this.base.stroke; }
		33	},
		34
27	use3D: {	35	use3D: {
28	get: function() { return this.base._use3D; }	36	get: function() { return this.base._use3D; }
29	},	37	},


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 @@
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
6		6
		7
		8	.optionsPenTool {
		9	padding: 6px;
		10	}
		11
		12	.optionsPenTool > * {
		13	float:left;
		14	}
		15
		16	.optionsPenTool .fillColorCtrl, .optionsPenTool .strokeColorCtrl {
		17	width: 20px;
		18	height: 18px;
		19	margin: 2px 6px;
		20	}
		21
		22	.optionsPenTool .colorCtrlIcon {
		23	width: 20px;
		24	height: 20px;
		25	background-color: rgb(54, 54, 54);
		26	} \ 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 @@
28	"prototype": "js/components/tools-properties/pen-properties.reel",	28	"prototype": "js/components/tools-properties/pen-properties.reel",
29	"properties": {	29	"properties": {
30	"element": {"#": "penProperties"},	30	"element": {"#": "penProperties"},
		31	"_fillColorCtrl": {"#": "fillColorCtrl"},
		32	"_strokeColorCtrl": {"#": "strokeColorCtrl"},
31	"_strokeSize": {"@": "strokeSizeHT"}	33	"_strokeSize": {"@": "strokeSizeHT"}
32	}	34	}
33	}	35	}
34	}	36	}
35	</script>	37	</script>
36		38
37	</head>	39	</head>
38		40
39	<body>	41	<body>
40	<div data-montage-id="penProperties" class="subToolHolderPanel">	42	<div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
41	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">	43	<div class="colorCtrlIcon FillTool"></div>
42	<label class="label"> Stroke:</label>	44	<div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
43	<div id="strokeSize" class="label"></div>	45	<div class="colorCtrlIcon PencilTool"></div>
44	</div>	46	<div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
		47	<label class="label"> Stroke:</label>
		48	<div id="strokeSize" class="label"></div>
45	</div>	49	</div>
46	</body>	50	</body>
47		51


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
7	var Montage = require("montage/core/core").Montage;	7	var Montage = require("montage/core/core").Montage;
8	var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;	8	var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
9		9
10	exports.PenProperties = Montage.create(ToolProperties, {	10	var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
		11	addedColorChips: { value: false },
		12
		13	_fill: {
		14	enumerable: false,
		15	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] }
		16	},
		17
		18	_stroke: {
		19	enumerable: false,
		20	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] }
		21	},
		22
		23	stroke: {
		24	enumerable: true,
		25	get: function () {
		26	return this._stroke;
		27	},
		28	set: function (value) {
		29	if (value !== this._stroke) {
		30	this._stroke = value;
		31	}
		32	}
		33	},
		34
		35	fill: {
		36	enumerable: true,
		37	get: function () {
		38	return this._fill;
		39	},
		40	set: function (value) {
		41	if (value !== this._fill) {
		42	this._fill = value;
		43	}
		44	}
		45	},
		46
11	strokeSize: {	47	strokeSize: {
12	get: function() { return this._strokeSize; }	48	get: function () {
		49	return this._strokeSize;
		50	}
		51	},
		52
		53	draw: {
		54	enumerable: false,
		55	value: function () {
		56	Object.getPrototypeOf(PenProperties).draw.call(this);
		57
		58	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		59	// setup fill color
		60	this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		61	this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
		62
		63	// setup stroke color
		64	this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		65	this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
		66
		67	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		68