diff options
author | Armen Kesablyan | 2012-02-07 16:55:34 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-07 16:55:34 -0800 |
commit | 10f0ad4c15f090b2d0d50d11e4c7aaf291e9eb0e (patch) | |
tree | 12b31910a3c7c7fa2ee0b26d8aaa611710e139a5 /js/panels/properties | |
parent | 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b (diff) | |
parent | 668510892537eaaeb2e11520831d87b44b2489b7 (diff) | |
download | ninja-10f0ad4c15f090b2d0d50d11e4c7aaf291e9eb0e.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into text-tool
Conflicts:
_scss/compass_app_log.txt
css/ninja.css
Diffstat (limited to 'js/panels/properties')
3 files changed, 133 insertions, 114 deletions
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index fe6faef8..0088447a 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js | |||
@@ -97,10 +97,24 @@ exports.Content = Montage.create(Component, { | |||
97 | value: function(event) { | 97 | value: function(event) { |
98 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update | 98 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update |
99 | if(event.detail.source && event.detail.source !== "pi") { | 99 | if(event.detail.source && event.detail.source !== "pi") { |
100 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); | 100 | // TODO - This should only update the properties that were changed. |
101 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); | 101 | var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; |
102 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | ||
103 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | ||
104 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | ||
105 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | ||
106 | |||
107 | if(this.threeD.inGlobalMode) | ||
108 | { | ||
109 | this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); | ||
110 | this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); | ||
111 | this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); | ||
112 | this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); | ||
113 | this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); | ||
114 | this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); | ||
102 | } | 115 | } |
103 | } | 116 | } |
117 | } | ||
104 | }, | 118 | }, |
105 | 119 | ||
106 | handleSelectionChange: { | 120 | handleSelectionChange: { |
@@ -141,7 +155,8 @@ exports.Content = Montage.create(Component, { | |||
141 | 155 | ||
142 | displayElementProperties: { | 156 | displayElementProperties: { |
143 | value: function (el) { | 157 | value: function (el) { |
144 | var customPI; | 158 | var customPI, |
159 | currentValue; | ||
145 | 160 | ||
146 | this.elementName = el.elementModel.selection; | 161 | this.elementName = el.elementModel.selection; |
147 | this.elementId.value = el.getAttribute("id") || ""; | 162 | this.elementId.value = el.getAttribute("id") || ""; |
@@ -180,87 +195,52 @@ exports.Content = Montage.create(Component, { | |||
180 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { | 195 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { |
181 | for(var k = 0, control; control = fields[k]; k++) { | 196 | for(var k = 0, control; control = fields[k]; k++) { |
182 | 197 | ||
183 | if(control.prop !== "border-color" && control.prop !== "background-color") { | 198 | if(control.type !== "color") { |
184 | var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 199 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
185 | currentValue ? currentValue = currentValue : currentValue = control.defaultValue; | 200 | if(currentValue === null) |
186 | this.customSections[0].content.controls[control.id] = currentValue; | 201 | { |
202 | currentValue = control.defaultValue; | ||
203 | } | ||
204 | this.customSections[i].content.controls[control.id] = currentValue; | ||
205 | } | ||
206 | else | ||
207 | { | ||
208 | currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); | ||
209 | if(control.prop === "border") | ||
210 | { | ||
211 | this.application.ninja.colorController.colorModel.input = "stroke"; | ||
212 | } | ||
213 | else if(control.prop === "background") | ||
214 | { | ||
215 | this.application.ninja.colorController.colorModel.input = "fill"; | ||
216 | } | ||
217 | |||
218 | if(currentValue) | ||
219 | { | ||
220 | if(currentValue.mode === "gradient") | ||
221 | { | ||
222 | this.application.ninja.colorController.colorModel["gradient"] = | ||
223 | {value: currentValue.color, wasSetByCode: true, type: 'change'}; | ||
224 | } | ||
225 | else | ||
226 | { | ||
227 | if (currentValue.color.a !== undefined) | ||
228 | { | ||
229 | this.application.ninja.colorController.colorModel.alpha = | ||
230 | {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; | ||
231 | } | ||
232 | this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; | ||
233 | } | ||
234 | } | ||
235 | else | ||
236 | { | ||
237 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
238 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
239 | } | ||
187 | } | 240 | } |
188 | } | 241 | } |
189 | } | 242 | } |
190 | } | 243 | } |
191 | |||
192 | |||
193 | //TODO: Once logic for color and gradient is established, this needs to be revised | ||
194 | |||
195 | var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image"); | ||
196 | this.application.ninja.colorController.colorModel.input = "stroke"; | ||
197 | if(borderColor || borderImage) { | ||
198 | if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) { | ||
199 | //Gradient | ||
200 | color = this.application.ninja.colorController.getColorObjFromCss(borderImage); | ||
201 | if (color && color.value) { | ||
202 | this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; | ||
203 | } else { | ||
204 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
205 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
206 | } | ||
207 | } else { | ||
208 | //Solid | ||
209 | color = this.application.ninja.colorController.getColorObjFromCss(borderColor); | ||
210 | if (color && color.value) { | ||
211 | color.value.wasSetByCode = true; | ||
212 | color.value.type = 'change'; | ||
213 | if (color.value.a) { | ||
214 | this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; | ||
215 | } | ||
216 | this.application.ninja.colorController.colorModel[color.mode] = color.value; | ||
217 | } else { | ||
218 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
219 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
220 | } | ||
221 | } | ||
222 | } else { | ||
223 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
224 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
225 | } | ||
226 | // | ||
227 | background = ElementsMediator.getProperty(el, "background-color"); | ||
228 | backgroundImage = ElementsMediator.getProperty(el, "background-image"); | ||
229 | this.application.ninja.colorController.colorModel.input = "fill"; | ||
230 | if(background || backgroundImage) { | ||
231 | if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) { | ||
232 | //Gradient | ||
233 | color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage); | ||
234 | if (color && color.value) { | ||
235 | this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; | ||
236 | } else { | ||
237 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
238 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
239 | } | ||
240 | } else { | ||
241 | //Solid | ||
242 | color = this.application.ninja.colorController.getColorObjFromCss(background); | ||
243 | if (color && color.value) { | ||
244 | color.value.wasSetByCode = true; | ||
245 | color.value.type = 'change'; | ||
246 | if (color.value.a) { | ||
247 | this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; | ||
248 | } | ||
249 | this.application.ninja.colorController.colorModel[color.mode] = color.value; | ||
250 | } else { | ||
251 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
252 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
253 | } | ||
254 | } | ||
255 | } else { | ||
256 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
257 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
258 | } | ||
259 | |||
260 | |||
261 | |||
262 | |||
263 | |||
264 | } | 244 | } |
265 | }, | 245 | }, |
266 | 246 | ||
@@ -300,16 +280,12 @@ exports.Content = Montage.create(Component, { | |||
300 | 280 | ||
301 | handlePropertyChange: { | 281 | handlePropertyChange: { |
302 | value: function(e) { | 282 | value: function(e) { |
283 | if(e.wasSetByCode) return; | ||
284 | |||
303 | var newValue; | 285 | var newValue; |
304 | 286 | ||
305 | e.units ? newValue = e.value + e.units : newValue = e.value; | 287 | e.units ? newValue = e.value + e.units : newValue = e.value; |
306 | 288 | ||
307 | if(e.prop === "border-width") {// || e.prop === "border-style") { | ||
308 | ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi"); | ||
309 | } else if(e.prop === "border-style") { | ||
310 | ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi"); | ||
311 | } | ||
312 | |||
313 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); | 289 | ElementsMediator.setPrope |