3 files changed, 70 insertions, 10 deletions
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..606e73b3 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,11 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
+.materialsContainerOptions select {
+    margin-top: 2px;
+}
+.materialsContainerOptions label {
+    margin-right: 3px;
+}
+\ 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 b81b09ba..734966dc 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -23,24 +23,31 @@
                "prototype": "js/components/tools-properties/fill-properties.reel",
                "properties": {
                    "element": {"#": "fillProperties"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
                    "_useWebGL": {"#": "useWebGLCH"},
                    "_materialsContainer": {"#": "materialsContainer"},
                    "_fillMaterial": {"@": "_fillMaterialCB"}
                }
            }
        }
-            </script>
+        </script>
    </head>
    <body>
-        <div id="fillProperties" class="subToolHolderPanel">
+        <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">
-            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>
+            <div class="toolColorChipIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
-            <div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
+            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
-                <label class="label"> Materials:</label>
+            <label class="label">Use WebGL</label>
-                <div id="fillIcon" class="bucketToolUp" style="float: left;"></div>
+            <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren">
-                <select id="fillMaterialCB" class="nj-skinned">
+                <label class="label">Material:</label>
+                <div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div>
+                <select data-montage-id="fillMaterialCB" class="nj-skinned">
                </select>
            </div>
        </div>
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js
index 61b667d7..ae136956 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -8,10 +8,55 @@ 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.FillProperties = Montage.create(ToolProperties, {
+var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
+    _use3D: { value: false },
+    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(FillProperties).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);
+        }
+    },
-    _use3D:    { value: false },
-    
    _subPrepare: {
        value: function() {
            Object.defineBinding(this._fillMaterial, "items", {

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..606e73b3 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,11 @@
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	.materialsContainerOptions select {
		9	margin-top: 2px;
		10	}
		11
		12	.materialsContainerOptions label {
		13	margin-right: 3px;
		14	} \ 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 b81b09ba..734966dc 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -23,24 +23,31 @@
23	"prototype": "js/components/tools-properties/fill-properties.reel",	23	"prototype": "js/components/tools-properties/fill-properties.reel",
24	"properties": {	24	"properties": {
25	"element": {"#": "fillProperties"},	25	"element": {"#": "fillProperties"},
		26
		27	"_fillColorCtrl": {"#": "fillColorCtrl"},
		28
26	"_useWebGL": {"#": "useWebGLCH"},	29	"_useWebGL": {"#": "useWebGLCH"},
27	"_materialsContainer": {"#": "materialsContainer"},	30	"_materialsContainer": {"#": "materialsContainer"},
28	"_fillMaterial": {"@": "_fillMaterialCB"}	31	"_fillMaterial": {"@": "_fillMaterialCB"}
29	}	32	}
30	}	33	}
31	}	34	}
32	</script>	35	</script>
33		36
34	</head>	37	</head>
35		38
36	<body>	39	<body>
37	<div id="fillProperties" class="subToolHolderPanel">	40	<div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">
38	<label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>	41	<div class="toolColorChipIcon FillTool"></div>
		42	<div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
		43	<div class="nj-divider divider-vertical toolOptionsSpacer"> </div>
39		44
40	<div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">	45	<input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
41	<label class="label"> Materials:</label>	46	<label class="label">Use WebGL</label>
42	<div id="fillIcon" class="bucketToolUp" style="float: left;"></div>	47	<div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren">
43	<select id="fillMaterialCB" class="nj-skinned">	48	<label class="label">Material:</label>
		49	<div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div>
		50	<select data-montage-id="fillMaterialCB" class="nj-skinned">
44	</select>	51	</select>
45	</div>	52	</div>
46	</div>	53	</div>


diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js index 61b667d7..ae136956 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.js +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -8,10 +8,55 @@ var Montage = require("montage/core/core").Montage,
8	ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,	8	ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
9	ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;	9	ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
10		10
11	exports.FillProperties = Montage.create(ToolProperties, {	11	var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
		12
		13	_use3D: { value: false },
		14	addedColorChips: { value: false },
		15
		16	_fill: {
		17	enumerable: false,
		18	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] }
		19	},
		20
		21	fill: {
		22	enumerable: true,
		23	get: function () {
		24	return this._fill;
		25	},
		26	set: function (value) {
		27	if (value !== this._fill) {
		28	this._fill = value;
		29	}
		30	}
		31	},
		32
		33	draw: {
		34	enumerable: false,
		35	value: function () {
		36	Object.getPrototypeOf(FillProperties).draw.call(this);
		37
		38	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		39	this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		40	this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
		41
		42	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		43
		44	this.addedColorChips = true;
		45	}
		46
		47	if (this.addedColorChips) {
		48	this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
		49	}
		50	}
		51	},
		52
		53	handleFillColorChange: {
		54	value: function (e) {
		55	this.fill = e._event;
		56	this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		57	}
		58	},
12		59
13	_use3D: { value: false },
14
15	_subPrepare: {	60	_subPrepare: {
16	value: function() {	61	value: function() {
17	Object.defineBinding(this._fillMaterial, "items", {	62	Object.defineBinding(this._fillMaterial, "items", {