diff options
author | hwc487 | 2012-05-17 11:06:20 -0700 |
---|---|---|
committer | hwc487 | 2012-05-17 11:06:20 -0700 |
commit | 0a3c703ce285941da20167a6d04b13b7eced23be (patch) | |
tree | e87019bcc3356c58dc93d982af2cfe16b582974b /js/components/tools-properties/shape-properties.reel | |
parent | 1e649405d66f17d6acddb9055b181bba7ad70566 (diff) | |
parent | c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac (diff) | |
download | ninja-0a3c703ce285941da20167a6d04b13b7eced23be.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into Textures
Diffstat (limited to 'js/components/tools-properties/shape-properties.reel')
3 files changed, 141 insertions, 34 deletions
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css index 0441c1cf..49d0c778 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css | |||
@@ -2,4 +2,18 @@ | |||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
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> */ \ No newline at end of file | 5 | </copyright> */ |
6 | |||
7 | .optionsShapeTool select.nj-skinned { | ||
8 | margin-top: 2px; | ||
9 | } | ||
10 | |||
11 | .optionsShapeTool .shapeCustomProps { | ||
12 | margin-top: 0px; | ||
13 | margin-left: -7px; | ||
14 | } | ||
15 | |||
16 | .optionsShapeTool checkbox { | ||
17 | padding: 6px; | ||
18 | margin-left: 4px; | ||
19 | } \ No newline at end of file | ||
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html index 6d58fe80..9b523a3f 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html | |||
@@ -36,6 +36,7 @@ | |||
36 | } | 36 | } |
37 | }, | 37 | }, |
38 | 38 | ||
39 | |||
39 | "_strokeSize1": { | 40 | "_strokeSize1": { |
40 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 41 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
41 | "properties": { | 42 | "properties": { |
@@ -108,11 +109,17 @@ | |||
108 | "_materialLabel": {"#": "materialLabel"}, | 109 | "_materialLabel": {"#": "materialLabel"}, |
109 | "_strokeIcon": {"#": "strokeIcon"}, | 110 | "_strokeIcon": {"#": "strokeIcon"}, |
110 | 111 | ||
112 | "_fillColorCtrlIcon": {"#": "fillColorCtrlIcon"}, | ||
113 | "_fillColorCtrl": {"#": "fillColorCtrl"}, | ||
114 | "_strokeColorCtrl": {"#": "strokeColorCtrl"}, | ||
115 | |||
111 | "_strokeSize": {"@": "_strokeSize1"}, | 116 | "_strokeSize": {"@": "_strokeSize1"}, |
112 | "ovalProperties": {"@": "ovalProperties1"}, | 117 | "ovalProperties": {"@": "ovalProperties1"}, |
113 | "rectProperties": {"@": "rectProperties1"}, | 118 | "rectProperties": {"@": "rectProperties1"}, |
114 | "lineProperties": {"@": "lineProperties1"}, | 119 | "lineProperties": {"@": "lineProperties1"}, |
115 | 120 | ||
121 | "endDivider": {"#": "endDivider"}, | ||
122 | |||
116 | "components": [ | 123 | "components": [ |
117 | {"@": "repetition1"} | 124 | {"@": "repetition1"} |
118 | ] | 125 | ] |
@@ -127,33 +134,35 @@ | |||
127 | </head> | 134 | </head> |
128 | 135 | ||
129 | <body> | 136 | <body> |
130 | <div data-montage-id="shapeProperties" class="subToolHolderPanel"> | 137 | <div data-montage-id="shapeProperties" class="subToolHolderPanel optionsShapeTool toolOptionsFloatChildren"> |
131 | <div data-montage-id="shapeToolsList"> | 138 | <div data-montage-id="shapeToolsList"> |
132 | <div data-montage-id="toolbutton"></div> | 139 | <div data-montage-id="toolbutton"></div> |
133 | </div> | 140 | </div> |
134 | 141 | <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> | |
142 | <div class="toolColorChipIcon PencilTool"></div> | ||
143 | <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div> | ||
144 | <div data-montage-id="fillColorCtrlIcon" class="toolColorChipIcon FillTool"></div> | ||
145 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> | ||
146 | <div class="nj-divider divider-vertical"> </div> | ||
135 | <label class="label">Stroke:</label> | 147 | <label class="label">Stroke:</label> |
136 | <div data-montage-id="strokeControl" class="label"></div> | 148 | <div data-montage-id="strokeControl" class="label"></div> |
137 | 149 | <div class="nj-divider divider-vertical"> </div> | |
138 | <div id="customProperties"> | 150 | <div id="customProperties" class="shapeCustomProps"> |
139 | <div data-montage-id="ovalProperties" class="label"></div> | 151 | <div data-montage-id="ovalProperties" class="label"></div> |
140 | <div data-montage-id="rectProperties" class="label"></div> | 152 | <div data-montage-id="rectProperties" class="label"></div> |
141 | <div data-montage-id="lineProperties" class="label"></div> | 153 | <div data-montage-id="lineProperties" class="label"></div> |
142 | </div> | 154 | </div> |
143 | 155 | <div data-montage-id="endDivider" class="nj-divider divider-vertical toolOptionsSpacer"> </div> | |
144 | <label class="label subOption optionLabel"><input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/>Use WebGL</label> | 156 | <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label> |
145 | |||
146 | <label data-montage-id="materialLabel" class="label">Material:</label> | 157 | <label data-montage-id="materialLabel" class="label">Material:</label> |
147 | <div data-montage-id="strokeIcon" class="pencilToolUp" style="float: left;"></div> | 158 | <div data-montage-id="strokeIcon" class="toolColorChipIcon PencilTool"></div> |
148 | 159 | ||
149 | <select class="selectBox" data-montage-id="strokeMaterialCB"> | 160 | <select class="selectBox" data-montage-id="strokeMaterialCB"> |
150 | </select> | 161 | </select> |
151 | 162 | ||
152 | <div data-montage-id="fillIcon" class="bucketToolUp" style="float: left;"></div> | 163 | <div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div> |
153 | <select class="selectBox" data-montage-id="fillMaterialCB"> | 164 | <select class="selectBox" data-montage-id="fillMaterialCB"> |
154 | </select> | 165 | </select> |
155 | |||
156 | |||
157 | </div> | 166 | </div> |
158 | </body> | 167 | </body> |
159 | 168 | ||
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 79567453..bd0cf8cf 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js | |||
@@ -8,12 +8,74 @@ 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.ShapeProperties = Montage.create(ToolProperties, { | 11 | var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { |
12 | toolsData: { value: null }, | 12 | toolsData: { value: null }, |
13 | _use3D: { value: false }, | 13 | _use3D: { value: false }, |
14 | addedColorChips: { value: false }, | ||
15 | |||
16 | _fill: { | ||
17 | enumerable: false, | ||
18 | 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] } | ||
19 | }, | ||
20 | |||
21 | _stroke: { | ||
22 | enumerable: false, | ||
23 | 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] } | ||
24 | }, | ||
25 | |||
26 | stroke: { | ||
27 | enumerable: true, | ||
28 | get: function () { | ||
29 | return this._stroke; | ||
30 | }, | ||
31 | set: function (value) { | ||
32 | if (value !== this._stroke) { | ||
33 | this._stroke = value; | ||
34 | } | ||
35 | } | ||
36 | }, | ||
37 | |||
38 | fill: { | ||
39 | enumerable: true, | ||
40 | get: function () { | ||
41 | return this._fill; | ||
42 | }, | ||
43 | set: function (value) { | ||
44 | if (value !== this._fill) { | ||
45 | this._fill = value; | ||
46 | } | ||
47 | } | ||
48 | }, | ||
49 | |||
50 | draw: { | ||
51 | enumerable: false, | ||
52 | value: function () { | ||
53 | Object.getPrototypeOf(ShapeProperties).draw.call(this); | ||
54 | |||
55 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
56 | // setup fill color | ||
57 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
58 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
59 | |||
60 | // setup stroke color | ||
61 | this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
62 | this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); | ||
63 | |||
64 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
65 | this._strokeColorCtrl.addEv |