Redo timeline resize code

Signed-off-by: Jonathan Duran <jduran@motorola.com>

3 files changed, 41 insertions, 10 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 2a84c21a..33145028 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -25,7 +25,9 @@
                         "playhead": {"#": "playhead"},
                         "playheadmarker": {"#": "playhead_marker"},
                         "timetext" : {"#": "time_text"},
-                        "timebar" : {"#": "time_bar"}
+                        "timebar" : {"#": "time_bar"},
+                        "container_tracks" : {"#" : "container-tracks"},
+                        "end_hottext" : {"@" : "endHottext"}
                     }
                 },
 
@@ -200,7 +202,19 @@
                             "oneway" : false
                         }
                         }
-                    }
+                    },
+                "endHottext" : {
+                    "module": "js/components/hottextunit.reel",
+                    "name": "HotTextUnit",
+                    "properties": {
+                        "element": {"#": "end_hottext"},
+                        "maxValue" : 100000,
+                        "minValue" : 1,
+                        "acceptableUnits" : "sec",
+                        "units" : "sec",
+                        "value" : 25
+                    }
+                }
             }
         </script>
 
@@ -240,7 +254,7 @@
                         <div id="timeline_gutter" class="timelinegutter">
                             <div id="newlayer_button" class="newlayerbutton"></div>
                             <div id="deletelayer_button" class="deletelayerbutton"></div>
-                            <input id="end_hottext" class="endhottext hottext">
+                            <input id="end_hottext" class="endhottext">
                         </div>
                     </div>
                 </div>
@@ -250,9 +264,8 @@
                 <div id="timeline_rightpane" class="tl_rightpane">
                     <div id="right_inside" class="rightinside">
                         <div class="layout_markers">
-                                <div id="timeline_markers" class="timelinemarkers">
-                                    <div id="playhead" class="playhead"></div>
-                                </div>
+                            <div id="playhead" class="playhead"></div>
+                                <div id="timeline_markers" class="timelinemarkers"></div>
                         </div>
 
 
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 43e758f4..8764d041 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -157,6 +157,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:false,
         writable:true
     },
+    timeMarkerHolder:{
+        value: null
+    },
     /* === END: Models === */
 
     /* === BEGIN: Draw cycle === */
@@ -202,6 +205,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
+            this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
 
             this.drawTimeMarkers();
 
@@ -213,6 +217,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    updateTrackContainerWidth:{
+        value: function(){
+            this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
+            this.master_track.style.width = (this.end_hottext.value * 80) + "px";
+            this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
+            this.time_markers.removeChild(this.timeMarkerHolder);
+            this.drawTimeMarkers();
+        }
+    },
+
     updateLayerScroll:{
         value:function () {
             this.user_layers.scrollTop = this.layout_tracks.scrollTop;
@@ -602,6 +616,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     drawTimeMarkers:{
         value:function () {
+            this.timeMarkerHolder = document.createElement("div");
+            this.time_markers.appendChild(this.timeMarkerHolder);
             var i;
             var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80);
             for (i = 0; i < totalMarkers; i++) {
@@ -609,7 +625,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 var markValue = this.calculateTimeMarkerValue(i);
                 timeMark.className = "timemark";
                 timeMark.innerHTML = markValue;
-                this.time_markers.appendChild(timeMark);
+                this.timeMarkerHolder.appendChild(timeMark);
             }
         }
     },
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index b8784d4d..26dd272c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -251,16 +251,18 @@
 }
 .timebar{
     height: 3px;
-    width:1px;
+    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;
-    padding-right: 8px;
+    font-family: 'Droid Sans';
+    font-size: 12px;
+    text-shadow: 1px 1px 1px black;
+    color: white;
 }
\ No newline at end of file