aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties/ink-bottle-properties.reel
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-05-16 16:23:05 -0700
committerJose Antonio Marquez2012-05-16 16:23:05 -0700
commitd59cb51c275fbbef84604f9ed77afedba8168099 (patch)
tree7d3f51c20eb6b6940c1ce648d828fa1e2d8d510b /js/components/tools-properties/ink-bottle-properties.reel
parent857aafee732b6a85fa155ff4a05d1b8fde48f09d (diff)
parent92fcb770aff434e994e7a39a61d8fac4a017dca0 (diff)
downloadninja-d59cb51c275fbbef84604f9ed77afedba8168099.tar.gz
Merge branch 'refs/heads/Ninja-DOM-Architecture' into Document
Diffstat (limited to 'js/components/tools-properties/ink-bottle-properties.reel')
-rwxr-xr-xjs/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css17
-rwxr-xr-xjs/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html32
-rwxr-xr-xjs/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js48
3 files changed, 71 insertions, 26 deletions
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
index a926a0b4..3dba17b6 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
@@ -4,27 +4,22 @@
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.inkBottleProperties input[type="checkbox"].nj-skinned {
8 float:left;
9 margin-top:5px;
10}
11 7
12.inkBottleProperties select.nj-skinned { 8.inkBottleOptions select.nj-skinned {
13 float:left; 9 margin-top: 2px;
14 margin:2px 5px 0 0;
15} 10}
16 11
17.inkBottleProperties label.disabled { 12.inkBottleOptions label.disabled {
18 color:#999999; 13 color:#999999;
19} 14}
20 15
21.inkBottleProperties label.disabled:hover { 16.inkBottleOptions label.disabled:hover {
22 color:#999999; 17 color:#999999;
23 background-color: transparent; 18 background-color: transparent;
24 cursor:default; 19 cursor:default;
25} 20}
26 21
27.inkBottleProperties div.disabled:hover { 22.inkBottleOptions div.disabled:hover {
28 background-color: transparent; 23 background-color: transparent;
29 cursor:default; 24 cursor:default;
30} \ No newline at end of file 25}
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index 010e77b2..3ac0b261 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -136,6 +136,8 @@
136 "properties": { 136 "properties": {
137 "element": {"#": "inkBottleProperties"}, 137 "element": {"#": "inkBottleProperties"},
138 138
139 "_strokeColorCtrl": {"#": "strokeColorCtrl"},
140
139 "useBorderWidth": {"@": "borderWidthCh"}, 141 "useBorderWidth": {"@": "borderWidthCh"},
140 "borderWidthLabel": {"@": "borderWidthLabel"}, 142 "borderWidthLabel": {"@": "borderWidthLabel"},
141 "_borderWidth": {"@": "borderWidthHT"}, 143 "_borderWidth": {"@": "borderWidthHT"},
@@ -154,14 +156,17 @@
154 } 156 }
155 } 157 }
156 } 158 }
157 </script> 159 </script>
158 160
159 </head> 161 </head>
160 162
161 <body> 163 <body>
162 <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleProperties"> 164 <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">
165 <div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">
166 <div class="toolColorChipIcon PencilTool"></div>
167 <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
168 <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
163 169
164 <div data-montage-id="elementInkOptions" class="leftLabel" style="padding-top: 3px;">
165 <input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/> 170 <input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
166 <label data-montage-id="borderWidthLabel" class="label"> Border:</label> 171 <label data-montage-id="borderWidthLabel" class="label"> Border:</label>
167 <div data-montage-id="borderWidth" class="label"></div> 172 <div data-montage-id="borderWidth" class="label"></div>
@@ -181,25 +186,24 @@
181 </select> 186 </select>
182 </div> 187 </div>
183 188
184 <div class="nj-divider divider-vertical" style="margin:8px 20px; float: left;">&nbsp;</div> 189 <div class="toolOptionsSpacer">&nbsp;</div>
190 <div class="nj-divider divider-vertical">&nbsp;</div>
191 <div class="toolOptionsSpacer">&nbsp;</div>
185 192
186 <div data-montage-id="shapeInkOptions" class="leftLabel" style="margin-top: 5px;"> 193 <div data-montage-id="shapeInkOptions" class="toolOptionsFloatChildren">
187 <input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/> 194 <input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/>
188 <label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label> 195 <label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label>
189 <div data-montage-id="strokeSize" class="label"></div> 196 <div data-montage-id="strokeSize" class="label"></div>
190 </div> 197 </div>
191 198
192 <div data-montage-id="webGLInkOptions" class="leftLabel"> 199 <div data-montage-id="webGLInkOptions" class="toolOptionsFloatChildren">
193 <label class="label"> 200 <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
194 <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/> 201 <label class="label"> Use WebGL</label>
195 <label class="label"> Use WebGL</label>
196 </label>
197 202
198 <div data-montage-id="materialsContainerIB" class="leftLabel"> 203 <div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren">
199 <label class="label"> Materials:</label> 204 <label class="label"> Materials:</label>
200 <div data-montage-id="strokeIconIB" class="pencilToolUp" style="float: left; margin: 0 2px 0 5px;"></div> 205 <div data-montage-id="strokeIconIB" class="toolColorChipIcon PencilTool"></div>
201 <select data-montage-id="strokeMaterialIBCB" class="nj-skinned"> 206 <select data-montage-id="strokeMaterialIBCB" class="nj-skinned"></select>
202 </select>
203 </div> 207 </div>
204 </div> 208 </div>
205 </div> 209 </div>
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
index 6d5c46f6..945df857 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -8,7 +8,53 @@ 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
11exports.InkBottleProperties = Montage.create(ToolProperties, { 11var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolProperties, {
12 addedColorChips: { value: false },
13
14 _stroke: {
15 enumerable: false,
16 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] }
17 },
18
19 stroke: {
20 enumerable: true,
21 get: function () {
22 return this._stroke;
23 },
24 set: function (value) {
25 if (value !== this._stroke) {
26 this._stroke = value;
27 }
28 }
29 },
30
31 draw: {
32 enumerable: false,
33 value: function () {
34 Object.getPrototypeOf(InkBottleProperties).draw.call(this);
35
36 if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
37 // setup stroke color
38 this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
39 this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
40
41 this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
42
43 this.addedColorChips = true;
44 }
45
46 if (this.addedColorChips) {
47 this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
48 }
49 }
50 },
51
52 handleStrokeColorChange: {