diff options
author | Armen Kesablyan | 2012-05-23 14:34:58 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-05-23 14:34:58 -0700 |
commit | c21db7f1e4a0582777bdb5366df5d023a915b779 (patch) | |
tree | c4d29cb4686101d4a480ae836d20187879cf5400 /js/panels/properties.reel | |
parent | 3ed95247e9ea4b0a7833401ed6809647b7c4acbf (diff) | |
parent | 1a7e347810401e6262d9d7bad1c3583e6773993b (diff) | |
download | ninja-c21db7f1e4a0582777bdb5366df5d023a915b779.tar.gz |
Merge branch 'refs/heads/dom-architecture' into binding
Conflicts:
js/data/panels-data.js
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/panels/properties.reel')
5 files changed, 67 insertions, 32 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index 5306eb5b..84f52ed4 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css | |||
@@ -285,6 +285,7 @@ padding-right:6px; | |||
285 | .propertiesPanel input[type='radio'].nj-skinned { | 285 | .propertiesPanel input[type='radio'].nj-skinned { |
286 | text-indent: 0px; | 286 | text-indent: 0px; |
287 | line-height: 5px; | 287 | line-height: 5px; |
288 | margin: -4px 0 0 0; | ||
288 | } | 289 | } |
289 | 290 | ||
290 | .propertiesPanel input[type='radio'].nj-skinned label { | 291 | .propertiesPanel input[type='radio'].nj-skinned label { |
@@ -303,4 +304,34 @@ input label { | |||
303 | .propertiesPanel .rotation .fieldRow { | 304 | .propertiesPanel .rotation .fieldRow { |
304 | -webkit-box-flex:0; | 305 | -webkit-box-flex:0; |
305 | width:45px; | 306 | width:45px; |
307 | } | ||
308 | |||
309 | .propertiesPanel div.montage-button:disabled { | ||
310 | opacity: 0.4; | ||
311 | } | ||
312 | |||
313 | .propertiesPanel div.montage-button { | ||
314 | font-size: 9px; | ||
315 | cursor: pointer; | ||
316 | display: block; | ||
317 | margin: -3px 0 0 -12px; | ||
318 | padding: 4px; | ||
319 | border: 1px #313131 solid; | ||
320 | background-color: #474747; | ||
321 | background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); | ||
322 | border-radius: 4px; | ||
323 | color: white; | ||
324 | text-transform: uppercase; | ||
325 | cursor: pointer; | ||
326 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | ||
327 | width: 18px; | ||
328 | height: 14px; | ||
329 | } | ||
330 | |||
331 | .propertiesPanel div.montage-button:active { | ||
332 | background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); | ||
333 | } | ||
334 | |||
335 | .propertiesPanel div.montage-button:hover { | ||
336 | -webkit-box-shadow: 0px 0px 3px #b4b4b4; | ||
306 | } \ No newline at end of file | 337 | } \ No newline at end of file |
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index fa62c850..b292a66a 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -46,17 +46,15 @@ exports.Properties = Montage.create(Component, { | |||
46 | 46 | ||
47 | prepareForDraw: { | 47 | prepareForDraw: { |
48 | value : function() { | 48 | value : function() { |
49 | 49 | this.eventManager.addEventListener("openDocument", this, false); | |
50 | this.eventManager.addEventListener("selectionChange", this, false); | 50 | this.eventManager.addEventListener("selectionChange", this, false); |
51 | this.eventManager.addEventListener("closeDocument", this, false); | ||
51 | 52 | ||
52 | // This will be a toggle option | 53 | // This will be a toggle option |
53 | if(this.application.ninja.appData.PILiveUpdate) { | 54 | if(this.application.ninja.appData.PILiveUpdate) { |
54 | this.eventManager.addEventListener( "elementChanging", this, false); | 55 | this.eventManager.addEventListener( "elementChanging", this, false); |
55 | } | 56 | } |
56 | 57 | ||
57 | this.eventManager.addEventListener("openDocument", this, false); | ||
58 | this.eventManager.addEventListener("switchDocument", this, false); | ||
59 | |||
60 | this.elementId.element.addEventListener("blur", this, false); | 58 | this.elementId.element.addEventListener("blur", this, false); |
61 | this.elementId.element.addEventListener("focus", this, false); | 59 | this.elementId.element.addEventListener("focus", this, false); |
62 | this.elementId.element.addEventListener("keyup", this, false); | 60 | this.elementId.element.addEventListener("keyup", this, false); |
@@ -71,23 +69,17 @@ exports.Properties = Montage.create(Component, { | |||
71 | value: function() { | 69 | value: function() { |
72 | this.eventManager.addEventListener( "elementChange", this, false); | 70 | this.eventManager.addEventListener( "elementChange", this, false); |
73 | 71 | ||
72 | // Save a reference of the pi inside the document view to be able to clear | ||
73 | this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; | ||
74 | |||
74 | // Display the default document root PI | 75 | // Display the default document root PI |
75 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); | 76 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); |
76 | } | 77 | } |
77 | }, | 78 | }, |
78 | 79 | ||
79 | handleSwitchDocument: { | 80 | handleCloseDocument: { |
80 | value: function(){ | 81 | value: function(){ |
81 | // For now always assume that the stage is selected by default | 82 | this.clear(); |
82 | if(this.application.ninja.selectedElements.length === 0) { | ||
83 | this.displayStageProperties(); | ||
84 | } else { | ||
85 | if(this.application.ninja.selectedElements.length === 1) { | ||
86 | this.displayElementProperties(this.application.ninja.selectedElements[0]); | ||
87 | } else { | ||
88 | this.displayGroupProperties(this.application.ninja.selectedElements); | ||
89 | } | ||
90 | } | ||
91 | } | 83 | } |
92 | }, | 84 | }, |
93 | 85 | ||
@@ -181,6 +173,16 @@ exports.Properties = Montage.create(Component, { | |||
181 | } | 173 | } |
182 | }, | 174 | }, |
183 | 175 | ||
176 | clear: { | ||
177 | value: function() { | ||
178 | this.elementName.value = ""; | ||
179 | this.elementId.value = ""; | ||
180 | this.elementClass.value = ""; | ||
181 | this.customPi = null; | ||
182 | this.customSections = []; | ||
183 | } | ||
184 | }, | ||
185 | |||
184 | displayElementProperties: { | 186 | displayElementProperties: { |
185 | value: function (el) { | 187 | value: function (el) { |
186 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; | 188 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; |
@@ -217,20 +219,29 @@ exports.Properties = Montage.create(Component, { | |||
217 | controls = this.customSections[n].content.controls; | 219 | controls = this.customSections[n].content.controls; |
218 | if(controls["colorSelect"]) { | 220 | if(controls["colorSelect"]) { |
219 | controls["colorSelect"].destroy(); | 221 | controls["colorSelect"].destroy(); |
220 | } else if(controls["stageBackground"]) { | 222 | } else if(controls["background"]) { |
221 | controls["stageBackground"].destroy(); | 223 | controls["background"].destroy(); |
222 | } | 224 | } |
223 | } | 225 | } |
224 | 226 | ||
225 | this.customPi = el.elementModel.pi; | 227 | this.customPi = el.elementModel.pi; |
226 | this.displayCustomProperties(el, el.elementModel.pi); | 228 | this.displayCustomProperties(el, el.elementModel.pi); |
227 | } | ||
228 | 229 | ||
229 | if(isRoot) { | 230 | // Root element color chip |
230 | var backgroundChip = this.customSections[0].content.controls["background"]; | 231 | if(isRoot) { |
231 | if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background"); | 232 | var backgroundChip = this.customSections[0].content.controls["background"]; |
233 | var rootBackgroundColor = ElementsMediator.getProperty(el, "background"); | ||
234 | |||
235 | if(rootBackgroundColor) { | ||
236 | backgroundChip.color = rootBackgroundColor; | ||
237 | } else { | ||
238 | backgroundChip.color = null; | ||
239 | } | ||
240 | } | ||
232 | } | 241 | } |
233 | 242 | ||
243 | |||
244 | |||
234 | var previousInput = this.application.ninja.colorController.colorModel.input; | 245 | var previousInput = this.application.ninja.colorController.colorModel.input; |
235 | customPI = PiData[this.customPi]; | 246 | customPI = PiData[this.customPi]; |
236 | // Get all the custom section for the custom PI | 247 | // Get all the custom section for the custom PI |
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html index bdcbff7f..c3af0668 100755 --- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html | |||
@@ -22,10 +22,7 @@ | |||
22 | "element": { "#": "slotElement" } | 22 | "element": { "#": "slotElement" } |
23 | }, | 23 | }, |
24 | "bindings": { | 24 | "bindings": { |
25 | "content" : { | 25 | "content": {"<-": "@owner.content"} |
26 | "boundObject": {"@": "owner"}, | ||
27 | "boundObjectPropertyPath": "content" | ||
28 | } | ||
29 | } | 26 | } |
30 | }, | 27 | }, |
31 | "slot2": { | 28 | "slot2": { |
@@ -34,10 +31,7 @@ | |||
34 | "element": { "#": "slotElement2" } | 31 | "element": { "#": "slotElement2" } |
35 | }, | 32 | }, |
36 | "bindings": { | 33 | "bindings": { |
37 | "content" : { | 34 | "content": {"<-": "@owner.content2"} |
38 | "boundObject": {"@": "owner"}, | ||
39 | "boundObjectPropertyPath": "content2" | ||
40 | } | ||
41 | } | 35 | } |
42 | } | 36 | } |
43 | } | 37 | } |
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js index 4c5c80d7..2f81aa2e 100755 --- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js | |||
@@ -44,8 +44,7 @@ exports.DualRow = Montage.create(Component, { | |||
44 | } | 44 | } |
45 | if(this.label2 !== null) { |