aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-03-01 12:01:44 -0800
committerJon Reid2012-03-01 12:01:44 -0800
commit4a4b4e69ce101b22a85d16ece2dd8034c242654c (patch)
treedb17d8f1c629753a23ab9e9d45a16ccd48896363 /js
parenta725643eba157b3c37d9acd13c6fdd48379bb0df (diff)
downloadninja-4a4b4e69ce101b22a85d16ece2dd8034c242654c.tar.gz
Timeline: efficiency improvements to collapser. Document switching.
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Collapser.js5
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html12
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js10
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css73
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js19
6 files changed, 62 insertions, 59 deletions
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,
184 // Get the original value of the overflow property: 184 // Get the original value of the overflow property:
185 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); 185 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
186 186
187 /*
188 * Removed because of expense. This disables the feature of having the
189 * component dynamically expand/collapse the content on init based on properties;
190 * Now default state of component must be set in CSS.
187 // If the content area is supposed to start out collapsed: 191 // If the content area is supposed to start out collapsed:
188 if (this.isCollapsed) { 192 if (this.isCollapsed) {
189 this.myContent.style.height = "0px"; 193 this.myContent.style.height = "0px";
@@ -198,6 +202,7 @@ var Montage = require("montage/core/core").Montage,
198 this.myContent.classList.remove(this.collapsedClass); 202 this.myContent.classList.remove(this.collapsedClass);
199 this.clicker.classList.remove(this.collapsedClass); 203 this.clicker.classList.remove(this.collapsedClass);
200 } 204 }
205 */
201 } 206 }
202 }, 207 },
203 draw: { 208 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 @@
243 <div class="collapsible-content content-layer collapsible-collapsed"> 243 <div class="collapsible-content content-layer collapsible-collapsed">
244 <div class="label-position"> 244 <div class="label-position">
245 <span class="collapsible-label">Position</span> 245 <span class="collapsible-label">Position</span>
246 <span class="collapsible-clicker clicker-position"></span> 246 <span class="collapsible-clicker clicker-position collapsible-collapsed"></span>
247 </div> 247 </div>
248 <div class="content-position collapsible-content"> 248 <div class="content-position collapsible-content collapsible-collapsed">
249 <div class="layout-table"> 249 <div class="layout-table">
250 <div class="layout-row"> 250 <div class="layout-row">
251 <div class="layout-cell">X</div> 251 <div class="layout-cell">X</div>
@@ -259,9 +259,9 @@
259 </div> 259 </div>
260 <div class="label-transform"> 260 <div class="label-transform">
261 <span class="collapsible-label">Transform</span> 261 <span class="collapsible-label">Transform</span>
262 <span class="clicker-transform collapsible-clicker"></span> 262 <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span>
263 </div> 263 </div>
264 <div class="content-transform collapsible-content"> 264 <div class="content-transform collapsible-content collapsible-collapsed">
265 <div class="layout-table"> 265 <div class="layout-table">
266 <div class="layout-row"> 266 <div class="layout-row">
267 <div class="layout-cell">Scale X</div> 267 <div class="layout-cell">Scale X</div>
@@ -288,11 +288,11 @@
288 </div> 288 </div>
289 <div class="label-style"> 289 <div class="label-style">
290 <span class="collapsible-label">Style</span> 290 <span class="collapsible-label">Style</span>
291 <span class="clicker-style collapsible-clicker"></span> 291 <span class="clicker-style collapsible-clicker collapsible-collapsed"></span>
292 <div class="cssbutton button-delete disabled"></div> 292 <div class="cssbutton button-delete disabled"></div>
293 <div class="cssbutton button-add"></div> 293 <div class="cssbutton button-add"></div>
294 </div> 294 </div>
295 <div class="content-style collapsible-content"> 295 <div class="content-style collapsible-content collapsible-collapsed">
296 <div class="" id="style-container"> 296 <div class="" id="style-container">
297 <div class="style-row" id="layer-style"> 297 <div class="style-row" id="layer-style">
298 </div> 298 </div>
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, {
403 this.mainCollapser.myContent = this.myContent; 403 this.mainCollapser.myContent = this.myContent;
404 this.mainCollapser.contentHeight = 60; 404 this.mainCollapser.contentHeight = 60;
405 this.myContent.style.height = "0px"; 405 this.myContent.style.height = "0px";
406 this.mainCollapser.element = this.element; 406 this.mainCollapser.element = this.myContent;
407 //this.mainCollapser.isCollapsedAtStart = true; 407 //this.mainCollapser.isCollapsedAtStart = true;
408 this.mainCollapser.isCollapsed = this.isMainCollapsed; 408 this.mainCollapser.isCollapsed = this.isMainCollapsed;
409 this.mainCollapser.isAnimated = true; 409 this.mainCollapser.isAnimated = true;
@@ -422,8 +422,8 @@ var Layer = exports.Layer = Montage.create(Component, {
422 422
423 this.positionCollapser.clicker = this.clickerPosition; 423 this.positionCollapser.clicker = this.clickerPosition;
424 this.positionCollapser.myContent = this.contentPosition; 424 this.positionCollapser.myContent = this.contentPosition;
425 this.positionCollapser.element = this.element; 425 this.positionCollapser.element = this.contentPosition;
426 this.positionCollapser.contentHeight = 60; 426 this.positionCollapser.contentHeight = 40;
427 // this.positionCollapser.isCollapsedAtStart = true; 427 // this.positionCollapser.isCollapsedAtStart = true;
428 this.positionCollapser.isCollapsed = this.isPositionCollapsed; 428 this.positionCollapser.isCollapsed = this.isPositionCollapsed;
429 this.positionCollapser.isAnimated = true; 429 this.positionCollapser.isAnimated = true;
@@ -441,7 +441,7 @@ var Layer = exports.Layer = Montage.create(Component, {
441 441
442 this.transformCollapser.clicker = this.clickerTransform; 442 this.transformCollapser.clicker = this.clickerTransform;
443 this.transformCollapser.myContent = this.contentTransform; 443 this.transformCollapser.myContent = this.contentTransform;
444 this.transformCollapser.element = this.element; 444 this.transformCollapser.element = this.contentTransform;
445 this.transformCollapser.contentHeight = 100; 445 this.transformCollapser.contentHeight = 100;
446 // this.transformCollapser.isCollapsedAtStart = true; 446 // this.transformCollapser.isCollapsedAtStart = true;
447 this.transformCollapser.isCollapsed = this.isTransformCollapsed; 447 this.transformCollapser.isCollapsed = this.isTransformCollapsed;
@@ -460,7 +460,7 @@ var Layer = exports.Layer = Montage.create(Component, {
460 460
461 this.styleCollapser.clicker = this.clickerStyle; 461 this.styleCollapser.clicker = this.clickerStyle;
462 this.styleCollapser.myContent = this.contentStyle; 462 this.styleCollapser.myContent = this.contentStyle;
463 this.styleCollapser.element = this.element; 463 this.styleCollapser.element = this.contentStyle;
464 this.styleCollapser.isCollapsed = this.isStyleCollapsed; 464 this.styleCollapser.isCollapsed = this.isStyleCollapsed;
465 this.styleCollapser.contentHeight = 0; 465 this.styleCollapser.contentHeight = 0;
466 this.styleCollapser.isAnimated = true; 466 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 @@
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> */ 6 </copyright> */
7
8/* Layer.scss 7/* Layer.scss
9 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. 8 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
10 */ 9 */
11/* line 16, ../scss/Layer.scss */ 10/* line 22, ../scss/Layer.scss */
12.layerLabel { 11.layerLabel {
13 width: 100%; 12 width: 100%;
14 color: white; 13 color: white;
@@ -20,13 +19,13 @@
20 -webkit-box-orient: horizontal; 19 -webkit-box-orient: horizontal;
21} 20}
22 21
23/* line 26, ../scss/Layer.scss */ 22/* line 32, ../scss/Layer.scss */
24.layerLabel.layerSelected { 23.layerLabel.layerSelected {
25 background-color: #b2b2b2; 24 background-color: #b2b2b2;
26 color: #242424; 25 color: #242424;
27} 26}
28 27
29/* line 30, ../scss/Layer.scss */ 28/* line 36, ../scss/Layer.scss */
30.layerLabel { 29.layerLabel {
31 width: 100%; 30 width: 100%;
32 height: 18px; 31 height: 18px;
@@ -35,7 +34,7 @@
35 -webkit-box-flex: 1; 34 -webkit-box-flex: 1;
36} 35}
37 36
38/* line 37, ../scss/Layer.scss */ 37/* line 43, ../scss/Layer.scss */
39.layerDisclosure { 38.layerDisclosure {
40 background-image: url("../images/panelDisclosureIcon.png"); 39 background-image: url("../images/panelDisclosureIcon.png");
41 background-repeat: no-repeat; 40 background-repeat: no-repeat;
@@ -49,7 +48,7 @@
49 -webkit-box-flex: 0; 48 -webkit-box-flex: 0;
50} 49}
51 50
52/* line 50, ../scss/Layer.scss */ 51/* line 56, ../scss/Layer.scss */
53.layerHide { 52.layerHide {
54 background-image: url("../images/eye.png"); 53 background-image: url("../images/eye.png");
55 background-repeat: no-repeat; 54 background-repeat: no-repeat;
@@ -60,7 +59,7 @@
60 -webkit-box-flex: 0; 59 -webkit-box-flex: 0;
61} 60}
62 61
63/* line 59, ../scss/Layer.scss */ 62/* line 65, ../scss/Layer.scss */
64.layerLock { 63.layerLock {
65 background-image: url("../images/lock_open.png"); 64 background-image: url("../images/lock_open.png");
66 background-repeat: no-repeat; 65 background-repeat: no-repeat;
@@ -72,7 +71,7 @@
72} 71}
73 72