diff options
Diffstat (limited to 'js/components/tools-properties/shape-properties.reel')
3 files changed, 244 insertions, 0 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 new file mode 100644 index 00000000..1e36b0bd --- /dev/null +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css | |||
@@ -0,0 +1,9 @@ | |||
1 | /* <copyright> | ||
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/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | #strokeIcon { | ||
8 | float: left; | ||
9 | } \ 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 new file mode 100644 index 00000000..52502d47 --- /dev/null +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html | |||
@@ -0,0 +1,158 @@ | |||
1 | <!DOCTYPE HTML> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link rel="stylesheet" type="text/css" href="shape-properties.css"> | ||
11 | |||
12 | <script type="text/montage-serialization"> | ||
13 | { | ||
14 | |||
15 | "ovalProperties1": { | ||
16 | "module": "js/components/tools-properties/oval-properties.reel", | ||
17 | "name": "OvalProperties", | ||
18 | "properties": { | ||
19 | "element": {"#": "ovalProperties"}, | ||
20 | "base": {"@": "owner"} | ||
21 | } | ||
22 | }, | ||
23 | |||
24 | "rectProperties1": { | ||
25 | "module": "js/components/tools-properties/rect-properties.reel", | ||
26 | "name": "RectProperties", | ||
27 | "properties": { | ||
28 | "element": {"#": "rectProperties"}, | ||
29 | "base": {"@": "owner"} | ||
30 | } | ||
31 | }, | ||
32 | |||
33 | "lineProperties1": { | ||
34 | "module": "js/components/tools-properties/line-properties.reel", | ||
35 | "name": "LineProperties", | ||
36 | "properties": { | ||
37 | "element": {"#": "lineProperties"}, | ||
38 | "base": {"@": "owner"} | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | "_strokeSize1": { | ||
43 | "module": "js/components/hottextunit.reel", | ||
44 | "name": "HotTextUnit", | ||
45 | "properties": { | ||
46 | "element": {"#": "strokeControl"}, | ||
47 | "minValue": 1, | ||
48 | "maxValue": 100, | ||
49 | "value": 1, | ||
50 | "decimalPlace": 10, | ||
51 | "acceptableUnits": ["px", "pt"] | ||
52 | |||
53 | } | ||
54 | }, | ||
55 | |||
56 | "toolbutton1": { | ||
57 | "module": "js/components/layout/subtool-button.reel", | ||
58 | "name": "SubToolButton", | ||
59 | "properties": { | ||
60 | "element": {"#": "toolbutton"} | ||
61 | }, | ||
62 | "bindings": { | ||
63 | "data": { | ||
64 | "boundObject": {"@": "repetition1"}, | ||
65 | "boundObjectPropertyPath": "objectAtCurrentIteration", | ||
66 | "oneway": true | ||
67 | } | ||
68 | } | ||
69 | }, | ||
70 | |||
71 | "repetition1": { | ||
72 | "module": "montage/ui/repetition.reel", | ||
73 | "name": "Repetition", | ||
74 | "properties": { | ||
75 | "element": {"#": "shapeToolsList"} | ||
76 | }, | ||
77 | "bindings": { | ||
78 | "objects": { | ||
79 | "boundObject": {"@": "owner"}, | ||
80 | "boundObjectPropertyPath": "toolsData.defaultSubToolsData", | ||
81 | "oneway": true | ||
82 | } | ||
83 | } | ||
84 | }, | ||
85 | |||
86 | |||
87 | "owner": { | ||
88 | "module": "js/components/tools-properties/shape-properties.reel", | ||
89 | "name": "ShapeProperties", | ||
90 | "properties": { | ||
91 | "element": {"#": "shapeProperties"}, | ||
92 | "_strokeStyle": {"#": "strokeStyleCB"}, | ||
93 | "_strokeMaterial": {"#": "strokeMaterialCB"}, | ||
94 | "_fillIcon": {"#": "fillIcon"}, | ||
95 | "_fillMaterial": {"#": "fillMaterialCB"}, | ||
96 | |||
97 | "_useWebGL": {"#": "useWebGLCH"}, | ||
98 | "_materialLabel": {"#": "materialLabel"}, | ||
99 | "_strokeIcon": {"#": "strokeIcon"}, | ||
100 | |||
101 | "_strokeSize": {"@": "_strokeSize1"}, | ||
102 | "ovalProperties": {"@": "ovalProperties1"}, | ||
103 | "rectProperties": {"@": "rectProperties1"}, | ||
104 | "lineProperties": {"@": "lineProperties1"}, | ||
105 | |||
106 | "components": [ | ||
107 | {"@": "repetition1"} | ||
108 | ] | ||
109 | |||
110 | } | ||
111 | |||
112 | } | ||
113 | } | ||
114 | </script> | ||
115 | |||
116 | |||
117 | </head> | ||
118 | |||
119 | <body> | ||
120 | <div id="shapeProperties" class="subToolHolderPanel"> | ||
121 | <div id="shapeToolsList"> | ||
122 | <div id="toolbutton"></div> | ||
123 | </div> | ||
124 | |||
125 | <label class="label">Stroke:</label> | ||
126 | <div id="strokeControl" class="label"></div> | ||
127 | |||
128 | <label class="label">Style:</label> | ||
129 | <select id="strokeStyleCB" class="selectBox"> | ||
130 | <option value="0">Hairline</option> | ||
131 | <option value="1" selected>Solid</option> | ||
132 | <option value="2">Dashed</option> | ||
133 | <option value="3">Dotted</option> | ||
134 | </select> | ||
135 | |||
136 | <div id="customProperties"> | ||
137 | <div id="ovalProperties" class="label"></div> | ||
138 | <div id="rectProperties" class="label"></div> | ||
139 | <div id="lineProperties" class="label"></div> | ||
140 | </div> | ||
141 | |||
142 | <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/>Use WebGL</label> | ||
143 | |||
144 | <label id="materialLabel" class="label">Material:</label> | ||
145 | <div id="strokeIcon" class="pencilToolUp"></div> | ||
146 | |||
147 | <select class="selectBox" id="strokeMaterialCB"> | ||
148 | </select> | ||
149 | |||
150 | <div id="fillIcon" class="bucketToolUp" style="float: left;"></div> | ||
151 | <select class="selectBox" id="fillMaterialCB"> | ||
152 | </select> | ||
153 | |||
154 | |||
155 | </div> | ||
156 | </body> | ||
157 | |||
158 | </html> | ||
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js new file mode 100644 index 00000000..b0d674cc --- /dev/null +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js | |||
@@ -0,0 +1,77 @@ | |||
1 | /* <copyright> | ||
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/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, | ||
9 | ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | ||
10 | |||
11 | exports.ShapeProperties = Montage.create(ToolProperties, { | ||
12 | toolsData: { value: null }, | ||
13 | _use3D: { value: false }, | ||
14 | |||
15 | _subPrepare: { | ||
16 | value: function() { | ||
17 | this.rectProperties.visible = true; | ||
18 | |||
19 | ShapesController.DisplayMaterials(this._strokeMaterial); | ||
20 | ShapesController.DisplayMaterials(this._fillMaterial); | ||
21 | |||
22 | this.handleChange(null); | ||
23 | this._useWebGL.addEventListener("change", this, false); | ||
24 | } | ||
25 | }, | ||
26 | |||
27 | _selectedSubTool: { value: null, enumerable: false}, |