From a396caf12a9e1fc84b984d39f8e671c335d2f5d5 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 18 May 2012 14:36:53 -0700 Subject: File Input control in materials panel was not working because of the change from id to data-montage-id. Signed-off-by: Nivesh Rajbhandari --- js/components/ui/file-input.reel/file-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/components/ui/file-input.reel/file-input.js b/js/components/ui/file-input.reel/file-input.js index b57f7c21..584380ec 100755 --- a/js/components/ui/file-input.reel/file-input.js +++ b/js/components/ui/file-input.reel/file-input.js @@ -38,7 +38,7 @@ var FileInput = exports.FileInput = Montage.create(Component, { { value:function(event) { - if(event.currentTarget.id === "fileInputControl") + if(event.currentTarget.type === "file") { this.filePath = this.inputField.value; } -- cgit v1.2.3 From 3e22b0940bb7752e292e485d8a393f215cae05de Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 18 May 2012 15:14:36 -0700 Subject: Fixed Materials Popup to work with new changes to repetition bindings. Signed-off-by: Nivesh Rajbhandari --- js/components/ui/input-group.reel/input-group.html | 3 ++- js/components/ui/property-control.reel/property-control.js | 12 ++++++++++-- .../Materials/materials-popup.reel/materials-popup.html | 2 +- js/panels/Materials/materials-popup.reel/materials-popup.js | 7 ++++++- 4 files changed, 19 insertions(+), 5 deletions(-) (limited to 'js') diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html index ba85c089..7da4a855 100755 --- a/js/components/ui/input-group.reel/input-group.html +++ b/js/components/ui/input-group.reel/input-group.html @@ -25,7 +25,8 @@ "bindings": { "data": { "boundObject": {"@": "propList"}, - "boundObjectPropertyPath": "objectAtCurrentIteration" + "boundObjectPropertyPath": "objectAtCurrentIteration", + "oneway": true } }, "listeners": [ diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js index c28979a9..20ec173e 100755 --- a/js/components/ui/property-control.reel/property-control.js +++ b/js/components/ui/property-control.reel/property-control.js @@ -120,8 +120,13 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { set: function (data) { if (data !== this._data) { this._data = data; - this.label = data.label; - this.controlType = data.controlType; + if(data) { + this._label = data.label; + this._controlType = data.controlType; + } else { + this._label = ""; + this._controlType = null; + } this.needsDraw = true; } } @@ -143,6 +148,9 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { { value:function(event) { + if(event.wasSetByCode) { + return; + } this._dispatchPropEvent(event); } }, diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index d18599d6..bac722cd 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -43,7 +43,7 @@ "data": { "boundObject": {"@": "materialsProperties"}, "boundObjectPropertyPath": "objectAtCurrentIteration", - "oneway": false + "oneway": true } }, "listeners": [ diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index bd10f7a5..a4f758cf 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -625,6 +625,11 @@ exports.MaterialsPopup = Montage.create(Component, { } ] }, + + materialsProperties: { + serializable: true, + value: null + }, _materialsData: { enumerable: true, @@ -641,7 +646,7 @@ exports.MaterialsPopup = Montage.create(Component, { }, set: function(data) { this._materialsData = data; - if(this.materialsProperties) + if(this.materialsProperties && data.length) { this.materialsProperties.needsDraw = true; } -- cgit v1.2.3 From f30e5613e37ec6858fe4b56d289fafb9f1b9b9f8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 18 May 2012 16:12:30 -0700 Subject: Fixing button controls in the Properties Panel for changes in montage v.10 drawing. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/properties.css | 30 ++++++++++++++++++++++ .../custom-rows/dual-row.reel/dual-row.html | 10 ++------ .../sections/custom-rows/dual-row.reel/dual-row.js | 3 +-- 3 files changed, 33 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index 5306eb5b..3166a1ff 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -303,4 +303,34 @@ input label { .propertiesPanel .rotation .fieldRow { -webkit-box-flex:0; width:45px; +} + +.propertiesPanel div.montage-button:disabled { + opacity: 0.4; +} + +.propertiesPanel div.montage-button { + font-size: 9px; + cursor: pointer; + display: block; + margin: -3px 0 0 -12px; + padding: 4px; + border: 1px #313131 solid; + background-color: #474747; + background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); + border-radius: 4px; + color: white; + text-transform: uppercase; + cursor: pointer; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + width: 18px; + height: 14px; +} + +.propertiesPanel div.montage-button:active { + background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); +} + +.propertiesPanel div.montage-button:hover { + -webkit-box-shadow: 0px 0px 3px #b4b4b4; } \ No newline at end of file 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 @@ "element": { "#": "slotElement" } }, "bindings": { - "content" : { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "content" - } + "content": {"<-": "@owner.content"} } }, "slot2": { @@ -34,10 +31,7 @@ "element": { "#": "slotElement2" } }, "bindings": { - "content" : { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "content2" - } + "content": {"<-": "@owner.content2"} } } } 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, { } if(this.label2 !== null) { if(this.content2.type === "button") { - this.content2.element = document.createElement("button"); - this.content2.element.classList.add("nj-skinned"); + this.content2.label = this.label2; this.element.getElementsByClassName("lbl")[1].style.display = "none"; } else { this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; -- cgit v1.2.3 From fdfba499f0b84360b96096fa866a981e96e8756c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 18 May 2012 16:35:56 -0700 Subject: fixing the color chip for the document root Signed-off-by: Valerio Virgillito --- js/components/ui/color-chip.reel/color-chip.js | 13 +++++++++++-- js/controllers/document-controller.js | 2 ++ js/controllers/elements/body-controller.js | 2 +- js/document/views/design.js | 5 +++++ js/ninja.reel/ninja.js | 2 +- js/panels/properties.reel/properties.js | 25 +++++++++++++++++++++---- 6 files changed, 41 insertions(+), 8 deletions(-) (limited to 'js') diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 4e64b2e8..630dcd4b 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -33,6 +33,11 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} }, + chipBtn: { + serializable: true, + value: null + }, + changeDelegate: { value: function(event) { this.color = event._event.color; @@ -60,7 +65,7 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { this.icon.style.display = "none"; } - this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset}; + this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, nocolor: true, offset: this.offset}; this.application.ninja.colorController.addButton(this.mode, this.chipBtn); } @@ -80,9 +85,13 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { b = colorObj.value.b; a = colorObj.value.a; css = colorObj.css; + this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); + } else { + mode = "nocolor"; + this.chipBtn.color(mode, null); + } - this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); this.chipBtn.addEventListener("change", this, false); } } diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index f1523d87..7721d32d 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -489,6 +489,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, if(currentDocument) { currentDocument.serializeDocument(); + this.application.ninja.selectionController._selectionContainer = null; + currentDocument.model.views.design.propertiesPanel.clear(); currentDocument.model.views.design.hide(); } diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 5c23dcf7..7a3a66f5 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -30,7 +30,7 @@ exports.BodyController = Montage.create(ElementController, { value: function(el, p) { switch(p) { case "background" : - return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", true, true)); + return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", false, true)); case "border": return 0; case "height": diff --git a/js/document/views/design.js b/js/document/views/design.js index 2ccb82d1..44f1a5e8 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -64,6 +64,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { }, //////////////////////////////////////////////////////////////////// // + propertiesPanel: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // initialize: { value: function (parent) { //Creating iFrame for view diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 6d41cd53..80d1b406 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -280,7 +280,7 @@ exports.Ninja = Montage.create(Component, { this.currentDocument = event.detail; if(this.currentDocument.documentRoot) { - this.application.ninja.currentSelectedContainer = this.currentDocument.documentRoot; + this.currentSelectedContainer = this.currentDocument.documentRoot; } else { alert("The current document has not loaded yet"); return; diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 4d048472..eb362796 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -46,7 +46,7 @@ exports.Properties = Montage.create(Component, { prepareForDraw: { value : function() { - + this.eventManager.addEventListener("openDocument", this, false); this.eventManager.addEventListener("selectionChange", this, false); // This will be a toggle option @@ -54,8 +54,6 @@ exports.Properties = Montage.create(Component, { this.eventManager.addEventListener( "elementChanging", this, false); } - this.eventManager.addEventListener("openDocument", this, false); - this.elementId.element.addEventListener("blur", this, false); this.elementId.element.addEventListener("focus", this, false); this.elementId.element.addEventListener("keyup", this, false); @@ -70,6 +68,9 @@ exports.Properties = Montage.create(Component, { value: function() { this.eventManager.addEventListener( "elementChange", this, false); + // Save a reference of the pi inside the document view to be able to clear + this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; + // Display the default document root PI this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } @@ -165,6 +166,15 @@ exports.Properties = Montage.create(Component, { } }, + clear: { + value: function() { + this.elementName.value = ""; + this.elementId.value = ""; + this.elementClass.value = ""; + this.customPi = null; + } + }, + displayElementProperties: { value: function (el) { var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; @@ -210,9 +220,16 @@ exports.Properties = Montage.create(Component, { this.displayCustomProperties(el, el.elementModel.pi); } + // Root element color chip if(isRoot) { var backgroundChip = this.customSections[0].content.controls["background"]; - if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background"); + var rootBackgroundColor = ElementsMediator.getProperty(el, "background"); + + if(rootBackgroundColor) { + backgroundChip.color = rootBackgroundColor; + } else { + backgroundChip.color = null; + } } var previousInput = this.application.ninja.colorController.colorModel.input; -- cgit v1.2.3 From ca70f18a62a2a2b5670be132361e3a3f5907d920 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 18 May 2012 17:12:37 -0700 Subject: Fixing radio control in the PI. Signed-off-by: Nivesh Rajbhandari --- js/components/radio.reel/radio.html | 9 +++++++-- js/components/radio.reel/radio.js | 24 +++++++++++++++--------- js/panels/properties.reel/properties.css | 1 + 3 files changed, 23 insertions(+), 11 deletions(-) (limited to 'js') diff --git a/js/components/radio.reel/radio.html b/js/components/radio.reel/radio.html index 01b76b92..cee4c369 100755 --- a/js/components/radio.reel/radio.html +++ b/js/components/radio.reel/radio.html @@ -11,13 +11,18 @@ "owner": { "prototype": "js/components/radio.reel", "properties": { - "element": {"#": "ch_comp"} + "element": {"#": "radio_comp"}, + "labelField": {"#": "labelField"}, + "radioField": {"#": "radioField"} } } } - +
+ + +
\ No newline at end of file diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js index c661ec11..cec4f52e 100755 --- a/js/components/radio.reel/radio.js +++ b/js/components/radio.reel/radio.js @@ -62,7 +62,7 @@ exports.RadioGroup = Montage.create(Component, { { value:function(radio) { - radio.element.setAttribute("name", this.name); + radio.radioField.setAttribute("name", this.name); radio.addEventListener("change", this, false); this.radios.push(radio); } @@ -104,6 +104,14 @@ exports.Radio = Montage.create(Component, { value: null }, + labelField: { + value: null + }, + + radioField: { + value: null + }, + _checked: { enumerable: false, value: false @@ -140,13 +148,13 @@ exports.Radio = Montage.create(Component, { { this._valueSyncedWithInputField = true; this._wasSetByCode = false; - this.checked = this.element.checked; + this.checked = this.radioField.checked; } }, handleClick: { value: function() { this._wasSetByCode = false; - this.checked = !this.element.checked; + this.checked = !this.radioField.checked; } }, @@ -154,7 +162,7 @@ exports.Radio = Montage.create(Component, { value: function() { if(!this._valueSyncedWithInputField) { - this.element.checked = this._checked; + this.radioField.checked = this._checked; } this._valueSyncedWithInputField = false; } @@ -163,15 +171,13 @@ exports.Radio = Montage.create(Component, { prepareForDraw: { value: function() { if (this.label !== null) { - var b = document.createElement("label"); - b.innerHTML = this.label; - this.element.appendChild(b); - b.addEventListener("click", this, false); + this.labelField.innerHTML = this.label; } + this.element.addEventListener("click", this, false); if (this.group !== null) { this.group.addRadio(this); } - this.element.addEventListener("change", this, false); + this.radioField.addEventListener("change", this, false); } } diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index 3166a1ff..84f52ed4 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -285,6 +285,7 @@ padding-right:6px; .propertiesPanel input[type='radio'].nj-skinned { text-indent: 0px; line-height: 5px; + margin: -4px 0 0 0; } .propertiesPanel input[type='radio'].nj-skinned label { -- cgit v1.2.3