diff options
author | Valerio Virgillito | 2012-06-05 15:20:13 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-05 15:20:13 -0700 |
commit | b23a684a6aba38946867463bbbf4184ba2a2ff4a (patch) | |
tree | da14f63082178ca11c908c008d475ac2d20006c2 | |
parent | 783097854612a292ac1be18ff15d88343013f773 (diff) | |
parent | 7b02dcf3ae97674bd8d87ad9909abcb439350b61 (diff) | |
download | ninja-b23a684a6aba38946867463bbbf4184ba2a2ff4a.tar.gz |
Merge pull request #267 from mqg734/ToolOptions
Updated ink bottle and fill tools to support tool options checkboxes and materials.
10 files changed, 339 insertions, 244 deletions
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index 734966dc..ca447b8b 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html | |||
@@ -11,10 +11,35 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "_fillMaterialCB": { | 14 | "useFillColor": { |
15 | "prototype": "montage/ui/checkbox.reel", | ||
16 | "properties": { | ||
17 | "element": {"#": "useFillColor"}, | ||
18 | "identifier": "useFillColor", | ||
19 | "checked": true | ||
20 | } | ||
21 | }, | ||
22 | |||
23 | "useWebGL": { | ||
24 | "prototype": "montage/ui/checkbox.reel", | ||
25 | "properties": { | ||
26 | "element": {"#": "useWebGL"}, | ||
27 | "identifier": "useWebGL", | ||
28 | "checked": false | ||
29 | }, | ||
30 | "listeners": [ | ||
31 | { | ||
32 | "type": "action", | ||
33 | "listener": {"@": "owner"}, | ||
34 | "capture": false | ||
35 | } | ||
36 | ] | ||
37 | }, | ||
38 | |||
39 | "fillMaterial": { | ||
15 | "prototype": "js/components/combobox.reel", | 40 | "prototype": "js/components/combobox.reel", |
16 | "properties": { | 41 | "properties": { |
17 | "element": {"#": "fillMaterialCB"}, | 42 | "element": {"#": "fillMaterial"}, |
18 | "labelField": "_name", | 43 | "labelField": "_name", |
19 | "dataField": "_name" | 44 | "dataField": "_name" |
20 | } | 45 | } |
@@ -24,11 +49,12 @@ | |||
24 | "properties": { | 49 | "properties": { |
25 | "element": {"#": "fillProperties"}, | 50 | "element": {"#": "fillProperties"}, |
26 | 51 | ||
52 | "useFillColor": {"@": "useFillColor"}, | ||
27 | "_fillColorCtrl": {"#": "fillColorCtrl"}, | 53 | "_fillColorCtrl": {"#": "fillColorCtrl"}, |
28 | 54 | ||
29 | "_useWebGL": {"#": "useWebGLCH"}, | 55 | "useWebGL": {"@": "useWebGL"}, |
30 | "_materialsContainer": {"#": "materialsContainer"}, | 56 | "_materialsContainer": {"#": "materialsContainer"}, |
31 | "_fillMaterial": {"@": "_fillMaterialCB"} | 57 | "fillMaterial": {"@": "fillMaterial"} |
32 | } | 58 | } |
33 | } | 59 | } |
34 | } | 60 | } |
@@ -38,16 +64,17 @@ | |||
38 | 64 | ||
39 | <body> | 65 | <body> |
40 | <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren"> | 66 | <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren"> |
67 | <input data-montage-id="useFillColor" type="checkbox" name="useFillColorControl" class="nj-skinned"/> | ||
41 | <div class="toolColorChipIcon FillTool"></div> | 68 | <div class="toolColorChipIcon FillTool"></div> |
42 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> | 69 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> |
43 | <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> | 70 | <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> |
44 | 71 | ||
45 | <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> | 72 | <input data-montage-id="useWebGL" type="checkbox" name="useWebGLControl" class="nj-skinned"/> |
46 | <label class="label">Use WebGL</label> | 73 | <label class="label">Use WebGL</label> |
47 | <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren"> | 74 | <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren" style="display:none;"> |
48 | <label class="label">Material:</label> | 75 | <label class="label">Material:</label> |
49 | <div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div> | 76 | <div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div> |
50 | <select data-montage-id="fillMaterialCB" class="nj-skinned"> | 77 | <select data-montage-id="fillMaterial" class="nj-skinned"> |
51 | </select> | 78 | </select> |
52 | </div> | 79 | </div> |
53 | </div> | 80 | </div> |
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js index ae136956..7331b375 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.js +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js | |||
@@ -10,7 +10,6 @@ var Montage = require("montage/core/core").Montage, | |||
10 | 10 | ||
11 | var FillProperties = exports.FillProperties = Montage.create(ToolProperties, { | 11 | var FillProperties = exports.FillProperties = Montage.create(ToolProperties, { |
12 | 12 | ||
13 | _use3D: { value: false }, | ||
14 | addedColorChips: { value: false }, | 13 | addedColorChips: { value: false }, |
15 | 14 | ||
16 | _fill: { | 15 | _fill: { |
@@ -59,29 +58,17 @@ var FillProperties = exports.FillProperties = Montage.create(ToolProperties, { | |||
59 | 58 | ||
60 | _subPrepare: { | 59 | _subPrepare: { |
61 | value: function() { | 60 | value: function() { |
62 | Object.defineBinding(this._fillMaterial, "items", { | 61 | Object.defineBinding(this.fillMaterial, "items", { |
63 | boundObject: this.application.ninja.appModel, | 62 | boundObject: this.application.ninja.appModel, |
64 | boundObjectPropertyPath: "materials", | 63 | boundObjectPropertyPath: "materials", |
65 | oneway: false | 64 | oneway: false |
66 | }); | 65 | }); |
67 | |||
68 | this.handleChange(null); | ||
69 | this._useWebGL.addEventListener("change", this, false); | ||
70 | } | 66 | } |
71 | }, | 67 | }, |
72 | 68 | ||
73 | handleChange: { | 69 | handleAction: { |
74 | value: function(event) { | 70 | value: function(event) { |
75 | if(this._useWebGL.checked) | 71 | (this.useWebGL.checked) ? this._materialsContainer.style["display"] = "" : this._materialsContainer.style["display"] = "none"; |
76 | { | ||
77 | this._use3D = true; | ||
78 | this._materialsContainer.style["display"] = ""; | ||
79 | } | ||
80 | else | ||
81 | { | ||
82 | this._use3D = false; | ||
83 | this._materialsContainer.style["display"] = "none"; | ||
84 | } | ||
85 | } | 72 | } |
86 | } | 73 | } |
87 | }); \ No newline at end of file | 74 | }); \ No newline at end of file |
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 3dba17b6..dae64eb3 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 | |||
@@ -8,18 +8,3 @@ | |||
8 | .inkBottleOptions select.nj-skinned { | 8 | .inkBottleOptions select.nj-skinned { |
9 | margin-top: 2px; | 9 | margin-top: 2px; |
10 | } | 10 | } |
11 | |||
12 | .inkBottleOptions label.disabled { | ||
13 | color:#999999; | ||
14 | } | ||
15 | |||
16 | .inkBottleOptions label.disabled:hover { | ||
17 | color:#999999; | ||
18 | background-color: transparent; | ||
19 | cursor:default; | ||
20 | } | ||
21 | |||
22 | .inkBottleOptions div.disabled:hover { | ||
23 | background-color: transparent; | ||
24 | cursor:default; | ||
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 3ac0b261..5620eed8 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 | |||
@@ -11,12 +11,21 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "borderWidthCh": { | 14 | "useStrokeColor": { |
15 | "prototype": "montage/ui/checkbox.reel", | 15 | "prototype": "montage/ui/checkbox.reel", |
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "useBorderWidthCh"}, | 17 | "element": {"#": "useStrokeColor"}, |
18 | "identifier": "useBorderWidth", |