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.css31
-rwxr-xr-xjs/panels/properties.reel/properties.js53
-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.js2
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) { 45 if(this.label2 !== null) {
46 if(this.content2.type === "button") { 46 if(this.content2.type === "button") {
47 this.content2.element = document.createElement("button"); 47 this.content2.label = this.label2;