From 8ec3c422910915e9da66d2ee3b6e49140a4adb3f Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 13 Sep 2017 16:46:14 -0700
Subject: [PATCH] [Frontend] WIP Timeline Follow Line

Fixes #1688
VERY WIP! Initial move of styles into classes;
---
 .../features/timeline/res/sass/_timelines.scss   | 16 ++++++++++++++++
 .../timeline/res/templates/timeline.html         |  9 ++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss
index 70b5b43024..dd73d55a44 100644
--- a/platform/features/timeline/res/sass/_timelines.scss
+++ b/platform/features/timeline/res/sass/_timelines.scss
@@ -75,6 +75,10 @@
                 }
             }
             &.l-timeline-gantt {
+                .abs.l-timeline-gantt-header-w {
+                    overflow: hidden;
+                    height: $timelineTopPaneHeaderH;
+                }
                 .l-swimlanes-holder {
                     @include scrollV(scroll);
                     bottom: $scrollbarTrackSize;
@@ -322,6 +326,18 @@
 	.l-subticks {
 		height: 5px
 	}
+
+    // Follow Line
+    .l-follow-line {
+        position: absolute;
+        top: 0; bottom: 0;
+        width: 1px;
+        z-index: 100;
+    }
+
+    .s-follow-line {
+        background: rgba(red, 0.5);
+    }
 }
 
 .s-status-editing .l-title .rep-object-label[draggable="true"] {
diff --git a/platform/features/timeline/res/templates/timeline.html b/platform/features/timeline/res/templates/timeline.html
index 16b899494c..73505a4635 100644
--- a/platform/features/timeline/res/templates/timeline.html
+++ b/platform/features/timeline/res/templates/timeline.html
@@ -129,7 +129,7 @@
                 </a>
             </div>
 
-            <div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">
+            <div class="abs l-timeline-gantt-header-w" mct-scroll-x="scroll.x">
                 <mct-include key="'timeline-ticks'"
                              parameters="{
                                          fullWidth: zoomController.width(timelineController.end()),
@@ -139,10 +139,9 @@
                                          toMillis: zoomController.toMillis
                                          }">
                 </mct-include>
-                <div ng-if="toiController.isActive()"
-                     ng-style="{ left: toiController.x() + 'px', width: '4px', top: '0px', height: '30px', background: 'blue', position: 'absolute' }">
-            </div>
-
+                <div class="t-follow-line l-follow-line s-follow-line" ng-if="toiController.isActive()"
+                     ng-style="{ left: toiController.x() + 'px' }">
+                </div>
             </div>
 
             <div class="t-swimlanes-holder l-swimlanes-holder"