diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 3e016c0c..94d1f7e9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -403,7 +403,7 @@ var Layer = exports.Layer = Montage.create(Component, {
this.mainCollapser.myContent = this.myContent;
this.mainCollapser.contentHeight = 60;
this.myContent.style.height = "0px";
- this.mainCollapser.element = this.element;
+ this.mainCollapser.element = this.myContent;
//this.mainCollapser.isCollapsedAtStart = true;
this.mainCollapser.isCollapsed = this.isMainCollapsed;
this.mainCollapser.isAnimated = true;
@@ -422,8 +422,8 @@ var Layer = exports.Layer = Montage.create(Component, {
this.positionCollapser.clicker = this.clickerPosition;
this.positionCollapser.myContent = this.contentPosition;
- this.positionCollapser.element = this.element;
- this.positionCollapser.contentHeight = 60;
+ this.positionCollapser.element = this.contentPosition;
+ this.positionCollapser.contentHeight = 40;
// this.positionCollapser.isCollapsedAtStart = true;
this.positionCollapser.isCollapsed = this.isPositionCollapsed;
this.positionCollapser.isAnimated = true;
@@ -441,7 +441,7 @@ var Layer = exports.Layer = Montage.create(Component, {
this.transformCollapser.clicker = this.clickerTransform;
this.transformCollapser.myContent = this.contentTransform;
- this.transformCollapser.element = this.element;
+ this.transformCollapser.element = this.contentTransform;
this.transformCollapser.contentHeight = 100;
// this.transformCollapser.isCollapsedAtStart = true;
this.transformCollapser.isCollapsed = this.isTransformCollapsed;
@@ -460,7 +460,7 @@ var Layer = exports.Layer = Montage.create(Component, {
this.styleCollapser.clicker = this.clickerStyle;
this.styleCollapser.myContent = this.contentStyle;
- this.styleCollapser.element = this.element;
+ this.styleCollapser.element = this.contentStyle;
this.styleCollapser.isCollapsed = this.isStyleCollapsed;
this.styleCollapser.contentHeight = 0;
this.styleCollapser.isAnimated = true;
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 18d0a5e3..8e36c2db 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -4,11 +4,10 @@
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.
*/
-
/* Layer.scss
* Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
*/
-/* line 16, ../scss/Layer.scss */
+/* line 22, ../scss/Layer.scss */
.layerLabel {
width: 100%;
color: white;
@@ -20,13 +19,13 @@
-webkit-box-orient: horizontal;
}
-/* line 26, ../scss/Layer.scss */
+/* line 32, ../scss/Layer.scss */
.layerLabel.layerSelected {
background-color: #b2b2b2;
color: #242424;
}
-/* line 30, ../scss/Layer.scss */
+/* line 36, ../scss/Layer.scss */
.layerLabel {
width: 100%;
height: 18px;
@@ -35,7 +34,7 @@
-webkit-box-flex: 1;
}
-/* line 37, ../scss/Layer.scss */
+/* line 43, ../scss/Layer.scss */
.layerDisclosure {
background-image: url("../images/panelDisclosureIcon.png");
background-repeat: no-repeat;
@@ -49,7 +48,7 @@
-webkit-box-flex: 0;
}
-/* line 50, ../scss/Layer.scss */
+/* line 56, ../scss/Layer.scss */
.layerHide {
background-image: url("../images/eye.png");
background-repeat: no-repeat;
@@ -60,7 +59,7 @@
-webkit-box-flex: 0;
}
-/* line 59, ../scss/Layer.scss */
+/* line 65, ../scss/Layer.scss */
.layerLock {
background-image: url("../images/lock_open.png");
background-repeat: no-repeat;
@@ -72,7 +71,7 @@
}
/******************************************/
-/* line 71, ../scss/Layer.scss */
+/* line 77, ../scss/Layer.scss */
.container-layer {
background-color: #474747;
color: white;
@@ -80,18 +79,18 @@
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
-/* line 77, ../scss/Layer.scss */
+/* line 83, ../scss/Layer.scss */
.selected .container-layer {
background-color: #474747;
}
-/* line 80, ../scss/Layer.scss */
+/* line 86, ../scss/Layer.scss */
.selected .container-layer .label-layer {
background-color: #b2b2b2;
color: #242424;
}
-/* line 85, ../scss/Layer.scss */
+/* line 91, ../scss/Layer.scss */
.userlayers .collapsible-label {
display: block;
width: 100px;
@@ -105,25 +104,25 @@
text-overflow: ellipsis;
}
-/* line 97, ../scss/Layer.scss */
+/* line 103, ../scss/Layer.scss */
.layerSelected .label-layer {
background-color: #b2b2b2;
color: #242424;
}
-/* line 101, ../scss/Layer.scss */
+/* line 107, ../scss/Layer.scss */
.content-layer {
background-color: #474747;
color: white;
}
-/* line 105, ../scss/Layer.scss */
+/* line 111, ../scss/Layer.scss */
.content-layer .collapsible-label {
background-position: 14px 5px;
border-width: 0px;
}
-/* line 113, ../scss/Layer.scss */
+/* line 119, ../scss/Layer.scss */
.label-layer,
.label-position,
.label-transform,
@@ -134,13 +133,13 @@
cursor: pointer;
}
-/* line 120, ../scss/Layer.scss */
+/* line 126, ../scss/Layer.scss */
.content-layer .collapsible-label,
.content-layer .collapsible-content {
font-size: 11px;
}
-/* line 124, ../scss/Layer.scss */
+/* line 130, ../scss/Layer.scss */
.collapsible-clicker {
position: absolute;
width: 10px;
@@ -153,23 +152,23 @@
background-repeat: no-repeat;
}
-/* line 135, ../scss/Layer.scss */
+/* line 141, ../scss/Layer.scss */
.collapsible-clicker.collapsible-collapsed {
background-image: url(../images/icon-collapsed.png);
}
-/* line 138, ../scss/Layer.scss */
+/* line 144, ../scss/Layer.scss */
.collapsible-content .collapsible-clicker {
left: 12px;
}
-/* line 141, ../scss/Layer.scss */
-.content-layer.collapsible-collapsed {
+/* line 147, ../scss/Layer.scss */
+.container-layer .collapsible-content.collapsible-collapsed {
height: 0px;
overflow: hidden;
}
-/* line 147, ../scss/Layer.scss */
+/* line 153, ../scss/Layer.scss */
.label-layer .cssbutton,
.label-style .cssbutton {
width: 14px;
@@ -179,21 +178,21 @@
background-repeat: no-repeat;
}
-/* line 154, ../scss/Layer.scss */
+/* line 160, ../scss/Layer.scss */
.label-layer .button-lock {
background-image: url(../images/icon-lock.png);
top: 3px;
right: 27px;
}
-/* line 159, ../scss/Layer.scss */
+/* line 165, ../scss/Layer.scss */
.label-layer .button-visible {
background-image: url(../images/icon-eye.png);
top: 3px;
right: 7px;
}
-/* line 164, ../scss/Layer.scss */
+/* line 170, ../scss/Layer.scss */
.label-style .button-add {
background-image: url(../images/icon-plus.png);
width: 15px;
@@ -202,7 +201,7 @@
right: 11px;
}
-/* line 171, ../scss/Layer.scss */
+/* line 177, ../scss/Layer.scss */
.label-style .button-delete {
background-image: url(../images/icon-minus.png);
width: 15px;
@@ -211,17 +210,17 @@
right: 31px;
}
-/* line 178, ../scss/Layer.scss */
+/* line 184, ../scss/Layer.scss */
.collapsible-content .layout-table {
width: 99.9%;
}
-/* line 181, ../scss/Layer.scss */
+/* line 187, ../scss/Layer.scss */
.content-layer .collapsible-content {
padding-left: 30px;
}
-/* line 184, ../scss/Layer.scss */
+/* line 190, ../scss/Layer.scss */
.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
width: 40%;
height: 20px;
@@ -230,24 +229,24 @@
text-align: left;
}
-/* line 191, ../scss/Layer.scss */
+/* line 197, ../scss/Layer.scss */
.collapsible-content .layout-table:first-child {
border-top: 1px solid #505050;
}
-/* line 195, ../scss/Layer.scss */
+/* line 201, ../scss/Layer.scss */
.collapsible-content .hottextunit {
width: auto;
}
-/* line 198, ../scss/Layer.scss */
+/* line 204, ../scss/Layer.scss */
.collapsible-transition {
-webkit-transition-property: height;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease-in;
}
-/* line 206, ../scss/Layer.scss */
+/* line 212, ../scss/Layer.scss */
.editable2 {
height: 20px;
background-color: #242424 !important;
@@ -259,24 +258,24 @@
text-overflow: clip;
}
-/* line 217, ../scss/Layer.scss */
+/* line 223, ../scss/Layer.scss */
.label-style .disabled {
cursor: default;
}
/* styles elements */
-/* line 222, ../scss/Layer.scss */
+/* line 228, ../scss/Layer.scss */
.content-style .item-template {
display: none;
}
-/* line 225, ../scss/Layer.scss */
+/* line 231, ../scss/Layer.scss */
.content-style .layout-row.selected .layout-cell {
background-color: #b2b2b2;
color: #242424;
}
-/* line 229, ../scss/Layer.scss */
+/* line 235, ../scss/Layer.scss */
.style-row {
height: 20px;
}
diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss
index 1e574cc0..12b6e599 100644
--- a/js/panels/Timeline/Layer.reel/scss/Layer.scss
+++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss
@@ -144,7 +144,7 @@
.collapsible-content .collapsible-clicker {
left: 12px;
}
-.content-layer.collapsible-collapsed {
+.container-layer .collapsible-content.collapsible-collapsed {
height: 0px;
overflow: hidden;
}
--
cgit v1.2.3
From 42d78d11764dca5df6c7d01f3221f398bee17152 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 1 Mar 2012 15:00:48 -0800
Subject: Squashed commit of the workspace-bugs
- Panels fixes.
Signed-off-by: Valerio Virgillito
---
js/panels/Timeline/Layer.reel/Layer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/panels/Timeline/Layer.reel')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index d50360e6..e3897bbf 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -491,7 +491,7 @@ var Layer = exports.Layer = Montage.create(Component, {
},
draw: {
value: function() {
-
+
// Coordinate the collapsers
if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
this.mainCollapser.bypassAnimation = true;
--
cgit v1.2.3
From 205d869d94005cb214fd838879d4f5e81d763311 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 1 Mar 2012 18:01:08 -0800
Subject: Timeline: Merge arrlayers and arrtracks into one object. Redefine
collapser to use property binding instead of events.
---
js/panels/Timeline/Layer.reel/Layer.js | 138 +++++++++++++++++++++++++++++----
1 file changed, 124 insertions(+), 14 deletions(-)
(limited to 'js/panels/Timeline/Layer.reel')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 94d1f7e9..f9bba499 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, {
// Are the various collapsers collapsed or not
_isMainCollapsed : {
- value: ""
+ serializable: true,
+ value: true
},
isMainCollapsed : {
+ serializable: true,
get: function() {
return this._isMainCollapsed;
},
set: function(newVal) {
+ this.log('layer.js: isMainCollapsed: ' + newVal);
if (newVal !== this._isMainCollapsed) {
this._isMainCollapsed = newVal;
- this.needsDraw = true;
}
}
},
_isTransformCollapsed : {
+ serializable: true,
value: true
},
isTransformCollapsed : {
+ serializable: true,
get: function() {
return this._isTransformCollapsed;
},
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, {
},
_isPositionCollapsed : {
+ serializable: true,
value: true
},
isPositionCollapsed : {
+ serializable: true,
get: function() {
return this._isPositionCollapsed;
},
@@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, {
},
_isStyleCollapsed : {
+ serializable: true,
value: true
},
isStyleCollapsed : {
+ serializable: true,
get: function() {
return this._isStyleCollapsed;
},
@@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, {
}
}
},
+ _animateCollapser : {
+ serializable: true,
+ value: false
+ },
+ animateCollapser : {
+ serializable: true,
+ get: function() {
+ return this._animateCollapser;
+ },
+ set: function(newVal) {
+ this._animateCollapser = newVal;
+ }
+ },
/* END: Models */
@@ -404,10 +425,19 @@ var Layer = exports.Layer = Montage.create(Component, {
this.mainCollapser.contentHeight = 60;
this.myContent.style.height = "0px";
this.mainCollapser.element = this.myContent;
- //this.mainCollapser.isCollapsedAtStart = true;
this.mainCollapser.isCollapsed = this.isMainCollapsed;
this.mainCollapser.isAnimated = true;
this.element.setAttribute("data-layerid", this.layerID);
+ // Bind the collapser's isToggling property to the isMainCollapsed property,
+ // so a change in one will affect the other.
+ Object.defineBinding(this.mainCollapser, "isToggling", {
+ boundObject: this,
+ boundObjectPropertyPath: "isMainCollapsed",
+ oneway: false
+ });
+ this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
+
+ /*
this.mainCollapser.labelClickEvent = function(boolBypass) {
var newEvent = document.createEvent("CustomEvent");
newEvent.initCustomEvent("layerEvent", false, true);
@@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, {
defaultEventManager.dispatchEvent(newEvent);
that.isMainCollapsed = that.mainCollapser.isCollapsed;
}
+ */
//this.mainCollapser.needsDraw = true;
this.positionCollapser.clicker = this.clickerPosition;
this.positionCollapser.myContent = this.contentPosition;
this.positionCollapser.element = this.contentPosition;
this.positionCollapser.contentHeight = 40;
- // this.positionCollapser.isCollapsedAtStart = true;
this.positionCollapser.isCollapsed = this.isPositionCollapsed;
- this.positionCollapser.isAnimated = true;
+ this.positionCollapser.isAnimated = false;
+ // Bind the collapser's isToggling property to the isPositionCollapsed property,
+ // so a change in one will affect the other.
+ Object.defineBinding(this.positionCollapser, "isToggling", {
+ boundObject: this,
+ boundObjectPropertyPath: "isPositionCollapsed",
+ oneway: false
+ });
+ this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
+
+ /*
this.positionCollapser.labelClickEvent = function(boolBypass) {
var newEvent = document.createEvent("CustomEvent");
newEvent.initCustomEvent("layerEvent", false, true);
@@ -437,15 +477,26 @@ var Layer = exports.Layer = Montage.create(Component, {
defaultEventManager.dispatchEvent(newEvent);
that.isPositionCollapsed = that.positionCollapser.isCollapsed;
}
+ */
//this.positionCollapser.needsDraw = true;
this.transformCollapser.clicker = this.clickerTransform;
this.transformCollapser.myContent = this.contentTransform;
this.transformCollapser.element = this.contentTransform;
this.transformCollapser.contentHeight = 100;
- // this.transformCollapser.isCollapsedAtStart = true;
this.transformCollapser.isCollapsed = this.isTransformCollapsed;
- this.transformCollapser.isAnimated = true;
+ this.transformCollapser.isAnimated = false;
+ // Bind the collapser's isToggling property to the isTransformCollapsed property,
+ // so a change in one will affect the other.
+ Object.defineBinding(this.transformCollapser, "isToggling", {
+ boundObject: this,
+ boundObjectPropertyPath: "isTransformCollapsed",
+ oneway: false
+ });
+ this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
+
+
+ /*
this.transformCollapser.labelClickEvent = function(boolBypass) {
var newEvent = document.createEvent("CustomEvent");
newEvent.initCustomEvent("layerEvent", false, true);
@@ -456,6 +507,7 @@ var Layer = exports.Layer = Montage.create(Component, {
defaultEventManager.dispatchEvent(newEvent);
that.isTransformCollapsed = that.transformCollapser.isCollapsed;
}
+ */
//this.transformCollapser.needsDraw = true;
this.styleCollapser.clicker = this.clickerStyle;
@@ -463,7 +515,18 @@ var Layer = exports.Layer = Montage.create(Component, {
this.styleCollapser.element = this.contentStyle;
this.styleCollapser.isCollapsed = this.isStyleCollapsed;
this.styleCollapser.contentHeight = 0;
- this.styleCollapser.isAnimated = true;
+ this.styleCollapser.isAnimated = false;
+ // Bind the collapser's isToggling property to the isStyleCollapsed property,
+ // so a change in one will affect the other.
+ Object.defineBinding(this.styleCollapser, "isToggling", {
+ boundObject: this,
+ boundObjectPropertyPath: "isStyleCollapsed",
+ oneway: false
+ });
+ this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
+
+
+ /*
this.styleCollapser.labelClickEvent = function(boolBypass) {
var newEvent = document.createEvent("CustomEvent");
newEvent.initCustomEvent("layerEvent", false, true);
@@ -474,6 +537,7 @@ var Layer = exports.Layer = Montage.create(Component, {
defaultEventManager.dispatchEvent(newEvent);
that.isStyleCollapsed = that.styleCollapser.isCollapsed;
}
+ */
//this.styleCollapser.needsDraw = true;
// Add event listeners to add and delete style buttons
@@ -493,20 +557,22 @@ var Layer = exports.Layer = Montage.create(Component, {
value: function() {
// Coordinate the collapsers
+ this.log('layer.js draw')
if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
- this.mainCollapser.bypassAnimation = true;
+ this.log('layer.js draw: this.animateCollapser ' + this.animateCollapser)
+ this.mainCollapser.bypassAnimation = this.animateCollapser;
this.mainCollapser.toggle();
}
if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) {
- this.positionCollapser.bypassAnimation = true;
+ this.positionCollapser.bypassAnimation = this.animateCollapser;
this.positionCollapser.toggle();
}
if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) {
- this.transformCollapser.bypassAnimation = true;
+ this.transformCollapser.bypassAnimation = this.animateCollapser;
this.transformCollapser.toggle();
}
if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) {
- this.styleCollapser.bypassAnimation = true;
+ this.styleCollapser.bypassAnimation = this.animateCollapser;
this.styleCollapser.toggle();
}
if (this.isSelected) {
@@ -597,7 +663,7 @@ var Layer = exports.Layer = Montage.create(Component, {
// Set up the event info and dispatch the event
newEvent.styleSelection = mySelection;
- defaultEventManager.dispatchEvent(newEvent);
+ //defaultEventManager.dispatchEvent(newEvent);
}
},
@@ -617,7 +683,7 @@ var Layer = exports.Layer = Montage.create(Component, {
newEvent.layerID = this.layerID;
newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID;
newEvent.styleSelection = selectedIndex;
- defaultEventManager.dispatchEvent(newEvent);
+ //defaultEventManager.dispatchEvent(newEvent);
// Delete the style from the view
this.arrLayerStyles.splice(selectedIndex, 1);
@@ -724,6 +790,50 @@ var Layer = exports.Layer = Montage.create(Component, {
}
}
},
+ handleMainCollapserClick : {
+ value: function(event) {
+ this.mainCollapser.bypassAnimation = false;
+ this.animateCollapser = true;
+ if (this.isMainCollapsed) {
+ this.isMainCollapsed = false;
+ } else {
+ this.isMainCollapsed = true;
+ }
+ }
+ },
+ handlePositionCollapserClick : {
+ value: function(event) {
+ this.positionCollapser.bypassAnimation = false;
+ //this.animateCollapser = true;
+ if (this.isPositionCollapsed) {
+ this.isPositionCollapsed = false;
+ } else {
+ this.isPositionCollapsed = true;
+ }
+ }
+ },
+ handleTransformCollapserClick : {
+ value: function(event) {
+ this.transformCollapser.bypassAnimation = false;
+ //this.animateCollapser = true;
+ if (this.isTransformCollapsed) {
+ this.isTransformCollapsed = false;
+ } else {
+ this.isTransformCollapsed = true;
+ }
+ }
+ },
+ handleStyleCollapserClick : {
+ value: function(event) {
+ this.styleCollapser.bypassAnimation = false;
+ //this.animateCollapser = true;
+ if (this.isStyleCollapsed) {
+ this.isStyleCollapsed = false;
+ } else {
+ this.isStyleCollapsed = true;
+ }
+ }
+ },
/* End: Event handlers */
/* Begin: Logging routines */
--
cgit v1.2.3