3 files changed, 136 insertions, 25 deletions
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 : {
+    selectedSubTool: {
-        get: function() { return this._selectedSubTool;},
+        get: function () { return this._selectedSubTool; },
-        set: function(value) {
+        set: function (value) {
-            if(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;

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 @@
2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
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> */ \ No newline at end of file	5	</copyright> */
		6
		7	.optionsShapeTool {
		8	padding: 6px;
		9	}
		10
		11	.optionsShapeTool > * {
		12	float:left;
		13	}
		14
		15	.optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl {
		16	width: 20px;
		17	height: 18px;
		18	margin: 2px 6px;
		19	}
		20
		21	.optionsShapeTool .colorCtrlIcon {
		22	width: 20px;
		23	height: 20px;
		24	background-color: rgb(54, 54, 54);
		25	} \ 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 @@
36	}	36	}
37	},	37	},
38		38
		39
39	"_strokeSize1": {	40	"_strokeSize1": {
40	"prototype": "js/components/hottextunit.reel[HotTextUnit]",	41	"prototype": "js/components/hottextunit.reel[HotTextUnit]",
41	"properties": {	42	"properties": {
@@ -108,6 +109,10 @@
108	"_materialLabel": {"#": "materialLabel"},	109	"_materialLabel": {"#": "materialLabel"},
109	"_strokeIcon": {"#": "strokeIcon"},	110	"_strokeIcon": {"#": "strokeIcon"},
110		111
		112	"_fillColorCtrlIcon": {"#": "fillColorCtrlIcon"},
		113	"_fillColorCtrl": {"#": "fillColorCtrl"},
		114	"_strokeColorCtrl": {"#": "strokeColorCtrl"},
		115
111	"_strokeSize": {"@": "_strokeSize1"},	116	"_strokeSize": {"@": "_strokeSize1"},
112	"ovalProperties": {"@": "ovalProperties1"},	117	"ovalProperties": {"@": "ovalProperties1"},
113	"rectProperties": {"@": "rectProperties1"},	118	"rectProperties": {"@": "rectProperties1"},
@@ -121,20 +126,23 @@
121		126
122	}	127	}
123	}	128	}
124	</script>	129	</script>
125		130
126		131
127	</head>	132	</head>
128		133
129	<body>	134	<body>
130	<div id="shapeProperties" class="subToolHolderPanel">	135	<div id="shapeProperties" class="subToolHolderPanel optionsShapeTool">
131	<div id="shapeToolsList">	136	<div id="shapeToolsList">
132	<div id="toolbutton"></div>	137	<div id="toolbutton"></div>
133	</div>	138	</div>
		139	<div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
		140	<div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
		141	<div class="colorCtrlIcon PencilTool"></div>
		142	<div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
134		143
135	<label class="label">Stroke:</label>	144	<label class="label">Stroke:</label>
136	<div id="strokeControl" class="label"></div>	145	<div id="strokeControl" class="label"></div>
137
138	<div id="customProperties">	146	<div id="customProperties">
139	<div id="ovalProperties" class="label"></div>	147	<div id="ovalProperties" class="label"></div>
140	<div id="rectProperties" class="label"></div>	148	<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,
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.ShapeProperties = Montage.create(ToolProperties, {	11	var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, {
12	toolsData: { value: null },	12	toolsData: { value: null },
13	_use3D: { value: false },	13	_use3D: { value: false },
		14	addedColorChips: { value: false },
		15
		16	_fill: {
		17	enumerable: false,
		18	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] }
		19	//this._fillColorCtrl.color('nocolor', null);
		20	},
		21
		22	_stroke: {
		23	enumerable: false,
		24	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] }
		25	},
		26
		27	stroke: {
		28	enumerable: true,
		29	get: function () {
		30	return this._stroke;
		31	},
		32	set: function (value) {
		33	if (value !== this._stroke) {
		34	this._stroke = value;
		35	}
		36	}
		37	},
		38
		39	fill: {
		40	enumerable: true,
		41	get: function () {
		42	return this._fill;
		43	},
		44	set: function (value) {
		45	if (value !== this._fill) {
		46	this._fill = value;
		47	}
		48	}
		49	},
		50
		51	draw: {
		52	enumerable: false,
		53	value: function () {
		54	Object.getPrototypeOf(ShapeProperties).draw.call(this);
		55
		56	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		57	// setup fill color
		58	this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		59	this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
		60
		61	// setup stroke color
		62	this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		63	this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
		64
		65	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		66	this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
		67
		68	this.addedColorChips = true;
		69	}
		70
		71	if (this.addedColorChips) {
		72	this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
		73	this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
		74	}
		75	}
		76	},
14		77
15	_subPrepare: {	78	_subPrepare: {
16	value: function() {	79	value: function () {
17	this.rectProperties.visible = true;	80	this.rectProperties.visible = true;
18		81
19	Object.defineBinding(this._strokeMaterial, "items", {	82	Object.defineBinding(this._strokeMaterial, "items", {
@@ -33,21 +96,32 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
33	}	96	}
34	},	97	},
35		98
36	_selectedSubTool: { value: null, enumerable: false},	99	_selectedSubTool: { value: null, enumerable: false },
37		100
38	selectedSubTool : {	101	selectedSubTool: {
39	get: function() { return this._selectedSubTool;},	102	get: function () { return this._selectedSubTool; },
40	set: function(value) {	103	set: function (value) {
41	if(value) {	104	if (value) {
42		105
43	this._selectedSubTool? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false;	106	this._selectedSubTool ? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false;
44		107