From e7293b28c53b23e64044c29e8451cbf3fc0bd049 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 10 May 2012 22:25:26 -0700 Subject: Partially fixing the body pi and fixing the selection controller Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 8c2daa14..6f43ce03 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -78,6 +78,7 @@ exports.Properties = Montage.create(Component, { if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") { this.displayStageProperties(); } + this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } }, @@ -174,8 +175,9 @@ exports.Properties = Montage.create(Component, { handleSelectionChange: { value: function(event) { if(event.detail.isDocument) { - if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; - this.displayStageProperties(); +// if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; +// this.displayStageProperties(); + this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } else { if(this.application.ninja.selectedElements.length === 1) { this.displayElementProperties(this.application.ninja.selectedElements[0]); -- cgit v1.2.3 From c87e538fdc337639bc4d54bb087dbf2b4f20297f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 11 May 2012 14:41:20 -0700 Subject: Adding support for new templates This is supported for NEW and OPEN, SAVE is not supported yet by I/O. Saving works, but it will not be a banner template. --- js/panels/properties.reel/properties.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 6f43ce03..20f670d9 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -75,9 +75,7 @@ exports.Properties = Montage.create(Component, { // For now always assume that the stage is selected by default when opening the old template // TODO: Remove marker for old template: NINJA-STAGE-REWORK - if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") { - this.displayStageProperties(); - } + this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } }, -- cgit v1.2.3 From 8f8eb57f4506987942745c3325492e939ed3caa8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 14 May 2012 17:27:32 -0700 Subject: fixing the body pi Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 155 +++++---------------- .../position-and-size.reel/position-and-size.html | 30 ++-- .../position-and-size.reel/position-and-size.js | 12 ++ 3 files changed, 52 insertions(+), 145 deletions(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 20f670d9..837e74bc 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -67,15 +67,11 @@ exports.Properties = Montage.create(Component, { } }, - // Document is opened - Display the current selection handleOpenDocument: { value: function() { - this.eventManager.addEventListener( "elementChange", this, false); - // For now always assume that the stage is selected by default when opening the old template - // TODO: Remove marker for old template: NINJA-STAGE-REWORK - + // Display the default document root PI this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } }, @@ -156,7 +152,7 @@ exports.Properties = Montage.create(Component, { this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); - this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); if(this.threeD.inGlobalMode) { this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); @@ -173,8 +169,6 @@ exports.Properties = Montage.create(Component, { handleSelectionChange: { value: function(event) { if(event.detail.isDocument) { -// if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; -// this.displayStageProperties(); this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } else { if(this.application.ninja.selectedElements.length === 1) { @@ -187,98 +181,23 @@ exports.Properties = Montage.create(Component, { } }, - displayStageProperties: { - value: function() { - var stage = this.application.ninja.currentDocument.documentRoot; - //this is test code please remove - this.elementName.value = "Stage"; - this.elementId.value = stage.elementModel.id; - this.elementClass.value = ""; - - this.positionSize.disablePosition = true; - this.threeD.disableTranslation = true; - - this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); - this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); - - if(this.threeD.inGlobalMode) - { - this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle"); - this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle"); - this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); - } - - this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d"; - - if(this.customPi !== stage.elementModel.pi) { - // We need to unregister color chips from the previous selection from the Color Model - var len = this.customSections.length; - for(var n = 0, controls; n < len; n++) { - controls = this.customSections[n].content.controls; - if(controls["colorSelect"]) { - controls["colorSelect"].destroy(); - } else if(controls["stageBackground"]) { - controls["stageBackground"].destroy(); - } - } - - this.customPi = stage.elementModel.pi; - this.displayCustomProperties(stage, stage.elementModel.pi); - } - - // For now hardcode the background since it is the only custom property - // No need to loop through all the properties. - var backgroundChip = this.customSections[0].content.controls["background"]; - backgroundChip.color = ElementsMediator.getProperty(stage, "background"); - - /* - var customPI = PiData[this.customPi]; - // Get all the custom section for the custom PI - for(var i = 0, customSec; customSec = customPI[i]; i++) { - - // Now set the Fields for the custom PI - for(var j = 0, fields; fields = customSec.Section[j]; j++) { - for(var k = 0, control; control = fields[k]; k++) { - - var colorChipEl = this.customSections[i].content.controls[control.id]; - this.foo = colorChipEl; - colorChipEl.addEventListener("firstDraw", this, false); - - } - } - } - */ - } - }, - - handleFirstDraw: { - value: function() { - this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'}); - } - }, - displayElementProperties: { value: function (el) { - var customPI, - currentValue; + var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; this.elementName.value = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; this.elementClass.value = el.getAttribute("class"); - this.positionSize.disablePosition = false; - this.threeD.disableTranslation = false; + this.positionSize.disablePosition = isRoot; + this.threeD.disableTranslation = isRoot; + this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); - - if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") { - this.threeD.flatten = false; - } else { - this.threeD.flatten = true; - } +// this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); if(this.threeD.inGlobalMode) { @@ -306,6 +225,12 @@ exports.Properties = Montage.create(Component, { this.customPi = el.elementModel.pi; this.displayCustomProperties(el, el.elementModel.pi); } + + if(isRoot) { + var backgroundChip = this.customSections[0].content.controls["background"]; + backgroundChip.color = ElementsMediator.getProperty(el, "background"); + } + var previousInput = this.application.ninja.colorController.colorModel.input; customPI = PiData[this.customPi]; // Get all the custom section for the custom PI @@ -317,64 +242,47 @@ exports.Properties = Montage.create(Component, { if(control.type !== "color") { currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - if(currentValue === null) - { + if(currentValue === null) { currentValue = control.defaultValue; } this.customSections[i].content.controls[control.id] = currentValue; - } - else - { - if(control.prop === "border") - { + } else { + if(control.prop === "border") { // TODO - For now, always return the top border if multiple border sides currentValue = ElementsMediator.getColor(el, false, "top"); this.application.ninja.colorController.colorModel.input = "stroke"; - } - else if(control.prop === "background") - { + } else if(control.prop === "background") { currentValue = ElementsMediator.getColor(el, true); this.application.ninja.colorController.colorModel.input = "fill"; } - if(currentValue) - { - if(currentValue.color) - { + if(currentValue) { + if(currentValue.color) { currentValue.color.wasSetByCode = true; currentValue.color.type = "change"; } - if(currentValue.mode === "gradient") - { - this.application.ninja.colorController.colorModel["gradient"] = - {value: currentValue.color, wasSetByCode: true, type: 'change'}; - } - else - { - if (currentValue.color.a !== undefined) - { - this.application.ninja.colorController.colorModel.alpha = - {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; + if(currentValue.mode === "gradient") { + this.application.ninja.colorController.colorModel["gradient"] = {value: currentValue.color, wasSetByCode: true, type: 'change'}; + } else { + if (currentValue.color.a !== undefined) { + this.application.ninja.colorController.colorModel.alpha = {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; } - if(currentValue.color.mode) - { + + if(currentValue.color.mode) { this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; - } - else - { + } else { this.application.ninja.colorController.colorModel["rgb"] = currentValue.color; } } - } - else - { + } else { this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; this.application.ninja.colorController.colorModel.applyNoColor(); } } } } + this.application.ninja.colorController.colorModel.input = previousInput; var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1]; color.c.wasSetByCode = true; @@ -409,6 +317,8 @@ exports.Properties = Montage.create(Component, { displayGroupProperties: { value: function (els) { this.elementName.value = "Multiple Elements"; + this.elementId.value = ""; + this.elementClass.value = ""; } }, @@ -457,10 +367,7 @@ exports.Properties = Montage.create(Component, { value: function(e) { if(e.wasSetByCode) return; -// ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); - - } } 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 a7aac84e..75cb2944 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 @@ -23,6 +23,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "bindButton": {"@": "bindButton"} } }, + "PosX": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { @@ -31,11 +32,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "minValue": -10000 }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "leftPosition", - "oneway": false - } + "value": {"<<->": "@owner.leftPosition"} } }, "PosY": { @@ -46,11 +43,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "minValue": -10000 }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "topPosition", - "oneway": false - } + "value": {"<<->": "@owner.topPosition"} } }, "PosH": { @@ -59,25 +52,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "element": {"#": "PosH"} }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "heightSize", - "oneway": false - } + "value": {"<<->": "@owner.heightSize"} } }, "PosW": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { - "element": {"#": "PosW"} + "element": {"#": "PosW"}, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "widthSize", - "oneway": false - } + "value": {"<<->": "@owner.widthSize"} } + }, "bindButton": { "prototype": "montage/ui/toggle-button.reel", 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 1e47916f..8842558b 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 @@ -23,7 +23,19 @@ exports.PosSize = Montage.create(Component, { widthSize: { value: 0 }, +/* + widthSize: { + get: function() { return this._widthSize;}, + set: function(value) { + this._widthSize = parseInt(value); + this.widthUnit = value; + } + }, + widthUnit: { + value: "px" + }, +*/ savedPosition: { value: null }, -- cgit v1.2.3 From 5df0e78f2eced2fd04a531652f61c42261d97636 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 14 May 2012 17:29:57 -0700 Subject: reverting a pi width change Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 837e74bc..3ec48687 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -152,7 +152,7 @@ exports.Properties = Montage.create(Component, { this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); - this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); if(this.threeD.inGlobalMode) { this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); -- cgit v1.2.3 From 3be58f9391cc2ef7f1d27ec69c98ea600cb93a22 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 15 May 2012 16:00:49 -0700 Subject: renaming the position and size component Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.html | 10 +- .../position-and-size.reel/position-and-size.css | 40 --- .../position-and-size.reel/position-and-size.html | 124 --------- .../position-and-size.reel/position-and-size.js | 276 --------------------- .../sections/position-size.reel/position-size.css | 40 +++ .../sections/position-size.reel/position-size.html | 126 ++++++++++ .../sections/position-size.reel/position-size.js | 276 +++++++++++++++++++++ 7 files changed, 448 insertions(+), 444 deletions(-) delete mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css delete mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html delete mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js create mode 100755 js/panels/properties.reel/sections/position-size.reel/position-size.css create mode 100755 js/panels/properties.reel/sections/position-size.reel/position-size.html create mode 100755 js/panels/properties.reel/sections/position-size.reel/position-size.js (limited to 'js/panels/properties.reel') 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 @@ "prototype": "js/panels/properties.reel/section.reel", "properties": { "element": {"#": "PosSize"}, - "content" : {"@": "PosSize"}, + "content" : {"@": "positionSize"}, "name" : "Position And Size" } }, - "PosSize": { - "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]" + + "positionSize": { + "prototype": "js/panels/properties.reel/sections/position-size.reel" }, + "threeDSection": { "prototype": "js/panels/properties.reel/section.reel", "properties": { @@ -97,7 +99,7 @@ "elementName": {"@": "elementName"}, "elementClass": {"@": "elementClass"}, "elementId": {"@": "elementId"}, - "positionSize": {"@": "PosSize"}, + "positionSize": {"@": "positionSize"}, "threeD": {"@": "threeDProperties"} } } 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 deleted file mode 100755 index 7f8fdbc2..00000000 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css +++ /dev/null @@ -1,40 +0,0 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -.fieldCol .hide { - display: none; -} - -.fieldCol .disabled { - color:#999999; -} - - -#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 deleted file mode 100755 index 75cb2944..00000000 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - - - - -
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - \ No newline at end of file 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 deleted file mode 100755 index 8842558b..00000000 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js +++ /dev/null @@ -1,276 +0,0 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -exports.PosSize = Montage.create(Component, { - leftPosition: { - value: 0 - }, - - topPosition: { - value: 0 - }, - - heightSize: { - value: 0 - }, - - widthSize: { - value: 0 - }, -/* - widthSize: { - get: function() { return this._widthSize;}, - set: function(value) { - this._widthSize = parseInt(value); - this.widthUnit = value; - } - }, - - widthUnit: { - value: "px" - }, -*/ - savedPosition: { - value: null - }, - - aspectRatioWidth: { - value: null - }, - - aspectRatioHeight: { - value: null - }, - - _disablePosition: { - value: true - }, - - disablePosition: { - get: function () { - return this._disablePosition; - }, - set: function (value) { - if(value !== this._disablePosition) { - this._disablePosition = value; - this.needsDraw = true; - } - } - }, - - prepareForDraw: { - value: function() { - this.leftControl.identifier = "left"; - this.leftControl.addEventListener("change", this, false); - this.leftControl.addEventListener("changing", this, false); - - this.topControl.identifier = "top"; - this.topControl.addEventListener("change", this, false); - this.topControl.addEventListener("changing", this, false); - - this.heightControl.identifier = "height"; - this.heightControl.addEventListener("change", this, false); - this.heightControl.addEventListener("changing", this, false); - - this.widthControl.identifier = "width"; - this.widthControl.addEventListener("change", this, false); - this.widthControl.addEventListener("changing", this, false); - - this.bindButton.identifier = "ratio"; - this.bindButton.addEventListener("action", this, false); - - } - }, - - draw: { - value: function() { - if(this._disablePosition) { - this.leftPosition = 0; - this.leftControl.enabled = false; - this.topPosition = 0; - this.topControl.enabled = false; - this.leftLabel.classList.add("disabled"); - this.topLabel.classList.add("disabled"); - } else { - this.leftControl.enabled = true; - this.topControl.enabled = true; - this.leftLabel.classList.remove("disabled"); - this.topLabel.classList.remove("disabled"); - } - } - }, - - /** - * Calculate the current aspect ration when the bind button is pressed. - * If one of the values is 0, then use 1:1 as the ratio; - */ - handleRatioAction: { - value: function() { - 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; - - this.aspectRatioHeight = this.widthControl.value / this.heightControl.value; - if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1; - } else { - this.aspectRatioWidth = 1; - this.aspectRatioHeight = 1; - } - } - }, - - handleLeftChange: { - value: function(event) { - var prevPosition; - - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition); - this.savedPosition = null; - } - } - }, - - handleTopChange: { - value: function(event) { - var prevPosition; - - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition); - this.savedPosition = null; - } - } - }, - - handleHeightChange: { - value: function(event) { - var prevPosition, items; - - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - - this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - - if(this.bindButton.pressed) { - - var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); - - if(!isFinite(newWidth)) newWidth = this.heightControl.value; - - this.widthControl.value = newWidth; - this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi"); - } - - this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition); - this.savedPosition = null; - } - } - }, - - handleWidthChange: { - value: function(event) { - var prevPosition, items; - - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - - this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - - if(this.bindButton.pressed) { - - var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); - - if(!isFinite(newHeight)) newHeight = this.widthControl.value; - - this.heightControl.value = newHeight; - this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi"); - - } - - this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition); - this.savedPosition = null; - - } - - } - }, - - handleLeftChanging: { - value: function(event) { - if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.leftPosition; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Changing", "pi"); - } - - } - }, - - handleTopChanging: { - value: function(event) { - if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.topPosition; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Changing", "pi"); - } - - } - }, - - handleHeightChanging: { - value: function(event) { - var items; - if(!event.wasSetByCode) { - - if(!this.savedPosition) this.savedPosition = this.heightSize; - - this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - - if(this.bindButton.pressed) { - - var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); - - if(!isFinite(newWidth)) newWidth = this.heightControl.value; - - this.widthControl.value = newWidth; - this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi"); - } - - this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi"); - - } - } - }, - - handleWidthChanging: { - value: function(event) { - var items; - if(!event.wasSetByCode) { - - if(!this.savedPosition) this.savedPosition = this.widthSize; - - this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - - if(this.bindButton.pressed) { - var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); - - if(!isFinite(newHeight)) newHeight = this.widthControl.value; - - this.heightControl.value = newHeight; - this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi"); - } - - this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi"); - } - } - } - - -}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.css b/js/panels/properties.reel/sections/position-size.reel/position-size.css new file mode 100755 index 00000000..7f8fdbc2 --- /dev/null +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.css @@ -0,0 +1,40 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.fieldCol .hide { + display: none; +} + +.fieldCol .disabled { + color:#999999; +} + + +#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-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html new file mode 100755 index 00000000..5d1a805a --- /dev/null +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html @@ -0,0 +1,126 @@ + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.js b/js/panels/properties.reel/sections/position-size.reel/position-size.js new file mode 100755 index 00000000..10e084be --- /dev/null +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js @@ -0,0 +1,276 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.PositionSize = Montage.create(Component, { + leftPosition: { + value: 0 + }, + + topPosition: { + value: 0 + }, + + heightSize: { + value: 0 + }, + + widthSize: { + value: 0 + }, +/* + widthSize: { + get: function() { return this._widthSize;}, + set: function(value) { + this._widthSize = parseInt(value); + this.widthUnit = value; + } + }, + + widthUnit: { + value: "px" + }, +*/ + savedPosition: { + value: null + }, + + aspectRatioWidth: { + value: null + }, + + aspectRatioHeight: { + value: null + }, + + _disablePosition: { + value: true + }, + + disablePosition: { + get: function () { + return this._disablePosition; + }, + set: function (value) { + if(value !== this._disablePosition) { + this._disablePosition = value; + this.needsDraw = true; + } + } + }, + + prepareForDraw: { + value: function() { + this.leftControl.identifier = "left"; + this.leftControl.addEventListener("change", this, false); + this.leftControl.addEventListener("changing", this, false); + + this.topControl.identifier = "top"; + this.topControl.addEventListener("change", this, false); + this.topControl.addEventListener("changing", this, false); + + this.heightControl.identifier = "height"; + this.heightControl.addEventListener("change", this, false); + this.heightControl.addEventListener("changing", this, false); + + this.widthControl.identifier = "width"; + this.widthControl.addEventListener("change", this, false); + this.widthControl.addEventListener("changing", this, false); + + this.bindButton.identifier = "ratio"; + this.bindButton.addEventListener("action", this, false); + + } + }, + + draw: { + value: function() { + if(this._disablePosition) { + this.leftPosition = 0; + this.leftControl.enabled = false; + this.topPosition = 0; + this.topControl.enabled = false; + this.leftLabel.classList.add("disabled"); + this.topLabel.classList.add("disabled"); + } else { + this.leftControl.enabled = true; + this.topControl.enabled = true; + this.leftLabel.classList.remove("disabled"); + this.topLabel.classList.remove("disabled"); + } + } + }, + + /** + * Calculate the current aspect ration when the bind button is pressed. + * If one of the values is 0, then use 1:1 as the ratio; + */ + handleRatioAction: { + value: function() { + 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; + + this.aspectRatioHeight = this.widthControl.value / this.heightControl.value; + if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1; + } else { + this.aspectRatioWidth = 1; + this.aspectRatioHeight = 1; + } + } + }, + + handleLeftChange: { + value: function(event) { + var prevPosition; + + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition); + this.savedPosition = null; + } + } + }, + + handleTopChange: { + value: function(event) { + var prevPosition; + + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition); + this.savedPosition = null; + } + } + }, + + handleHeightChange: { + value: function(event) { + var prevPosition, items; + + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.pressed) { + + var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); + + if(!isFinite(newWidth)) newWidth = this.heightControl.value; + + this.widthControl.value = newWidth; + this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi"); + } + + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition); + this.savedPosition = null; + } + } + }, + + handleWidthChange: { + value: function(event) { + var prevPosition, items; + + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.pressed) { + + var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); + + if(!isFinite(newHeight)) newHeight = this.widthControl.value; + + this.heightControl.value = newHeight; + this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi"); + + } + + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition); + this.savedPosition = null; + + } + + } + }, + + handleLeftChanging: { + value: function(event) { + if(!event.wasSetByCode) { + if(!this.savedPosition) this.savedPosition = this.leftPosition; + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Changing", "pi"); + } + + } + }, + + handleTopChanging: { + value: function(event) { + if(!event.wasSetByCode) { + if(!this.savedPosition) this.savedPosition = this.topPosition; + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Changing", "pi"); + } + + } + }, + + handleHeightChanging: { + value: function(event) { + var items; + if(!event.wasSetByCode) { + + if(!this.savedPosition) this.savedPosition = this.heightSize; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.pressed) { + + var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); + + if(!isFinite(newWidth)) newWidth = this.heightControl.value; + + this.widthControl.value = newWidth; + this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi"); + } + + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi"); + + } + } + }, + + handleWidthChanging: { + value: function(event) { + var items; + if(!event.wasSetByCode) { + + if(!this.savedPosition) this.savedPosition = this.widthSize; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.pressed) { + var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); + + if(!isFinite(newHeight)) newHeight = this.widthControl.value; + + this.heightControl.value = newHeight; + this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi"); + } + + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi"); + } + } + } + + +}); \ No newline at end of file -- cgit v1.2.3 From 6dfe2e62b1d7a71daf097aac3a31213d564e6122 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 00:54:30 -0700 Subject: Removing the old checkbox components. Created a new LabelCheckbox Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.css | 8 ++++---- js/panels/properties.reel/sections/custom.reel/custom.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index 0928da3a..756ecc5c 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -256,17 +256,17 @@ padding-right:6px; content: "•"; } -.propertiesPanel input.nj-skinned label { +.propertiesPanel .checkbox-label { position: absolute; - top: 0; - left: 15px; + top: 4px; + padding-left: 5px; + /*left: 15px;*/ font-size: 10px; width:55px; text-align: left; font-weight: normal; color:#FFF; } - .propertiesPanel input[type='radio'].nj-skinned { text-indent: 0px; line-height: 5px; diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 876fe110..3ab32888 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -19,7 +19,7 @@ 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; -var Checkbox = require("js/components/checkbox.reel").Checkbox; +var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox; var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; var Button = require("montage/ui/button.reel").Button; @@ -77,7 +77,7 @@ exports.CustomSection = Montage.create(Component, { this.rows.push(tmpRow); } else if(this._fields[i].length === 3) { - + } } @@ -103,7 +103,7 @@ exports.CustomSection = Montage.create(Component, { handleChange: { 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}); } @@ -349,7 +349,7 @@ exports.CustomSection = Montage.create(Component, { value: function(aField) { // Generate Textfield - var obj = Checkbox.create(); + var obj = LabelCheckbox.create(); // Set Values for TextField if (aField.id) obj.id = aField.id; -- cgit v1.2.3 From 081d72d145f3b570f0f866802e015527848f690e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 11:40:51 -0700 Subject: adding a null check. Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 3ec48687..fa62c850 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -228,7 +228,7 @@ exports.Properties = Montage.create(Component, { if(isRoot) { var backgroundChip = this.customSections[0].content.controls["background"]; - backgroundChip.color = ElementsMediator.getProperty(el, "background"); + if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background"); } var previousInput = this.application.ninja.colorController.colorModel.input; -- cgit v1.2.3 From 65cea92d839bcd25ea9094a0798190a4dc4bea35 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 17 May 2012 00:16:43 -0700 Subject: Adding a disabled property to the label-checkbox. Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/sections/custom.reel/custom.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 3ab32888..49b4414e 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -262,10 +262,10 @@ exports.CustomSection = Montage.create(Component, { 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 - }); + boundObject: this.controls, + boundObjectPropertyPath: aField.enabled.boundProperty, + oneway: false + }); } else { obj.enabled = aField.enabled; } -- cgit v1.2.3 From 7a94696e19b14e15261df516e2ba75e693b1313d Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 18 May 2012 00:21:56 -0700 Subject: enabling basic document switching Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'js/panels/properties.reel') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index fa62c850..4d048472 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -55,7 +55,6 @@ exports.Properties = Montage.create(Component, { } this.eventManager.addEventListener("openDocument", this, false); - this.eventManager.addEventListener("switchDocument", this, false); this.elementId.element.addEventListener("blur", this, false); this.elementId.element.addEventListener("focus", this, false); @@ -76,21 +75,6 @@ exports.Properties = Montage.create(Component, { } }, - handleSwitchDocument: { - value: function(){ - // For now always assume that the stage is selected by default - if(this.application.ninja.selectedElements.length === 0) { - this.displayStageProperties(); - } else { - if(this.application.ninja.selectedElements.length === 1) { - this.displayElementProperties(this.application.ninja.selectedElements[0]); - } else { - this.displayGroupProperties(this.application.ninja.selectedElements); - } - } - } - }, - /** * Blur and Key up to handle change in the Element ID field. */ -- 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/panels/properties.reel') 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: