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/shape-properties.reel
parent: 6b1a6994d98a18b45016b97ac8d81483109a586c (diff)
download: ninja-1a759361b82127f9d5c1428dc889fffdf2daaf86.tar.gz
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; },
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/shape-properties.reel
parent	6b1a6994d98a18b45016b97ac8d81483109a586c (diff)
download	ninja-1a759361b82127f9d5c1428dc889fffdf2daaf86.tar.gz

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