Timeline: New Features: Tag name now present in each layer. Configuration

dropdown in Master Layer; Show Only Animated Layers toggle.

1 files changed, 412 insertions, 273 deletions

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";
 /* <copyright>
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
+/* 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;
+  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;