diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 5 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 14 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 22 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 73 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 250 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 78 |
8 files changed, 273 insertions, 176 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 0bd448f7..14315f8d 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -226,6 +226,8 @@ | |||
226 | } | 226 | } |
227 | } | 227 | } |
228 | } | 228 | } |
229 | |||
230 | |||
229 | } | 231 | } |
230 | </script> | 232 | </script> |
231 | </head> | 233 | </head> |
@@ -241,9 +243,9 @@ | |||
241 | <div class="collapsible-content content-layer collapsible-collapsed"> | 243 | <div class="collapsible-content content-layer collapsible-collapsed"> |
242 | <div class="label-position"> | 244 | <div class="label-position"> |
243 | <span class="collapsible-label">Position</span> | 245 | <span class="collapsible-label">Position</span> |
244 | <span class="collapsible-clicker clicker-position"></span> | 246 | <span class="collapsible-clicker clicker-position collapsible-collapsed"></span> |
245 | </div> | 247 | </div> |
246 | <div class="content-position collapsible-content"> | 248 | <div class="content-position collapsible-content collapsible-collapsed"> |
247 | <div class="layout-table"> | 249 | <div class="layout-table"> |
248 | <div class="layout-row"> | 250 | <div class="layout-row"> |
249 | <div class="layout-cell">X</div> | 251 | <div class="layout-cell">X</div> |
@@ -257,9 +259,9 @@ | |||
257 | </div> | 259 | </div> |
258 | <div class="label-transform"> | 260 | <div class="label-transform"> |
259 | <span class="collapsible-label">Transform</span> | 261 | <span class="collapsible-label">Transform</span> |
260 | <span class="clicker-transform collapsible-clicker"></span> | 262 | <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span> |
261 | </div> | 263 | </div> |
262 | <div class="content-transform collapsible-content"> | 264 | <div class="content-transform collapsible-content collapsible-collapsed"> |
263 | <div class="layout-table"> | 265 | <div class="layout-table"> |
264 | <div class="layout-row"> | 266 | <div class="layout-row"> |
265 | <div class="layout-cell">Scale X</div> | 267 | <div class="layout-cell">Scale X</div> |
@@ -286,11 +288,11 @@ | |||
286 | </div> | 288 | </div> |
287 | <div class="label-style"> | 289 | <div class="label-style"> |
288 | <span class="collapsible-label">Style</span> | 290 | <span class="collapsible-label">Style</span> |
289 | <span class="clicker-style collapsible-clicker"></span> | 291 | <span class="clicker-style collapsible-clicker collapsible-collapsed"></span> |
290 | <div class="cssbutton button-delete disabled"></div> | 292 | <div class="cssbutton button-delete disabled"></div> |
291 | <div class="cssbutton button-add"></div> | 293 | <div class="cssbutton button-add"></div> |
292 | </div> | 294 | </div> |
293 | <div class="content-style collapsible-content"> | 295 | <div class="content-style collapsible-content collapsible-collapsed"> |
294 | <div class="" id="style-container"> | 296 | <div class="" id="style-container"> |
295 | <div class="style-row" id="layer-style"> | 297 | <div class="style-row" id="layer-style"> |
296 | </div> | 298 | </div> |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e3897bbf..e76b8cc0 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; |
@@ -418,12 +418,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
418 | defaultEventManager.dispatchEvent(newEvent); | 418 | defaultEventManager.dispatchEvent(newEvent); |
419 | that.isMainCollapsed = that.mainCollapser.isCollapsed; | 419 | that.isMainCollapsed = that.mainCollapser.isCollapsed; |
420 | } | 420 | } |
421 | this.mainCollapser.needsDraw = true; | 421 | //this.mainCollapser.needsDraw = true; |
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; |
@@ -437,11 +437,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
437 | defaultEventManager.dispatchEvent(newEvent); | 437 | defaultEventManager.dispatchEvent(newEvent); |
438 | that.isPositionCollapsed = that.positionCollapser.isCollapsed; | 438 | that.isPositionCollapsed = that.positionCollapser.isCollapsed; |
439 | } | 439 | } |
440 | this.positionCollapser.needsDraw = true; | 440 | //this.positionCollapser.needsDraw = true; |
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; |
@@ -456,13 +456,13 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
456 | defaultEventManager.dispatchEvent(newEvent); | 456 | defaultEventManager.dispatchEvent(newEvent); |
457 | that.isTransformCollapsed = that.transformCollapser.isCollapsed; | 457 | that.isTransformCollapsed = that.transformCollapser.isCollapsed; |
458 | } | 458 | } |
459 | this.transformCollapser.needsDraw = true; | 459 | //this.transformCollapser.needsDraw = true; |
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 = 20; | 465 | this.styleCollapser.contentHeight = 0; |
466 | this.styleCollapser.isAnimated = true; | 466 | this.styleCollapser.isAnimated = true; |
467 | this.styleCollapser.labelClickEvent = function(boolBypass) { | 467 | this.styleCollapser.labelClickEvent = function(boolBypass) { |
468 | var newEvent = document.createEvent("CustomEvent"); | 468 | var newEvent = document.createEvent("CustomEvent"); |
@@ -474,7 +474,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
474 | defaultEventManager.dispatchEvent(newEvent); | 474 | defaultEventManager.dispatchEvent(newEvent); |
475 | that.isStyleCollapsed = that.styleCollapser.isCollapsed; | 475 | that.isStyleCollapsed = that.styleCollapser.isCollapsed; |
476 | } | 476 | } |
477 | this.styleCollapser.needsDraw = true; | 477 | //this.styleCollapser.needsDraw = true; |
478 | 478 | ||
479 | // Add event listeners to add and delete style buttons | 479 | // Add event listeners to add and delete style buttons |
480 | this.buttonAddStyle.identifier = "addStyle"; | 480 | this.buttonAddStyle.identifier = "addStyle"; |
@@ -485,7 +485,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
485 | 485 | ||
486 | // Add mousedown listener to set isActive | 486 | // Add mousedown listener to set isActive |
487 | this.element.addEventListener("mousedown", this, false); | 487 | this.element.addEventListener("mousedown", this, false); |
488 | //this.element.addEventListener("click", this, false); | 488 | this.element.addEventListener("click", this, false); |
489 | 489 | ||
490 | } | 490 | } |
491 | }, | 491 | }, |
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 | */ |