From 4a4b4e69ce101b22a85d16ece2dd8034c242654c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 12:01:44 -0800 Subject: Timeline: efficiency improvements to collapser. Document switching. --- js/panels/Timeline/Collapser.js | 5 ++ js/panels/Timeline/Layer.reel/Layer.html | 12 ++-- js/panels/Timeline/Layer.reel/Layer.js | 10 +-- js/panels/Timeline/Layer.reel/css/Layer.css | 73 +++++++++++----------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 2 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 19 +++--- 6 files changed, 62 insertions(+), 59 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 5de884a9..ad490c2e 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -184,6 +184,10 @@ var Montage = require("montage/core/core").Montage, // Get the original value of the overflow property: this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); + /* + * Removed because of expense. This disables the feature of having the + * component dynamically expand/collapse the content on init based on properties; + * Now default state of component must be set in CSS. // If the content area is supposed to start out collapsed: if (this.isCollapsed) { this.myContent.style.height = "0px"; @@ -198,6 +202,7 @@ var Montage = require("montage/core/core").Montage, this.myContent.classList.remove(this.collapsedClass); this.clicker.classList.remove(this.collapsedClass); } + */ } }, draw: { diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index cba963b6..14315f8d 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -243,9 +243,9 @@
Position - +
-
+
X
@@ -259,9 +259,9 @@
Transform - +
-
+
Scale X
@@ -288,11 +288,11 @@
Style - +
-
+
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; } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 90b685dc..4a3d7a44 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -589,55 +589,54 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.myContent = this.myContent; this._mainCollapser.contentHeight = 60; this._mainCollapser.isLabelClickable = false; - this._mainCollapser.element = this.element; + this._mainCollapser.element = this.myContent; this._mainCollapser.isCollapsed = this.isMainCollapsed; this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; - this._mainCollapser.needsDraw = true; + //this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); this._positionCollapser.clicker = this.labelPosition; this._positionCollapser.myContent = this.contentPosition; - this._positionCollapser.contentHeight = 60; + this._positionCollapser.contentHeight = 40; this._positionCollapser.isLabelClickable = true; - this._positionCollapser.element = this.element; + this._positionCollapser.element = this.contentPosition; this._positionCollapser.isCollapsed = this.isPositionCollapsed; this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; }; - this._positionCollapser.needsDraw = true; + //this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); this._transformCollapser.clicker = this.labelTransform; this._transformCollapser.myContent = this.contentTransform; this._transformCollapser.contentHeight = 100; this._transformCollapser.isLabelClickable = false; - this._transformCollapser.element = this.element; + this._transformCollapser.element = this.contentTransform; this._transformCollapser.isCollapsed = this.isTransformCollapsed; this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; }; - this._transformCollapser.needsDraw = true; + //this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; this._styleCollapser.contentHeight = 0; this._styleCollapser.isLabelClickable = false; - this._styleCollapser.element = this.element; + this._styleCollapser.element = this.contentStyles; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; }; - this._styleCollapser.needsDraw = true; + //this._styleCollapser.needsDraw = true; // Register event handler for layer events. - var that = this; defaultEventManager.addEventListener("layerEvent", this, false); } -- cgit v1.2.3