aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties/brush-properties.reel
diff options
context:
space:
mode:
authorJohn Mayhew2012-05-07 14:30:47 -0700
committerJohn Mayhew2012-05-07 14:30:47 -0700
commit29ad6355ef60cfb3b3fc7f780504f3ed30845883 (patch)
treebbe2dcd46c98db8138ad0a8f0263ef33324d7669 /js/components/tools-properties/brush-properties.reel
parent1a759361b82127f9d5c1428dc889fffdf2daaf86 (diff)
downloadninja-29ad6355ef60cfb3b3fc7f780504f3ed30845883.tar.gz
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
Diffstat (limited to 'js/components/tools-properties/brush-properties.reel')
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.css22
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.html29
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.js48
3 files changed, 84 insertions, 15 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 @@
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">&nbsp;</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;
8var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
9var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; 9var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
10 10
11exports.BrushProperties = Montage.create(ToolProperties, { 11var 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 },
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-05 05:18:42 +0000