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/tag-properties.reel
parent: 1a759361b82127f9d5c1428dc889fffdf2daaf86 (diff)
download: ninja-29ad6355ef60cfb3b3fc7f780504f3ed30845883.tar.gz
3 files changed, 70 insertions, 3 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 c80ba36e..379c37a0 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -17,7 +17,9 @@
                "properties": {
                    "element": {"#": "tagProperties"},
-                    "divElement": {"#": "divTool"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
+                   "divElement": {"#": "divTool"},
                    "imageElement": {"#": "imageTool"},
                    "videoElement": {"#": "videoTool"},
                    "canvasElement": {"#": "canvasTool"},
@@ -30,13 +32,17 @@
                }
            }
        }
-            </script>
+        </script>
       
    </head>
    <body>
        <div id="tagProperties" class="subToolHolderPanel">
            <div id="tagToolContainer" class="tagRadioButtons">
+                <div class="leftLabel colorCtrlIcon FillTool"></div>
+                <div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
+                <div class="nj-divider divider-vertical">&nbsp;</div>
                <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
                <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
                <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
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 1caabc35..32063d9a 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.id;
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/tag-properties.reel
parent	1a759361b82127f9d5c1428dc889fffdf2daaf86 (diff)
download	ninja-29ad6355ef60cfb3b3fc7f780504f3ed30845883.tar.gz

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 c80ba36e..379c37a0 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -17,7 +17,9 @@
17	"properties": {	17	"properties": {
18	"element": {"#": "tagProperties"},	18	"element": {"#": "tagProperties"},
19		19
20	"divElement": {"#": "divTool"},	20	"_fillColorCtrl": {"#": "fillColorCtrl"},
		21
		22	"divElement": {"#": "divTool"},
21	"imageElement": {"#": "imageTool"},	23	"imageElement": {"#": "imageTool"},
22	"videoElement": {"#": "videoTool"},	24	"videoElement": {"#": "videoTool"},
23	"canvasElement": {"#": "canvasTool"},	25	"canvasElement": {"#": "canvasTool"},
@@ -30,13 +32,17 @@
30	}	32	}
31	}	33	}
32	}	34	}
33	</script>	35	</script>
34		36
35	</head>	37	</head>
36		38
37	<body>	39	<body>
38	<div id="tagProperties" class="subToolHolderPanel">	40	<div id="tagProperties" class="subToolHolderPanel">
39	<div id="tagToolContainer" class="tagRadioButtons">	41	<div id="tagToolContainer" class="tagRadioButtons">
		42	<div class="leftLabel colorCtrlIcon FillTool"></div>
		43	<div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
		44	<div class="nj-divider divider-vertical"> </div>
		45
40	<input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>	46	<input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
41	<input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>	47	<input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
42	<input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>	48	<input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>


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 1caabc35..32063d9a 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.id;	81	this.selectedElement = event._event.target.id;