3 files changed, 74 insertions, 7 deletions
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css
index 7f1b0f7f..7969dff9 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.css
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css
@@ -4,3 +4,19 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
+ .tagRadioButtons .fillColorCtrl {
+    width: 18px;
+    height: 18px;
+    margin-top: 6px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
+}
+ .tagRadioButtons .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 6px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
+}
+\ No newline at end of file
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index edc2d47f..9dbef6f6 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <copyright>
 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/>
@@ -17,6 +17,8 @@
                "properties": {
                    "element": {"#": "tagProperties"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
                    "divElement": {"#": "divTool"},
                    "imageElement": {"#": "imageTool"},
                    "videoElement": {"#": "videoTool"},
@@ -37,11 +39,15 @@
    <body>
        <div data-montage-id="tagProperties" class="subToolHolderPanel">
            <div id="tagToolContainer" class="tagRadioButtons">
-                <input type="radio" id="divTool" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" value="div" checked/>
+                <div class="leftLabel colorCtrlIcon FillTool"></div>
-                <input type="radio" id="imageTool"  data-montage-id="imageTool" class="tag-type" title="Image Element" value="image" name="TagRadios"/>
+                <div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
-                <input type="radio" id="videoTool"  data-montage-id="videoTool" class="tag-type" title="Video Element" value="video" name="TagRadios"/>
+                <div class="nj-divider divider-vertical">&nbsp;</div>
-                <input type="radio" id="canvasTool" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" value="canvas" name="TagRadios"/>
-                <input type="radio" id="customTool" data-montage-id="customTool" class="tag-type" title="Custom Element" value="custom" name="TagRadios"/>
+                <input type="radio" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
+                <input type="radio" data-montage-id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="customTool" class="tag-type" title="Custom Element" name="TagRadios"/>
                <div class="nj-divider divider-vertical">&nbsp;</div>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 6519d5b8..1357ba67 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -8,7 +8,7 @@ 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.TagProperties = Montage.create(ToolProperties, {
+var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
    divElement:     { value: null, enumerable: false },
    imageElement:   { value: null, enumerable: false },
    videoElement:   { value: null, enumerable: false },
@@ -17,6 +17,24 @@ exports.TagProperties = Montage.create(ToolProperties, {
    classField:     { value: null, enumerable: false },
    customName:     { value: null, enumerable: false },
    customLabel:    { value: null, enumerable: false },
+    addedColorChips: { value: false },
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'nocolor', color: null, webGlColor: null }
+    },
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
    _subPrepare: {
        value: function() {
@@ -31,6 +49,33 @@ exports.TagProperties = Montage.create(ToolProperties, {
        }
    },
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(TagProperties).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);
+            }
+        }
+    },
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
    handleClick: {
        value: function(event) {
            this.selectedElement = event._event.target.value;

diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css index 7f1b0f7f..7969dff9 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.css +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css
@@ -4,3 +4,19 @@
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	.tagRadioButtons .fillColorCtrl {
		8	width: 18px;
		9	height: 18px;
		10	margin-top: 6px;
		11	margin-left: 3px;
		12	margin-right: 8px;
		13	border: 1px black solid;
		14	}
		15
		16	.tagRadioButtons .colorCtrlIcon {
		17	width: 20px;
		18	height: 20px;
		19	margin-top: 6px;
		20	-webkit-transform: scale(0.8);
		21	background-color: rgb(40, 40, 40);
		22	} \ No newline at end of file


diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index edc2d47f..9dbef6f6 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE HTML>	1	<!DOCTYPE HTML>
2	<!-- <copyright>	2	<!-- <copyright>
3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -17,6 +17,8 @@
17	"properties": {	17	"properties": {
18	"element": {"#": "tagProperties"},	18	"element": {"#": "tagProperties"},
19		19
		20	"_fillColorCtrl": {"#": "fillColorCtrl"},
		21
20	"divElement": {"#": "divTool"},	22	"divElement": {"#": "divTool"},
21	"imageElement": {"#": "imageTool"},	23	"imageElement": {"#": "imageTool"},
22	"videoElement": {"#": "videoTool"},	24	"videoElement": {"#": "videoTool"},
@@ -37,11 +39,15 @@
37	<body>	39	<body>
38	<div data-montage-id="tagProperties" class="subToolHolderPanel">	40	<div data-montage-id="tagProperties" class="subToolHolderPanel">
39	<div id="tagToolContainer" class="tagRadioButtons">	41	<div id="tagToolContainer" class="tagRadioButtons">
40	<input type="radio" id="divTool" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" value="div" checked/>	42	<div class="leftLabel colorCtrlIcon FillTool"></div>
41	<input type="radio" id="imageTool" data-montage-id="imageTool" class="tag-type" title="Image Element" value="image" name="TagRadios"/>	43	<div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
42	<input type="radio" id="videoTool" data-montage-id="videoTool" class="tag-type" title="Video Element" value="video" name="TagRadios"/>	44	<div class="nj-divider divider-vertical"> </div>
43	<input type="radio" id="canvasTool" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" value="canvas" name="TagRadios"/>	45
44	<input type="radio" id="customTool" data-montage-id="customTool" class="tag-type" title="Custom Element" value="custom" name="TagRadios"/>	46	<input type="radio" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
		47	<input type="radio" data-montage-id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
		48	<input type="radio" data-montage-id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
		49	<input type="radio" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" name="TagRadios"/>
		50	<input type="radio" data-montage-id="customTool" class="tag-type" title="Custom Element" name="TagRadios"/>
45		51
46	<div class="nj-divider divider-vertical"> </div>	52	<div class="nj-divider divider-vertical"> </div>
47		53


diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js index 6519d5b8..1357ba67 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -8,7 +8,7 @@ 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.TagProperties = Montage.create(ToolProperties, {	11	var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
12	divElement: { value: null, enumerable: false },	12	divElement: { value: null, enumerable: false },
13	imageElement: { value: null, enumerable: false },	13	imageElement: { value: null, enumerable: false },
14	videoElement: { value: null, enumerable: false },	14	videoElement: { value: null, enumerable: false },
@@ -17,6 +17,24 @@ exports.TagProperties = Montage.create(ToolProperties, {
17	classField: { value: null, enumerable: false },	17	classField: { value: null, enumerable: false },
18	customName: { value: null, enumerable: false },	18	customName: { value: null, enumerable: false },
19	customLabel: { value: null, enumerable: false },	19	customLabel: { value: null, enumerable: false },
		20	addedColorChips: { value: false },
		21
		22	_fill: {
		23	enumerable: false,
		24	value: { colorMode: 'nocolor', color: null, webGlColor: null }
		25	},
		26
		27	fill: {
		28	enumerable: true,
		29	get: function () {
		30	return this._fill;
		31	},
		32	set: function (value) {
		33	if (value !== this._fill) {
		34	this._fill = value;
		35	}
		36	}
		37	},
20		38
21	_subPrepare: {	39	_subPrepare: {
22	value: function() {	40	value: function() {
@@ -31,6 +49,33 @@ exports.TagProperties = Montage.create(ToolProperties, {
31	}	49	}
32	},	50	},
33		51
		52	draw: {
		53	enumerable: false,
		54	value: function () {
		55	Object.getPrototypeOf(TagProperties).draw.call(this);
		56
		57	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		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	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		62
		63	this.addedColorChips = true;
		64	}
		65
		66	if (this.addedColorChips) {
		67	this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
		68	}
		69	}
		70	},
		71
		72	handleFillColorChange: {
		73	value: function (e) {
		74	this.fill = e._event;
		75	this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		76	}
		77	},
		78
34	handleClick: {	79	handleClick: {
35	value: function(event) {	80	value: function(event) {
36	this.selectedElement = event._event.target.value;	81	this.selectedElement = event._event.target.value;