Coppied changes from playhead-bug branch

Author: Jackson

src/timeline/index.html

@@ -50,11 +50,12 @@
 			<div tl-playhead class="playhead playhead-top" ng-right-click="showPlayheadMenu(project.playhead_position)" style="left:{{project.playhead_position * pixelsPerSecond}}px;">
 				<div class="playhead-line-small"></div>
 			</div>
-			<!-- Ruler is width of the timeline -->
+			<!-- Ruler extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
 			<div tl-ruler id="ruler" style="width: {{project.duration * pixelsPerSecond}}px;">
 			</div>
 
 			<!-- MARKERS --> 
+
 			<span class="ruler_marker" id="marker_for_{{marker.id}}">
 				<img ng-repeat="marker in project.markers" id="marker_{{marker.id}}_{{$index}}" ng-right-click="showMarkerMenu(marker.id)" style="position: absolute; bottom: 0px; left: {{(marker.position * pixelsPerSecond) - 6 }}px;" class="marker_icon" ng-src="media/images/markers/{{ marker.icon }}" draggable="false"/>
 			</span>

src/timeline/js/directives/ruler.js

@@ -160,34 +160,63 @@ App.directive("tlRuler", function ($timeout) {
         }
       });
 
+      drawTicks = () => { 
+        /* Remove all divs in ruler and readraw along the full length 
+         * Only needed when timeline length changes.
+         */
+
+        ruler = $("#ruler");
+        $('#ruler div').remove();
+        width = ruler.width();
+        for (var x = 0; x < width; x+=50) {
+          d = $('<div>');
+          d.addClass('on_ruler');
+          d.addClass( (x % 100 == 0) ? 'ruler_tick_long' : 'ruler_tick');
+          d[0].style = "left: " + x + 'px;';
+          console.log(d[0]);
+          ruler.append(d);
+        }
+      }
+
       drawTimes = () => {
+        console.log(scope.scrollLeft);
         ruler = $("#ruler");
         width = $("body").width();
         $("#ruler span").remove();
-        start = Math.max(scope.scrollLeft - width, 100);
+        start = Math.max(scope.scrollLeft - width, 0);
         end = Math.min(scope.scrollLeft + (2*width), $('#ruler').width());
-
-        scale = scope.project.scale;
-        for (var i = start - (start % 100) ; i < end; i += 100) {
-          /* create and format span */
-          s = $('<span style="left: ' + i + 'px;">');
-          s.addClass("ruler_time");
-
-          /* Calculate Time */
-          var time = i  / scope.pixelsPerSecond;
-          var text_time = secondsToTime(time, scope.project.fps.num, scope.project.fps.den);
-          s[0].innerText= text_time["hour"] + ":" + text_time["min"] + ":" + text_time["sec"];
-
+        for (var i = start - (start % 50) ; i < end; i += 100) {
+          s = $('<span>');
+          s.addClass("tick_time");
+          s[0].innerText= "00:00";
+          s[0].style = "left: " + i + "px;";
           ruler.append(s);
         }
       }
 
-      scope.$watch("project.scale + project.duration + scrollLeft", function (val) {
+      //watch the scale value so it will be able to draw the ruler after changes,
+      //otherwise the canvas is just reset to blank
+      scope.$watch("project.scale + project.duration", function(val) {
+        if (val) {
+          $timeout(function () {
+            $('#ruler').scrollLeft = $('#scrolling_tracks').scrollLeft;
+            drawTimes();
+            return;
+            }
+          , 0);
+        }
+      });
+      
+      scope.$watch("scrollLeft", function (val) {
         if (val) {
           $timeout(function () {
+            // $('#ruler').scrollLeft = $('#scrolling_tracks').scrollLeft;
             drawTimes();
+            //reposition the spans at every visible multiple of 50 pixels
+            //Plus a screen width before and after for scrolling
             return;
-          } , 0);
+            }
+          , 0);
         }
       });
 

src/timeline/media/css/main.css

@@ -43,22 +43,41 @@ img {
 }
 
 /* Ruler */
-#scrolling_ruler { overflow: hidden; position: relative; line-height: 4px; height:43px;}
+#scrolling_ruler { overflow: hidden; position: relative;line-height: 4px; height:43px;}
 #scrolling_tracks { height: 316px; overflow: scroll; position: relative; }
 #ruler_label { height: 39px; width: 140px; float: left; margin-bottom: 4px; }
-#ruler_time { font-size: 13pt; color: #999; padding-top: 14px; padding-left: 17px; }
-#progress{ position: absolute; bottom: 0;}
+#ruler_time { font-size: 13pt; color: #c8c8c8; padding-top: 14px; padding-left: 17px; }
+#progress_container {margin-left:140px; overflow: hidden; height: 13px;}
 .drag_cursor { cursor: move; }
 #ruler {
   position: relative;
-  height: 39px;
+  height: 100%;
   background-image: url(../images/ruler-tick.svg);
-  background-position: -50px;
 }
-.ruler_time {
-  color: #c8c8c8;
-  top: 6px;
+.on_ruler{
+  position: absolute;
+  color: white;
   font-size: 0.8em;
+}
+.ruler_tick_long {
+  background-color: white;
+  width: 5px;
+  height: 20px;
+  bottom: 0px;
+  position: absolute;
+  border-radius: 2px;
+}
+.ruler_tick {
+  background-color: white;
+  width: 5px;
+  height: 10px;
+  bottom: 0px;
+  position: absolute;
+  border-radius: 2px;
+}
+.tick_time {
+  color: white;
+  top: 5px;
   position: absolute;
   transform: translate(-50%,0);
 }