aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties/shape-properties.reel
diff options
context:
space:
mode:
authorArmen Kesablyan2012-05-17 14:01:38 -0700
committerArmen Kesablyan2012-05-17 14:01:38 -0700
commit6c8f3525b839e82cf43df43700a0160ee2c5458f (patch)
tree3fb801fa54b759c5568d75bb467e02652ce77c3e /js/components/tools-properties/shape-properties.reel
parente8ae5db7ce7023b638375cbc27a3f7b7a2f77b23 (diff)
parent342c97ac9b727b22a7b0bfefca4d2a168bc3055b (diff)
downloadninja-6c8f3525b839e82cf43df43700a0160ee2c5458f.tar.gz
Merge branch 'refs/heads/dom-architecture' into binding
Conflicts: css/ninja.css scss/imports/scss/_toolbar.scss Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/components/tools-properties/shape-properties.reel')
-rwxr-xr-xjs/components/tools-properties/shape-properties.reel/shape-properties.css16
-rwxr-xr-xjs/components/tools-properties/shape-properties.reel/shape-properties.html33
-rwxr-xr-xjs/components/tools-properties/shape-properties.reel/shape-properties.js126
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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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
11exports.ShapeProperties = Montage.create(ToolProperties, { 11var 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