Cleaned up leftover code for PR

Author: Jackson

src/timeline/index.html

@@ -50,12 +50,11 @@
 			<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 extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
+			<!-- Ruler is width of the timeline -->
 			<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,63 +160,36 @@ 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, 0);
+        start = Math.max(scope.scrollLeft - width, 100);
         end = Math.min(scope.scrollLeft + (2*width), $('#ruler').width());
+
+        scale = scope.project.scale;
         for (var i = start - (start % 50) ; i < end; i += 100) {
+          /* create and format span */
           s = $('<span>');
           s.addClass("tick_time");
-          s[0].innerText= "00:00";
           s[0].style = "left: " + i + "px;";
+
+          /* 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"];
+
           ruler.append(s);
         }
       }
 
-      //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) {
+      scope.$watch("project.scale + markers.length + project.duration + 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

@@ -53,27 +53,7 @@ img {
   position: relative;
   height: 100%;
   background-image: url(../images/ruler-tick.svg);
-}
-.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;
+  background-position: -50px;
 }
 .tick_time {
   color: white;