diff options
Diffstat (limited to 'js/panels/properties.reel')
10 files changed, 148 insertions, 200 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index eee44561..84f52ed4 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css | |||
@@ -271,20 +271,21 @@ padding-right:6px; | |||
271 | content: "•"; | 271 | content: "•"; |
272 | } | 272 | } |
273 | 273 | ||
274 | .propertiesPanel input.nj-skinned label { | 274 | .propertiesPanel .checkbox-label { |
275 | position: absolute; | 275 | position: absolute; |
276 | top: 0; | 276 | top: 4px; |
277 | left: 15px; | 277 | padding-left: 5px; |
278 | /*left: 15px;*/ | ||
278 | font-size: 10px; | 279 | font-size: 10px; |
279 | width:55px; | 280 | width:55px; |
280 | text-align: left; | 281 | text-align: left; |
281 | font-weight: normal; | 282 | font-weight: normal; |
282 | color:#FFF; | 283 | color:#FFF; |
283 | } | 284 | } |
284 | |||
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.html b/js/panels/properties.reel/properties.html index 3a1ae880..ac0dab5a 100755 --- a/js/panels/properties.reel/properties.html +++ b/js/panels/properties.reel/properties.html | |||
@@ -38,13 +38,15 @@ | |||
38 | "prototype": "js/panels/properties.reel/section.reel", | 38 | "prototype": "js/panels/properties.reel/section.reel", |
39 | "properties": { | 39 | "properties": { |
40 | "element": {"#": "PosSize"}, | 40 | "element": {"#": "PosSize"}, |
41 | "content" : {"@": "PosSize"}, | 41 | "content" : {"@": "positionSize"}, |
42 | "name" : "Position And Size" | 42 | "name" : "Position And Size" |
43 | } | 43 | } |
44 | }, | 44 | }, |
45 | "PosSize": { | 45 | |
46 | "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]" | 46 | "positionSize": { |
47 | "prototype": "js/panels/properties.reel/sections/position-size.reel" | ||
47 | }, | 48 | }, |
49 | |||
48 | "threeDSection": { | 50 | "threeDSection": { |
49 | "prototype": "js/panels/properties.reel/section.reel", | 51 | "prototype": "js/panels/properties.reel/section.reel", |
50 | "properties": { | 52 | "properties": { |
@@ -97,7 +99,7 @@ | |||
97 | "elementName": {"@": "elementName"}, | 99 | "elementName": {"@": "elementName"}, |
98 | "elementClass": {"@": "elementClass"}, | 100 | "elementClass": {"@": "elementClass"}, |
99 | "elementId": {"@": "elementId"}, | 101 | "elementId": {"@": "elementId"}, |
100 | "positionSize": {"@": "PosSize"}, | 102 | "positionSize": {"@": "positionSize"}, |
101 | "threeD": {"@": "threeDProperties"} | 103 | "threeD": {"@": "threeDProperties"} |
102 | } | 104 | } |
103 | } | 105 | } |
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 9af9253b..7f8197ea 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); |
@@ -67,32 +65,21 @@ exports.Properties = Montage.create(Component, { | |||
67 | } | 65 | } |
68 | }, | 66 | }, |
69 | 67 | ||
70 | // Document is opened - Display the current selection | ||
71 | handleOpenDocument: { | 68 | handleOpenDocument: { |
72 | value: function() { | 69 | value: function() { |
73 | |||
74 | this.eventManager.addEventListener( "elementChange", this, false); | 70 | this.eventManager.addEventListener( "elementChange", this, false); |
75 | 71 | ||
76 | // For now always assume that the stage is selected by default when opening the old template | 72 | // Save a reference of the pi inside the document view to be able to clear |
77 | // TODO: Remove marker for old template: NINJA-STAGE-REWORK | 73 | this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; |
78 | if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") { | 74 | |
79 | this.displayStageProperties(); | 75 | // Display the default document root PI |
80 | } | 76 | this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot); |
81 | } | 77 | } |
82 | }, | 78 | }, |
83 | 79 | ||
84 | handleSwitchDocument: { | 80 | handleCloseDocument: { |
85 | value: function(){ | 81 | value: function(){ |
86 | // For now always assume that the stage is selected by default | 82 | this.clear(); |
87 | if(this.application.ninja.selectedElements.length === 0) { | ||
88 | this.displayStageProperties(); | ||
89 | } else { | ||
90 | if(this.application.ninja.selectedElements.length === 1) { | ||
91 | this.displayElementProperties(this.application.ninja.selectedElements[0]); | ||
92 | } else { | ||
93 | this.displayGroupProperties(this.application.ninja.selectedElements); | ||
94 | } | ||
95 | } | ||
96 | } | 83 | } |
97 | }, | 84 | }, |
98 | 85 | ||
@@ -101,12 +88,14 @@ exports.Properties = Montage.create(Component, { | |||
101 | */ | 88 | */ |
102 | handleBlur: { | 89 | handleBlur: { |
103 | value: function(event) { | 90 | value: function(event) { |
104 | if(event.target.dataset.montageId === "elementId") { | 91 | |
92 | if(event.target === this.elementId.element) { | ||
93 | |||
105 | // Remove all white spaces from the id | 94 | // Remove all white spaces from the id |
106 | this.elementId.value = this.elementId.value.replace(/\s/g, ''); | 95 | this.elementId.value = this.elementId.value.replace(/\s/g, ''); |
107 | 96 | ||
108 | // Check if that id is in use | 97 | // Check if that id is in use |
109 | if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) { | 98 | if(this.application.ninja.currentDocument.model.views.design.document.getElementById(this.elementId.value) !== null) { |
110 | // TODO: Replace with Ninja Alert | 99 | // TODO: Replace with Ninja Alert |
111 | alert("The following ID: " + this.elementId.value + " is already in use"); | 100 | alert("The following ID: " + this.elementId.value + " is already in use"); |
112 | } | 101 | } |
@@ -115,13 +104,13 @@ exports.Properties = Montage.create(Component, { | |||
115 | // ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); | 104 | // ElementsMediator.setAttribut |