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.css54
-rwxr-xr-xjs/panels/properties.reel/properties.html10
-rwxr-xr-xjs/panels/properties.reel/properties.js205
-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, 162 insertions, 200 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 0928da3a..84f52ed4 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -4,6 +4,21 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7/* Cleanup TODO - now that we removed the color toolbar from the tools panel, we no longer load the colortoolbar reel.
8 Currently the color chips in the property inspector rely on the colortoolbar button style so we
9 copied the class here. When we do the color feature cleanup we should remove this dependency.
10*/
11.colortoolbar button {
12 float: left;
13 clear: both;
14 width: 27px;
15 height: 27px;
16 background: black;
17 border: 1px solid #000;
18 padding: 0;
19 margin: 0px;
20}
21
7.propertiesPanel { 22.propertiesPanel {
8 color:#FFF; 23 color:#FFF;
9 overflow-x: hidden; 24 overflow-x: hidden;
@@ -256,20 +271,21 @@ padding-right:6px;
256 content: "•"; 271 content: "•";
257} 272}
258 273
259.propertiesPanel input.nj-skinned label { 274.propertiesPanel .checkbox-label {
260 position: absolute; 275 position: absolute;
261 top: 0; 276 top: 4px;
262 left: 15px; 277 padding-left: 5px;
278 /*left: 15px;*/
263 font-size: 10px; 279 font-size: 10px;
264 width:55px; 280 width:55px;
265 text-align: left; 281 text-align: left;
266 font-weight: normal; 282 font-weight: normal;
267 color:#FFF; 283 color:#FFF;
268} 284}
269
270.propertiesPanel input[type='radio'].nj-skinned { 285.propertiesPanel input[type='radio'].nj-skinned {
271 text-indent: 0px; 286 text-indent: 0px;
272 line-height: 5px; 287 line-height: 5px;
288 margin: -4px 0 0 0;
273} 289}
274 290
275.propertiesPanel input[type='radio'].nj-skinned label { 291.propertiesPanel input[type='radio'].nj-skinned label {
@@ -288,4 +304,34 @@ input label {
288.propertiesPanel .rotation .fieldRow { 304.propertiesPanel .rotation .fieldRow {
289 -webkit-box-flex:0; 305 -webkit-box-flex:0;
290 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;
291} \ 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 507770f6..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 }