More implementation of moving color chips to the individual subtools.

Removed the tool color bar Added new icons for inkbottle Removed Pencil tool Removed Inkbottle tool Added chips to the pen, brush and tag tools Aligned controls in several subtools
author: John Mayhew 2012-05-07 14:30:47 -0700
committer: John Mayhew 2012-05-07 14:30:47 -0700
commit: 29ad6355ef60cfb3b3fc7f780504f3ed30845883 (patch)
tree: bbe2dcd46c98db8138ad0a8f0263ef33324d7669 /js/components/tools-properties
parent: 1a759361b82127f9d5c1428dc889fffdf2daaf86 (diff)
download: ninja-29ad6355ef60cfb3b3fc7f780504f3ed30845883.tar.gz
14 files changed, 172 insertions, 92 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 b0c02734..e4cd69b8 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"},
@@ -74,24 +75,24 @@
                }
            }
        }
-            </script>
+        </script>
    </head>
    <body>
-        <div data-montage-id="brushProperties" class="subToolHolderPanel">
+        <div data-montage-id="brushProperties" class="subToolHolderPanel optionsBrushTool">
-            <div 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 id="strokeSize" class="label"></div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
-                <label class="label"> Hardness:</label>
+            <label class="label"> Width:</label>
-                <div id="strokeHardness" class="label"></div>
+            <div 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 id="smoothingAmount" class="label"></div>
+            <div id="strokeHardness" class="label"></div>
-                <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
+            <input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
-                <label class="label" id="angleLabel"> Angle:</label>
+            <div id="smoothingAmount" class="label"></div>
-                <div id="strokeAngle" class="label"></div>
+            <input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
+            <label class="label" id="angleLabel">Angle:</label>
-            </div>
+            <div 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 677cd2d9..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);
@@ -37,6 +76,13 @@ 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/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index b81b09ba..6532907e 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -35,7 +35,7 @@
    <body>
        <div id="fillProperties" class="subToolHolderPanel">
-            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>
+            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> Use WebGL</label>
            <div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
                <label class="label"> Materials:</label>
author	John Mayhew	2012-05-07 14:30:47 -0700
committer	John Mayhew	2012-05-07 14:30:47 -0700
commit	29ad6355ef60cfb3b3fc7f780504f3ed30845883 (patch)
tree	bbe2dcd46c98db8138ad0a8f0263ef33324d7669 /js/components/tools-properties
parent	1a759361b82127f9d5c1428dc889fffdf2daaf86 (diff)
download	ninja-29ad6355ef60cfb3b3fc7f780504f3ed30845883.tar.gz

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 b0c02734..e4cd69b8 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"},
@@ -74,24 +75,24 @@
74	}	75	}
75	}	76	}
76	}	77	}
77	</script>	78	</script>
78		79
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 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 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 id="strokeHardness" class="label"></div>	88	<div 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 id="smoothingAmount" class="label"></div>	90	<div id="strokeHardness" class="label"></div>
90	<label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>	91	<input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
91	<label class="label" id="angleLabel"> Angle:</label>	92	<div id="smoothingAmount" class="label"></div>
92	<div id="strokeAngle" class="label"></div>	93	<input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
93		94	<label class="label" id="angleLabel">Angle:</label>
94	</div>	95	<div 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 677cd2d9..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);
@@ -37,6 +76,13 @@ exports.BrushProperties = Montage.create(ToolProperties, {
37	}	76	}
38	},	77	},
39		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
40	strokeSize: {	86	strokeSize: {
41	get: function() { return this._strokeSize; }	87	get: function() { return this._strokeSize; }
42	},	88	},


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..6532907e 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -35,7 +35,7 @@
35		35
36	<body>	36	<body>
37	<div id="fillProperties" class="subToolHolderPanel">	37	<div id="fillProperties" class="subToolHolderPanel">
38	<label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>	38	<label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> Use WebGL</label>
39		39
40	<div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">	40	<div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
41	<label class="label"> Materials:</label>	41	<label class="label"> Materials:</label>