First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools.

author: John Mayhew 2012-05-03 15:11:56 -0700
committer: John Mayhew 2012-05-03 15:11:56 -0700
commit: 1a759361b82127f9d5c1428dc889fffdf2daaf86 (patch)
tree: 92e62aa215418d864e5224797a974cb9841d4b90 /js/components/tools-properties
parent: 6b1a6994d98a18b45016b97ac8d81483109a586c (diff)
download: ninja-1a759361b82127f9d5c1428dc889fffdf2daaf86.tar.gz
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 };
author	John Mayhew	2012-05-03 15:11:56 -0700
committer	John Mayhew	2012-05-03 15:11:56 -0700
commit	1a759361b82127f9d5c1428dc889fffdf2daaf86 (patch)
tree	92e62aa215418d864e5224797a974cb9841d4b90 /js/components/tools-properties
parent	6b1a6994d98a18b45016b97ac8d81483109a586c (diff)
download	ninja-1a759361b82127f9d5c1428dc889fffdf2daaf86.tar.gz

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 };