aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel')
-rwxr-xr-xjs/panels/properties.reel/properties.css39
-rwxr-xr-xjs/panels/properties.reel/properties.html10
-rwxr-xr-xjs/panels/properties.reel/properties.js204
-rwxr-xr-xjs/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html10
-rwxr-xr-xjs/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js3
-rwxr-xr-xjs/panels/properties.reel/sections/custom.reel/custom.js20
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.css (renamed from js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css)0
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.html (renamed from js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html)36
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.js (renamed from js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js)22
-rwxr-xr-xjs/panels/properties.reel/sections/three-d-view.reel/three-d-view.js2
10 files changed, 146 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 8c2daa14..84b0d589 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
@@ -102,13 +89,13 @@ exports.Properties = Montage.create(Component, {
102 handleBlur: { 89 handleBlur: {
103 value: function(event) { 90 value: function(event) {
104 91
105 if(event.target.id === "elementId") { 92 if(event.target === this.elementId.element) {
106 93
107 // Remove all white spaces from the id 94 // Remove all white spaces from the id
108 this.elementId.value = this.elementId.value.replace(/\s/g, ''); 95 this.elementId.value = this.elementId.value.replace(/\s/g, '');
109 96
110 // Check if that id is in use 97 // Check if that id is in use
111 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) {
112 // TODO: Replace with Ninja Alert 99 // TODO: Replace with Ninja Alert
113 alert("The following ID: " + this.elementId.value + " is already in use"); 100 alert("The following ID: " + this.elementId.value + " is already in use");