diff options
author | Valerio Virgillito | 2012-05-16 15:40:06 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-05-16 15:40:06 -0700 |
commit | c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac (patch) | |
tree | 01be4d0fe4c96de8270411a32bb76378769d5b2d /js/components/tools-properties/ink-bottle-properties.reel | |
parent | 27f4cacb39de1c2e3910748dadc9fc16d0655480 (diff) | |
parent | 26c4d00b3e5d39c1c313d48433abebd06f386a85 (diff) | |
download | ninja-c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac.tar.gz |
Merge pull request #239 from mayhewinator/WorkingBranch
Tool Options styling and Icon update
Diffstat (limited to 'js/components/tools-properties/ink-bottle-properties.reel')
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"> </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;"> </div> | 189 | <div class="toolOptionsSpacer"> </div> |
190 | <div class="nj-divider divider-vertical"> </div> | ||
191 | <div class="toolOptionsSpacer"> </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 | ||
11 | exports.InkBottleProperties = Montage.create(ToolProperties, { | 11 | var 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: { | ||
53 | value: function (e) { | ||