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