From 4c492e2f9d01a699aba8ccdd1a2b04238749ea3c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 10 Apr 2012 14:49:20 -0700 Subject: Timeline: New Features: Tag name now present in each layer. Configuration dropdown in Master Layer; Show Only Animated Layers toggle. --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 13 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 72 ++- .../TimelinePanel.reel/css/TimelinePanel.css | 685 +++++++++++++-------- 3 files changed, 493 insertions(+), 277 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9eb126e0..09c1f98c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -32,7 +32,10 @@ "container_tracks" : {"#" : "container-tracks"}, "end_hottext" : {"@" : "endHottext"}, "container_layers" : {"#" : "container-layers"}, - "timeline_disabler" : {"#" : "timeline-disabler"} + "timeline_disabler" : {"#" : "timeline-disabler"}, + "checkable_relative" : {"#" : "checkable_relative"}, + "checkable_absolute" : {"#" : "checkable_absolute"}, + "checkable_animated" : {"#" : "checkable_animated"} } }, @@ -179,6 +182,14 @@
Master Layer
+
+
+
Use relative positioning
+
Use absolute positioning
+
+
Show only animated layers
+
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 8fec1d7d..f218868a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -349,6 +349,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); + + // Bind the handlers for the config menu + this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); + this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); + this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); } }, @@ -431,8 +436,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.trackPosition = 0; returnObj.layerData.arrStyleTracks = []; returnObj.layerData.tweens = []; + returnObj.layerData.layerTag = ""; + returnObj.layerData.isVisible = true; + returnObj.layerData.isTrackAnimated = false; returnObj.parentElementUUID = null; returnObj.parentElement = null; + return returnObj; } }, @@ -590,7 +599,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; - + if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { + // Fake a click. + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("click"); + this.checkable_animated.dispatchEvent(evt); + } } } }, @@ -610,7 +624,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.timeline.playheadmarker.style.left = "0px"; this.application.ninja.timeline.updateTimeText(0.00); this.timebar.style.width = "0px"; - + this.checkable_animated.classList.remove("checked"); this.currentLayerNumber = 0; this.currentLayerSelected = false; this.selectedKeyframes = []; @@ -773,6 +787,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; thingToPush.layerData.isSelected = true; @@ -815,6 +830,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } thingToPush.layerData.layerName = newLayerName; thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; @@ -880,7 +896,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function() { - this.createNewLayer(); + this.createNewLayer(this.application.ninja.selectedElements[0]); this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; } @@ -1096,6 +1112,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + handleAnimatedClick: { + value: function(event) { + this.handleCheckableClick(event); + this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); + var boolHide = false, + i = 0, + arrLayersLength = this.arrLayers.length; + if (event.currentTarget.classList.contains("checked")) { + // Hide layers with isAnimated = false; + boolHide = true; + } + + for (i = 0; i < arrLayersLength; i++) { + if (boolHide) { + // Hide layers with isAnimated = false + if (this.arrLayers[i].layerData.isTrackAnimated === false) { + this.arrLayers[i].layerData.isVisible = false; + this.triggerLayerBinding(i); + } + } else { + this.arrLayers[i].layerData.isVisible = true; + this.triggerLayerBinding(i); + } + } + + } + }, + handleRelativeClick: { + value: function(event) { + this.handleCheckableClick(event); + this.checkable_absolute.classList.remove("checked"); + // TODO: Use relative positioning + } + }, + handleAbsoluteClick: { + value: function(event) { + this.handleCheckableClick(event); + this.checkable_relative.classList.remove("checked"); + // TODO: Use absolute positioning. + } + }, + handleCheckableClick: { + value: function(event) { + if (event.currentTarget.classList.contains("checked")) { + event.currentTarget.classList.remove("checked"); + } else { + event.currentTarget.classList.add("checked"); + } + } + }, // Trigger the layer/track data binding triggerLayerBinding : { value: function(intIndex) { diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 2e420b98..d2a31033 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -1,297 +1,436 @@ +@charset "UTF-8"; /* 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. */ +/* TimelinePanel.scss + * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. + */ +/* line 22, ../scss/TimelinePanel.scss */ +.tl_container { + display: -webkit-box; + -webkit-box-orient: vertical; + height: 100%; +} + +/* line 27, ../scss/TimelinePanel.scss */ +.maintimeline { + -webkit-box-flex: 1; + display: -webkit-box; + -webkit-box-orient: horizontal; + height: 100%; + position: relative; + margin-top: 1px; +} + +/* line 35, ../scss/TimelinePanel.scss */ +.leftinside { + height: 100%; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + position: absolute; + overflow: hidden; +} -.tl_container{ - display: -webkit-box; - -webkit-box-orient: vertical; - height: 100%; -} -.maintimeline{ - -webkit-box-flex: 1; - display: -webkit-box; - -webkit-box-orient: horizontal; - height : 100%; - position: relative; - margin-top:1px; -} -.leftinside{ - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position:absolute; - overflow: hidden; -} -.rightinside{ - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position:absolute; -} -.tl_leftpane{ - min-width: 200px; - max-width: 500px; - position: relative; - overflow: hidden; - -webkit-box-flex: 0; -} -.tl_rightpane{ - width: 100%; - position: relative; - -webkit-box-flex: 1; +/* line 43, ../scss/TimelinePanel.scss */ +.rightinside { + height: 100%; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + position: absolute; } +/* line 50, ../scss/TimelinePanel.scss */ +.tl_leftpane { + min-width: 200px; + max-width: 500px; + position: relative; + overflow: hidden; + -webkit-box-flex: 0; +} + +/* line 57, ../scss/TimelinePanel.scss */ +.tl_rightpane { + width: 100%; + position: relative; + -webkit-box-flex: 1; +} + +/* line 63, ../scss/TimelinePanel.scss */ #bottomPanelContainer { - overflow: hidden !IMPORTANT; + overflow: hidden !IMPORTANT; } +/* line 67, ../scss/TimelinePanel.scss */ .layout-tracks { - width: 100%; - height: 100%; - padding-bottom: 6px; - box-sizing: border-box; - overflow: auto; - position: relative; -} -.tl_layertracks{ - background-color: #222; - height: 100%; - width: 100%; - -webkit-box-flex: 1; - padding-top: 21px; - box-sizing: border-box; -} -.layerresizer{ - height: auto; - width:6px; - border-right-style: solid; - border-right-color: #333; - border-right-width: thin; - border-left-style: solid; - border-left-color: #000; - border-left-width: thin; - background-color: #222; - cursor: col-resize; - -webkit-box-flex: 0; -} -.timelinecontroller{ - height:20px; - background-color: #222; - -webkit-box-flex: 0; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; -} -.timelinecontrols{ - width: 100%; - padding-left: 6px; - padding-top: 2px; - height: 18px; - background-color: #222; - float: left; -} -.timetext{ - float: right; - padding-right: 10px; - color: white; -} -.rewindbutton{ - background-image: url('../images/play_prev.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.playbutton{ - background-image: url('../images/play.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.pausebutton{ - background-image: url('../images/pause.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.forwardbutton{ - background-image: url('../images/play_next.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.timelinemarkers{ - height: 20px; - width: 100%; - background-color: #222; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; - -webkit-box-flex: 0; - position: absolute; - background-image: url("../images/timetick.jpg"); - overflow: visible; + width: 100%; + height: 100%; + padding-bottom: 6px; + box-sizing: border-box; + overflow: auto; + position: relative; +} + +/* line 75, ../scss/TimelinePanel.scss */ +.tl_layertracks { + background-color: #292929; + height: 100%; + width: 100%; + -webkit-box-flex: 1; + padding-top: 21px; + box-sizing: border-box; +} + +/* line 83, ../scss/TimelinePanel.scss */ +.layerresizer { + height: auto; + width: 6px; + border-right-style: solid; + border-right-color: #3a3a3a; + border-right-width: thin; + border-left-style: solid; + border-left-color: black; + border-left-width: thin; + background-color: #232323; + cursor: col-resize; + -webkit-box-flex: 0; +} + +/* line 96, ../scss/TimelinePanel.scss */ +.timelinecontroller { + height: 20px; + background-color: #474747; + -webkit-box-flex: 0; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: black; } + +/* line 104, ../scss/TimelinePanel.scss */ +.timelinecontrols { + width: 100%; + padding-left: 6px; + padding-top: 2px; + height: 18px; + background-color: #474747; + float: left; +} + +/* line 112, ../scss/TimelinePanel.scss */ +.timetext { + float: right; + padding-right: 10px; + color: white; +} + +/* line 117, ../scss/TimelinePanel.scss */ +.rewindbutton { + background-image: url("../images/play_prev.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 125, ../scss/TimelinePanel.scss */ +.playbutton { + background-image: url("../images/play.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 133, ../scss/TimelinePanel.scss */ +.pausebutton { + background-image: url("../images/pause.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 141, ../scss/TimelinePanel.scss */ +.forwardbutton { + background-image: url("../images/play_next.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 149, ../scss/TimelinePanel.scss */ +.timelinemarkers { + height: 20px; + width: 100%; + background-color: #474747; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: black; + -webkit-box-flex: 0; + position: absolute; + background-image: url("../images/timetick.jpg"); + overflow: visible; +} + +/* line 161, ../scss/TimelinePanel.scss */ .layout_markers { - position: absolute; - overflow: hidden; - top: 0px; - left: 0px; - height: 20px; - width: 100%; - border-bottom-style: solid; -} - -.masterlayer{ - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - height: 18px; - background-color: #474747; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #555; - color: white; - padding-left: 15px; - padding-top: 2px; -} -.mastertrack{ - -webkit-box-flex: 0; - color: white; - height: 20px; - width: 100%; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #444; - background-color: #222; - background-image: url("../../Track.reel/images/gridline.jpg"); + position: absolute; + overflow: hidden; + top: 0px; + left: 0px; + height: 20px; + width: 100%; + border-bottom-style: solid; } +/* line 171, ../scss/TimelinePanel.scss */ +.masterlayer { + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px black; + height: 18px; + background-color: #474747; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #3a3a3a; + color: white; + padding-left: 15px; + padding-top: 2px; +} + +/* line 184, ../scss/TimelinePanel.scss */ +.mastertrack { + -webkit-box-flex: 0; + color: white; + height: 20px; + width: 100%; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #3a3a3a; + background-color: #232323; + background-image: url("../../Track.reel/images/gridline.jpg"); +} + +/* line 198, ../scss/TimelinePanel.scss */ .container-tracks, .timelinemarkers, .mastertrack { - width: 2000px; -} -.userlayers{ - width: 100%; - background-color: #222; - -webkit-box-flex: 1; - overflow: hidden; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; -} -.timelinegutter{ - height: 16px; - padding-top: 1px; - padding-left: 6px; - -webkit-box-flex: 0; - background-color: #222; - border-top-style: solid; - border-top-width: thin; - border-top-color: #444; -} -.newlayerbutton{ - background-image: url('../images/plus.png'); - background-repeat: no-repeat; - height: 16px; - width: 16px; - float: left; - padding-right: 5px; -} -.deletelayerbutton{ - background-image: url('../images/trash.png'); - background-repeat: no-repeat; - height: 16px; - width: 16px; - float: left; - padding-right: 5px; -} -.tracktick{ - height: 100%; - width: 15px; - border-right-color: #444; - border-right-style: solid; - border-right-width: thin; - float: left; -} -.timemark{ - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - width: 76px; - color: #808080; - float: left; - padding-top: 6px; - padding-left: 4px; - text-align: left; -} -.playhead{ - height: 14px; - width: 6px; - position: absolute; - top: 6px; - left: -3px; - z-index: 92; - background-color: #b50003; - opacity: 0.5; -} -.playheadmarker{ - height: 100%; - width: 1px; - background-color: #cccccc; - top: 0; - left: 0; - position: absolute; - z-index: 91; -} -.timebar{ - height: 3px; - width:0; - background-color: #ff0003; - opacity: 0.3; - top:10px; - position: absolute; - border-top: #c7a19f thin solid; - border-right: #ffffff thin solid; -} -.endhottext{ - float: right; - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - color: white; - margin-top: 0%; + width: 2000px; +} + +/* line 201, ../scss/TimelinePanel.scss */ +.userlayers { + width: 100%; + background-color: #292929; + -webkit-box-flex: 1; + overflow: hidden; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: black; +} + +/* line 210, ../scss/TimelinePanel.scss */ +.timelinegutter { + height: 16px; + padding-top: 1px; + padding-left: 6px; + -webkit-box-flex: 0; + background-color: #474747; + border-top-style: solid; + border-top-width: thin; + border-top-color: #3a3a3a; } + +/* line 220, ../scss/TimelinePanel.scss */ +.newlayerbutton { + background-image: url("../images/plus.png"); + background-repeat: no-repeat; + height: 16px; + width: 16px; + float: left; + padding-right: 5px; +} + +/* line 228, ../scss/TimelinePanel.scss */ +.deletelayerbutton { + background-image: url("../images/trash.png"); + background-repeat: no-repeat; + height: 16px; + width: 16px; + float: left; + padding-right: 5px; +} + +/* line 236, ../scss/TimelinePanel.scss */ +.tracktick { + height: 100%; + width: 15px; + border-right-color: #3a3a3a; + border-right-style: solid; + border-right-width: thin; + float: left; +} + +/* line 244, ../scss/TimelinePanel.scss */ +.timemark { + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px #3a3a3a; + width: 76px; + color: gray; + float: left; + padding-top: 6px; + padding-left: 4px; + text-align: left; +} + +/* line 255, ../scss/TimelinePanel.scss */ +.playhead { + height: 14px; + width: 6px; + position: absolute; + top: 6px; + left: -3px; + z-index: 92; + background-color: #b50003; + opacity: 0.5; +} + +/* line 265, ../scss/TimelinePanel.scss */ +.playheadmarker { + height: 100%; + width: 1px; + background-color: white; + top: 0; + left: 0; + position: absolute; + z-index: 91; + opacity: 0.7; +} + +/* line 275, ../scss/TimelinePanel.scss */ +.timebar { + height: 3px; + width: 0; + background-color: #ff0003; + opacity: 0.3; + top: 10px; + position: absolute; + border-top: #c7a19f thin solid; + border-right: #ffffff thin solid; +} + +/* line 285, ../scss/TimelinePanel.scss */ +.endhottext { + float: right; + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px #3a3a3a; + color: white; + margin-top: 0%; +} + +/* line 293, ../scss/TimelinePanel.scss */ .timeline-disabled { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: rgba(30,30,30, 0.796); - z-index: 100; - display: none; - box-shadow: rgb(17, 17, 17) 0px 0px 14px inset; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: rgba(30, 30, 30, 0.796); + z-index: 100; + display: none; + box-shadow: #111111 0px 0px 14px inset; } + +/* line 304, ../scss/TimelinePanel.scss */ .timeline-dnd-helper { - -webkit-transform: scale(.9, .9); -} -.tl_slider{ - width: 65px; - height: 5px; - background: none; - float:left; - margin-left: 5%; + -webkit-transform: scale(0.9, 0.9); +} + +/* line 307, ../scss/TimelinePanel.scss */ +.tl_slider { + width: 65px; + height: 5px; + background: none; + float: left; + margin-left: 5%; +} + +/* Configuration menu */ +/* line 316, ../scss/TimelinePanel.scss */ +.tl-configbutton { + position: absolute; + top: 23px; + right: 2px; + width: 20px; + height: 20px; + background-image: url(../images/icon-gear.png); + background-repeat: no-repeat; + cursor: pointer; + z-index: 100; + background-position: 100% 0px; +} + +/* line 328, ../scss/TimelinePanel.scss */ +.tl-configbutton:hover { + width: 180px; +} + +/* line 332, ../scss/TimelinePanel.scss */ +.tl-configbutton .tl-dropdown { + position: absolute; + border: 1px solid black; + top: 16px; + right: 2px; + width: 180px; + padding-bottom: 7px; + background-color: #474747; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + display: none; +} + +/* line 343, ../scss/TimelinePanel.scss */ +.tl-configbutton:hover .tl-dropdown { + display: block; +} + +/* line 347, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable { + padding-left: 20px; + height: 20px; + line-height: 20px; + margin-top: 3px; +} + +/* line 353, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable:hover { + background-color: #b2b2b2; + color: #242424; + text-shadow: none; +} + +/* line 358, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable.checked { + background-image: url(../images/icon-checkmark.png); + background-repeat: no-repeat; + background-position: 6px 4px; +} + +/* line 364, ../scss/TimelinePanel.scss */ +.tl-configbutton .nj-divider { + margin-top: 7px; +} + +/* line 368, ../scss/TimelinePanel.scss */ +.layer-hidden { + display: none; } -- cgit v1.2.3