24 files changed, 455 insertions, 128 deletions
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 e7aaf0e8..38b317e2 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"},
@@ -79,19 +80,19 @@
    </head>
    <body>
-        <div data-montage-id="brushProperties" class="subToolHolderPanel">
+        <div data-montage-id="brushProperties" class="subToolHolderPanel optionsBrushTool">
-            <div data-montage-id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+            <div class="colorCtrlIcon FillTool"></div>
-                <label class="label"> Width:</label>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
-                <div data-montage-id="strokeSize" class="label"></div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
-                <label class="label"> Hardness:</label>
+            <label class="label"> Width:</label>
-                <div data-montage-id="strokeHardness" class="label"></div>
+            <div data-montage-id="strokeSize" class="label"></div>
-                <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
+            <label class="label"> Hardness:</label>
-                <div data-montage-id="smoothingAmount" class="label"></div>
+            <div data-montage-id="strokeHardness" class="label"></div>
-                <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
+            <input data-montage-id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
-                <label class="label" id="angleLabel"> Angle:</label>
+            <div data-montage-id="smoothingAmount" class="label"></div>
-                <div data-montage-id="strokeAngle" 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>
-            </div>
+            <div data-montage-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 fdcd50f8..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);
@@ -36,6 +75,14 @@ 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/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 @@
3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
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
		7	.optionsBrushTool {
		8	padding: 6px;
		9	}
6		10
		11	.optionsBrushTool > * {
		12	float:left;
		13	}
		14
		15	.optionsBrushTool .fillColorCtrl {
		16	width: 20px;
		17	height: 18px;
		18	margin-left: 3px;
		19	margin-right: 8px;
		20	border: 1px black solid;
		21	}
		22
		23	.optionsBrushTool .colorCtrlIcon {
		24	width: 20px;
		25	height: 20px;
		26	-webkit-transform: scale(0.8);
		27	background-color: rgb(40, 40, 40);
		28	} \ 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 e7aaf0e8..38b317e2 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 @@
64	"prototype": "js/components/tools-properties/brush-properties.reel",	64	"prototype": "js/components/tools-properties/brush-properties.reel",
65	"properties": {	65	"properties": {
66	"element": {"#": "brushProperties"},	66	"element": {"#": "brushProperties"},
		67	"_fillColorCtrl": {"#": "fillColorCtrl"},
67	"_strokeSize": {"@": "strokeSizeHT"},	68	"_strokeSize": {"@": "strokeSizeHT"},
68	"_strokeHardness": {"@": "strokeHardnessHT"},	69	"_strokeHardness": {"@": "strokeHardnessHT"},
69	"_doSmoothing": {"#": "doSmoothing"},	70	"_doSmoothing": {"#": "doSmoothing"},
@@ -79,19 +80,19 @@
79	</head>	80	</head>
80		81
81	<body>	82	<body>
82	<div data-montage-id="brushProperties" class="subToolHolderPanel">	83	<div data-montage-id="brushProperties" class="subToolHolderPanel optionsBrushTool">
83	<div data-montage-id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">	84	<div class="colorCtrlIcon FillTool"></div>
84	<label class="label"> Width:</label>	85	<div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
85	<div data-montage-id="strokeSize" class="label"></div>	86	<div class="nj-divider divider-vertical"> </div>
86	<label class="label"> Hardness:</label>	87	<label class="label"> Width:</label>
87	<div data-montage-id="strokeHardness" class="label"></div>	88	<div data-montage-id="strokeSize" class="label"></div>
88	<label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>	89	<label class="label"> Hardness:</label>
89	<div data-montage-id="smoothingAmount" class="label"></div>	90	<div data-montage-id="strokeHardness" class="label"></div>
90	<label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>	91	<input data-montage-id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
91	<label class="label" id="angleLabel"> Angle:</label>	92	<div data-montage-id="smoothingAmount" class="label"></div>
92	<div data-montage-id="strokeAngle" class="label"></div>	93	<input data-montage-id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
93		94	<label data-montage-id="angleLabel class="label"">Angle:</label>
94	</div>	95	<div data-montage-id="strokeAngle" class="label"></div>
95	</div>	96	</div>
96	</body>	97	</body>
97		98


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..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;
8	var Component = require("montage/ui/component").Component;	8	var Component = require("montage/ui/component").Component;
9	var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;	9	var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
10		10
11	exports.BrushProperties = Montage.create(ToolProperties, {	11	var BrushProperties = exports.BrushProperties = Montage.create(ToolProperties, {
		12	addedColorChips: { value: false },
		13
		14	_fill: {
		15	enumerable: false,
		16	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] }
		17	},
		18
		19	fill: {
		20	enumerable: true,
		21	get: function () {
		22	return this._fill;
		23	},
		24	set: function (value) {
		25	if (value !== this._fill) {
		26	this._fill = value;
		27	}
		28	}
		29	},
		30
		31	draw: {
		32	enumerable: false,
		33	value: function () {
		34	Object.getPrototypeOf(BrushProperties).draw.call(this);
		35
		36	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		37	this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		38	this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
		39
		40	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		41
		42	this.addedColorChips = true;
		43	}
		44
		45	if (this.addedColorChips) {
		46	this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
		47	}
		48	}
		49	},
		50
12	_subPrepare: {	51	_subPrepare: {
13	value: function() {	52	value: function() {
14	this.handleChange(null);	53	this.handleChange(null);
@@ -36,6 +75,14 @@ exports.BrushProperties = Montage.create(ToolProperties, {
36	}	75	}
37	}	76	}
38	},	77	},
		78
		79	handleFillColorChange: {
		80	value: function (e) {
		81	this.fill = e._event;
		82	this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		83	}
		84	},
		85
39	strokeSize: {	86	strokeSize: {
40	get: function() { return this._strokeSize; }	87	get: function() { return this._strokeSize; }
41	},	88