6 files changed, 143 insertions, 33 deletions
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 38f7f856..98442164 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -11,12 +11,71 @@
        <script type="text/montage-serialization">
        {
+            "strokeSizeHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeSize"},
+                    "minValue": 1,
+                    "maxValue": 100,
+                    "value": 1,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["px", "pt"]
+                }
+            },
+            "strokeHardnessHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeHardness"},
+                    "minValue": 0,
+                    "maxValue": 100,
+                    "value": 100,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["%"],
+                    "units" : "%"
+                }
+            },
+            "strokeAngleHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeAngle"},
+                    "minValue": -90,
+                    "maxValue": 90,
+                    "value": 0,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["deg."],
+                    "units" : "deg."
+                }
+            },
+            "smoothingAmountHT": {
+                "module": "js/components/hottext.reel",
+                "name": "HotText",
+                "properties": {
+                    "element": {"#": "smoothingAmount"},
+                    "minValue": 0,
+                    "maxValue": 100,
+                    "value": 0,
+                    "decimalPlace": 10
+                }
+            },
            "owner": {
                "module": "js/components/tools-properties/brush-properties.reel",
                "name": "BrushProperties",
                "properties": {
-                    "element": {"#": "brushProperties"}
+                    "element": {"#": "brushProperties"},
+                    "_strokeSize": {"@": "strokeSizeHT"},
+                    "_strokeHardness": {"@": "strokeHardnessHT"},
+                    "_doSmoothing": {"#": "doSmoothing"},
+                    "_smoothingAmount": {"@": "smoothingAmountHT"},
+                    "_useCalligraphic":{"#": "useCalligraphic"},
+                    "_strokeAngle": {"@": "strokeAngleHT"},
+                    "_angleLabel": {"#": "angleLabel"}
                }
            }
        }
@@ -26,6 +85,18 @@
    <body>
        <div id="brushProperties" class="subToolHolderPanel">
+            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+                <label class="label"> Width:</label>
+                <div id="strokeSize" class="label"></div>
+                <label class="label"> Hardness:</label>
+                <div id="strokeHardness" class="label"></div>
+                <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
+                <div id="smoothingAmount" class="label"></div>
+                <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
+                <label class="label" id="angleLabel"> Angle:</label>
+                <div id="strokeAngle" class="label"></div>
+            </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 92da98cc..fdcd50f8 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -9,17 +9,49 @@ var Component = require("montage/ui/component").Component;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 exports.BrushProperties = Montage.create(ToolProperties, {
-    
    _subPrepare: {
        value: function() {
-            //this.divElement.addEventListener("click", this, false);
+            this.handleChange(null);
+            this._useCalligraphic.addEventListener("change", this, false);
+            this._doSmoothing.addEventListener("change", this, false);
        }
    },
+    handleChange: {
-    handleClick: {
        value: function(event) {
-           // this.selectedElement = event._event.target.id;
+            if(this._useCalligraphic.checked) {
+                this._strokeAngle.element.style["display"] = "";
+                this._strokeAngle.visible = true;
+                this._angleLabel.style["display"] = "";
+            } else {
+                this._strokeAngle.element.style["display"] = "none";
+                this._strokeAngle.visible = false;
+                this._angleLabel.style["display"] = "none";
+            }
+            if(this._doSmoothing.checked) {
+                this._smoothingAmount.element.style["display"] = "";
+                this._smoothingAmount.visible = true;
+            } else {
+                this._smoothingAmount.element.style["display"] = "none";
+                this._smoothingAmount.visible = false;
+            }
        }
+    },
+    strokeSize: {
+        get: function() { return this._strokeSize; }
+    },
+    strokeHardness: {
+        get: function() { return this._strokeHardness; }
+    },
+    doSmoothing:{
+        get: function() {return this._doSmoothing.checked; }
+    },
+    smoothingAmount:{
+        get: function() {return this._smoothingAmount;}
+    },
+    useCalligraphic: {
+        get: function() {return this._useCalligraphic.checked;}
+    },
+    strokeAngle: {
+        get: function() {return this._strokeAngle;}
    }
-});
-\ No newline at end of file
+});
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.css b/js/components/tools-properties/rect-properties.reel/rect-properties.css
index 74509555..cbd9dde8 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.css
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.css
@@ -4,16 +4,15 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-.rectProperties .button {
+#lockButton {
-    border:none;
+    float:left;
-    cursor:default;
+    border: none;
-    text-align:center;
+    background-color: transparent;
-    -webkit-user-select:none;
+    top: 2px;
-    opacity:0.8;
+    opacity: 0.7;
-    display:table-cell;
+    width: 17px;
-    vertical-align:middle;
+    height: 18px;
-    background-color:#333333;
+    margin-right: 10px;
-    color:white;
 }

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 38f7f856..98442164 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -11,12 +11,71 @@
11		11
12	<script type="text/montage-serialization">	12	<script type="text/montage-serialization">
13	{	13	{
		14	"strokeSizeHT": {
		15	"module": "js/components/hottextunit.reel",
		16	"name": "HotTextUnit",
		17	"properties": {
		18	"element": {"#": "strokeSize"},
		19	"minValue": 1,
		20	"maxValue": 100,
		21	"value": 1,
		22	"decimalPlace": 10,
		23	"acceptableUnits" : ["px", "pt"]
		24	}
		25	},
		26
		27	"strokeHardnessHT": {
		28	"module": "js/components/hottextunit.reel",
		29	"name": "HotTextUnit",
		30	"properties": {
		31	"element": {"#": "strokeHardness"},
		32	"minValue": 0,
		33	"maxValue": 100,
		34	"value": 100,
		35	"decimalPlace": 10,
		36	"acceptableUnits" : ["%"],
		37	"units" : "%"
		38	}
		39	},
		40
		41	"strokeAngleHT": {
		42	"module": "js/components/hottextunit.reel",
		43	"name": "HotTextUnit",
		44	"properties": {
		45	"element": {"#": "strokeAngle"},
		46	"minValue": -90,
		47	"maxValue": 90,
		48	"value": 0,
		49	"decimalPlace": 10,
		50	"acceptableUnits" : ["deg."],
		51	"units" : "deg."
		52	}
		53	},
		54
		55	"smoothingAmountHT": {
		56	"module": "js/components/hottext.reel",
		57	"name": "HotText",
		58	"properties": {
		59	"element": {"#": "smoothingAmount"},
		60	"minValue": 0,
		61	"maxValue": 100,
		62	"value": 0,
		63	"decimalPlace": 10
		64	}
		65	},
14		66
15	"owner": {	67	"owner": {
16	"module": "js/components/tools-properties/brush-properties.reel",	68	"module": "js/components/tools-properties/brush-properties.reel",
17	"name": "BrushProperties",	69	"name": "BrushProperties",
18	"properties": {	70	"properties": {
19	"element": {"#": "brushProperties"}	71	"element": {"#": "brushProperties"},
		72	"_strokeSize": {"@": "strokeSizeHT"},
		73	"_strokeHardness": {"@": "strokeHardnessHT"},
		74	"_doSmoothing": {"#": "doSmoothing"},
		75	"_smoothingAmount": {"@": "smoothingAmountHT"},
		76	"_useCalligraphic":{"#": "useCalligraphic"},
		77	"_strokeAngle": {"@": "strokeAngleHT"},
		78	"_angleLabel": {"#": "angleLabel"}
20	}	79	}
21	}	80	}
22	}	81	}
@@ -26,6 +85,18 @@
26		85
27	<body>	86	<body>
28	<div id="brushProperties" class="subToolHolderPanel">	87	<div id="brushProperties" class="subToolHolderPanel">
		88	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
		89	<label class="label"> Width:</label>
		90	<div id="strokeSize" class="label"></div>
		91	<label class="label"> Hardness:</label>
		92	<div id="strokeHardness" class="label"></div>
		93	<label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
		94	<div id="smoothingAmount" class="label"></div>
		95	<label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
		96	<label class="label" id="angleLabel"> Angle:</label>
		97	<div id="strokeAngle" class="label"></div>
		98
		99	</div>
29	</div>	100	</div>
30	</body>	101	</body>
31		102


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 92da98cc..fdcd50f8 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -9,17 +9,49 @@ 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	exports.BrushProperties = Montage.create(ToolProperties, {
12
13
14	_subPrepare: {	12	_subPrepare: {
15	value: function() {	13	value: function() {
16	//this.divElement.addEventListener("click", this, false);	14	this.handleChange(null);
		15	this._useCalligraphic.addEventListener("change", this, false);
		16	this._doSmoothing.addEventListener("change", this, false);
17	}	17	}
18	},	18	},
19		19	handleChange: {
20	handleClick: {
21	value: function(event) {	20	value: function(event) {
22	// this.selectedElement = event._event.target.id;	21	if(this._useCalligraphic.checked) {
		22	this._strokeAngle.element.style["display"] = "";
		23	this._strokeAngle.visible = true;
		24	this._angleLabel.style["display"] = "";
		25	} else {
		26	this._strokeAngle.element.style["display"] = "none";
		27	this._strokeAngle.visible = false;
		28	this._angleLabel.style["display"] = "none";
		29	}
		30	if(this._doSmoothing.checked) {
		31	this._smoothingAmount.element.style["display"] = "";
		32	this._smoothingAmount.visible = true;
		33	} else {
		34	this._smoothingAmount.element.style["display"] = "none";
		35	this._smoothingAmount.visible = false;
		36	}
23	}	37	}
		38	},
		39	strokeSize: {
		40	get: function() { return this._strokeSize; }
		41	},
		42	strokeHardness: {
		43	get: function() { return this._strokeHardness; }
		44	},
		45	doSmoothing:{
		46	get: function() {return this._doSmoothing.checked; }
		47	},
		48	smoothingAmount:{
		49	get: function() {return this._smoothingAmount;}
		50	},
		51	useCalligraphic: {
		52	get: function() {return this._useCalligraphic.checked;}
		53	},
		54	strokeAngle: {
		55	get: function() {return this._strokeAngle;}
24	}	56	}
25	}); \ No newline at end of file	57	});


diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.css b/js/components/tools-properties/rect-properties.reel/rect-properties.css index 74509555..cbd9dde8 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.css +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.css
@@ -4,16 +4,15 @@
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	.rectProperties .button {	7	#lockButton {
8	border:none;	8	float:left;
9	cursor:default;	9	border: none;
10	text-align:center;	10	background-color: transparent;
11	-webkit-user-select:none;	11	top: 2px;
12	opacity:0.8;	12	opacity: 0.7;
13	display:table-cell;	13	width: 17px;
14	vertical-align:middle;	14	height: 18px;
15	background-color:#333333;	15	margin-right: 10px;
16	color:white;
17	}	16	}
18		17
19	.rectProperties .subToolButton {