From 313354a8ff9ed21b826ab5f280bcf1095a64a7f4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 19 Mar 2012 18:11:50 -0700 Subject: fully removing our old button component from Ninja Signed-off-by: Valerio Virgillito --- .../position-and-size.reel/position-and-size.css | 32 ++++++++++++++++++++-- .../position-and-size.reel/position-and-size.html | 13 ++++----- .../position-and-size.reel/position-and-size.js | 10 +++---- 3 files changed, 40 insertions(+), 15 deletions(-) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css index 227a232b..7f8fdbc2 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css @@ -8,7 +8,33 @@ display: none; } -.fieldCol .disabled -{ +.fieldCol .disabled { color:#999999; -} \ No newline at end of file +} + + +#posBound { + position: absolute; + left: 105px; + border: none; + background-color: transparent; + top: 2px; + opacity: 0.7; + width: 17px; + height: 18px; + margin-right: 10px; +} + +#posBound:hover { + opacity: 1; +} + +.unlock{ + background: url("../../../../../images/optionsbar/unlinked.png") no-repeat; + +} + +.lockUp { + background: url("../../../../../images/optionsbar/link.png") no-repeat; +} + diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html index 6e355f31..f50724c5 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html @@ -85,13 +85,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } }, "bindButton": { - "module": "js/components/button.reel", - "name": "Button", + "prototype": "montage/ui/toggle-button.reel", "properties": { - "element": {"#" :"posBound"}, - "isToggleButton": true, - "onState": "LockToolUp", - "offState": "UnLockToolUp" + "element": {"#": "posBound"}, + "pressedClass": "lockUp", + "preventFocus": true, + "identifier": "ratio" } } } @@ -119,7 +118,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
- +
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js index 49117090..1e47916f 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js @@ -100,7 +100,7 @@ exports.PosSize = Montage.create(Component, { */ handleRatioAction: { value: function() { - if(this.bindButton.value) { + if(this.bindButton.pressed) { this.aspectRatioWidth = this.heightControl.value / this.widthControl.value; if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1; @@ -148,7 +148,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); @@ -173,7 +173,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); @@ -221,7 +221,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); @@ -246,7 +246,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); if(!isFinite(newHeight)) newHeight = this.widthControl.value; -- cgit v1.2.3 From e1c4f30a4c13d747fa69d78598e0961286bbe571 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 10:59:05 -0700 Subject: Support button control in Properties Panel and use them for edit fill and stroke material. Signed-off-by: Nivesh Rajbhandari --- .../sections/custom-rows/dual-row.reel/dual-row.js | 8 +++- .../properties.reel/sections/custom.reel/custom.js | 44 ++++++++++++++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) (limited to 'js/panels/properties.reel/sections') 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 72d216ca..4c5c80d7 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 @@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, { this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; } if(this.label2 !== null) { - this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; + if(this.content2.type === "button") { + this.content2.element = document.createElement("button"); + this.content2.element.classList.add("nj-skinned"); + this.element.getElementsByClassName("lbl")[1].style.display = "none"; + } else { + this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; + } } else { this.element.getElementsByClassName("lbl")[1].style.display = "none"; } diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 3c595980..d7334afe 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -20,6 +20,7 @@ var TextField = require("js/components/textfield.reel").TextField; var FileInput = require("js/components/ui/file-input.reel").FileInput; var Checkbox = require("js/components/checkbox.reel").Checkbox; var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; +var Button = require("montage/ui/button.reel").Button; exports.CustomSection = Montage.create(Component, { @@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, { } }, + handleAction: { + value:function(event) { + if(event._event.wasSetByCode) return; + + var obj = event.currentTarget; + this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); + } + }, + _dispatchPropEvent: { value: function(event) { // console.log(event); @@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, { case "file" : return this.createFileInput(fields); case "checkbox" : return this.createCheckbox(fields); case "chip" : return this.createColorChip(fields); + case "button" : return this.createButton(fields); } } }, @@ -349,6 +360,39 @@ exports.CustomSection = Montage.create(Component, { // TODO - Hack for now to reference the color select object to unregister color chips this.controls["stageBackground"] = obj; + return obj; + } + }, + + createButton: { + value: function(aField) { + var obj = Button.create(); + + // Set Values for Button + if (aField.id) obj.id = aField.id; + if (aField.label) obj.label = aField.label; + if (aField.prop) obj.prop = aField.prop; + + // Special casing button so slot uses "button" tag instead of "div" + obj.type = "button"; + + if (aField.enabled) { + if(aField.enabled.boundObject) { + // TODO - For now, always bind to this.controls[someProperty] + Object.defineBinding(obj, "enabled", { + boundObject: this.controls, + boundObjectPropertyPath: aField.enabled.boundProperty, + oneway: false + }); + } else { + obj.enabled = aField.enabled; + } + } + + obj.addEventListener("action", this, false); + + this.controls[aField.id] = obj; + return obj; } } -- cgit v1.2.3 From 634358d2697d9668bb9406ac7a029aafae542285 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 11:18:07 -0700 Subject: Button's enabled property binding should be oneway only. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/sections/custom.reel/custom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index d7334afe..703ef950 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -382,7 +382,7 @@ exports.CustomSection = Montage.create(Component, { Object.defineBinding(obj, "enabled", { boundObject: this.controls, boundObjectPropertyPath: aField.enabled.boundProperty, - oneway: false + oneway: true }); } else { obj.enabled = aField.enabled; -- cgit v1.2.3 From f2371c4a5a18a4dadb2e76f0275b90ac541e889d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 21:20:44 -0700 Subject: Adding enabled/disabled support for PI's checkbox control. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/sections/custom.reel/custom.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 703ef950..ac316907 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -328,6 +328,19 @@ exports.CustomSection = Montage.create(Component, { if (aField.value) obj.label = aField.value; if (aField.prop) obj.prop = aField.prop; + if (aField.enabled) { + if(aField.enabled.boundObject) { + // TODO - For now, always bind to this.controls[someProperty] + Object.defineBinding(obj, "enabled", { + boundObject: this.controls, + boundObjectPropertyPath: aField.enabled.boundProperty, + oneway: false + }); + } else { + obj.enabled = aField.enabled; + } + } + //Initiate onChange Events obj.addEventListener("change", this, false); -- cgit v1.2.3 From bda9f8f5829c943486f8850e68c991e83f8fb8c8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Sat, 24 Mar 2012 13:50:46 -0700 Subject: Adding logic for flatten checkbox in PI. This requires minor modifications to both StageController and ComponentController. Also removing unused global3DSettings CSS. Signed-off-by: Nivesh Rajbhandari --- .../sections/three-d-view.reel/three-d-view.html | 28 ++++++++++++++++++++-- .../sections/three-d-view.reel/three-d-view.js | 14 +++++++++++ 2 files changed, 40 insertions(+), 2 deletions(-) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html index 18a7369e..b6c25baf 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html @@ -22,7 +22,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "xAngleControl": {"@": "threeDRotX"}, "yAngleControl": {"@": "threeDRotY"}, "zAngleControl": {"@": "threeDRotZ"}, - "axisModeGroupControl": {"@": "axisModeGroup"} + "axisModeGroupControl": {"@": "axisModeGroup"}, + "flattenControl": {"@": "flattenCheckbox"} } }, @@ -242,6 +243,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "value": "Global", "group": {"@": "axisModeGroup"} } + }, + "flattenCheckbox": { + "module": "montage/ui/checkbox.reel", + "name": "Checkbox", + "properties": { + "element": {"#": "flattenCh"}, + "identifier": "flatten", + "checked": false + }, + "bindings": { + "checked": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "flatten", + "oneway": false + } + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"}, + "capture": false + } + ] } } @@ -335,7 +359,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
- +
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 35591afa..0d3d111d 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -79,6 +79,10 @@ exports.ThreeD = Montage.create(Component, { value: 0 }, + flatten: { + value: false + }, + _disableTranslation: { value: true }, @@ -107,6 +111,16 @@ exports.ThreeD = Montage.create(Component, { value: null }, + handleAction: { + value: function(event) { + if(event.currentTarget.identifier === "flatten") { + this.application.ninja.elementMediator.setProperty([this.item], + "-webkit-transform-style", + event.currentTarget.checked ? ["flat"] : ["preserve-3d"]); + } + } + }, + handleChange: { value: function(event) { if(event.wasSetByCode) { -- cgit v1.2.3 From a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 35591afa..f72d1ff6 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -231,7 +231,7 @@ exports.ThreeD = Montage.create(Component, { _getSelectedItem: { value: function(els) { if(els.length) { - return els[0]._element || els[0]; + return els[0]; } else { return this.boundObject.application.ninja.currentDocument.documentRoot; } -- cgit v1.2.3 From b60e576af3915ce0cd7b60ed5e8ed6ff6f1ea9dc Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 16:55:04 -0700 Subject: fixing the number fields to not have units. Signed-off-by: Valerio Virgillito --- .../properties.reel/sections/custom.reel/custom.js | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index ac316907..876fe110 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -15,6 +15,7 @@ var ColorSelect = require("js/panels/properties.reel/sections/custom-rows/color- // Components Needed to make this work var Hottext = require("js/components/hottextunit.reel").HotTextUnit; +var HT = require("js/components/hottext.reel").HotText; var Dropdown = require("js/components/combobox.reel").Combobox; var TextField = require("js/components/textfield.reel").TextField; var FileInput = require("js/components/ui/file-input.reel").FileInput; @@ -168,6 +169,7 @@ exports.CustomSection = Montage.create(Component, { value: function(fields) { switch(fields.type) { case "hottext" : return this.createHottext(fields); + case "ht" : return this.createHT(fields); case "dropdown" : return this.createDropdown(fields); case "textbox" : return this.createTextField(fields); case "file" : return this.createFileInput(fields); @@ -178,6 +180,33 @@ exports.CustomSection = Montage.create(Component, { } }, + createHT: { + value: function(aField) { + + // Generate Hottext + var obj = HT.create(); + + // Set Values for HottextRow + if (aField.id) obj.id = aField.id; + if (aField.value) obj.value = aField.value; + if (aField.min) obj._minValue = aField.min; + if (aField.max) obj._maxValue = aField.max; + if (aField.prop) obj.prop = aField.prop; + + //Initiate onChange Events + obj.addEventListener("change", this, false); + obj.addEventListener("changing", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value" + }); + + return obj; + } + }, + //Breaking Up Switch Case Statement to functions to return a row createHottext: { value: function(aField) { -- cgit v1.2.3