[Frontend] Styling for TC's TOI element

Fixes #933
Fixes #1193
WIP: adjust spacing;
added pagination buttons

Author: charlesh88

platform/features/conductor-v2/conductor/res/sass/_constants.scss

@@ -1,4 +1,5 @@
 $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
 $ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
 $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
-$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
+$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
+$timeCondAxisLROffset: (5px, 5px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

@@ -185,8 +185,9 @@
         }
         .l-axis-holder {
             height: $r1H;
-            position: relative;
-            width: 100%;
+            position: absolute;
+            left: nth($timeCondAxisLROffset,1);
+            right: nth($timeCondAxisLROffset,2);
             svg {
                 text-rendering: geometricPrecision;
                 width: 100%;
@@ -209,9 +210,34 @@
             }
         }
     }
-    .l-data-visualization {
-        background: $colorTimeCondDataVisBg;
+    .l-data-visualization-holder {
         height: $r2H;
+
+        .l-page-button,
+        .l-data-visualization {
+            position: absolute;
+            top: 0; bottom: 0;
+        }
+
+        .l-page-button {
+            @if nth($timeCondAxisLROffset, 1) + nth($timeCondAxisLROffset, 2) > 30 {
+                left: 0;
+                width: nth($timeCondAxisLROffset,1);
+                &.align-right {
+                    left: auto; right: 0;
+                    width: nth($timeCondAxisLROffset,2);
+                }
+            } @else {
+                // Hide these if the offsets aren't enough
+                display: none;
+            }
+        }
+
+        .l-data-visualization {
+            background: $colorTimeCondDataVisBg;
+            left: nth($timeCondAxisLROffset, 1);
+            right: nth($timeCondAxisLROffset, 2);
+        }
     }
 
     // Time of Interest control
@@ -228,7 +254,6 @@
         $cHov: $colorClickIconHov;
         $linesVOffset: 2px;
         @include transform(translateX(-50%));
-        @include test(green);
         top: 0px; bottom: 0px;
         width: $r2H;
         left: auto; right: auto;
@@ -343,13 +368,9 @@
             }
         }
 
-        .l-toi-holder {
-            display: none;
-        }
-
         .l-data-visualization {
             background: $colorTimeCondDataVisRtBg !important;
-            height: $r2HRt;
+            //height: $r2HRt;
         }
 
         .mode-selector .s-menu-button {

platform/features/conductor-v2/conductor/res/templates/time-conductor.html

@@ -78,12 +78,16 @@
             <mct-conductor-axis></mct-conductor-axis>
         </div>
 
-        <!-- Holds data availability, time of interest -->
-        <div class="l-data-visualization l-row-elem flex-elem">
-            <div class="l-toi-holder slidable horz"
-                style="left: 100%">
-                <div class="l-toi s-toi"></div>
+        <!-- Holds data visualization, time of interest -->
+        <div class="l-data-visualization-holder l-row-elem flex-elem">
+            <a class="l-page-button s-icon-button icon-pointer-left"></a>
+            <div class="l-data-visualization">
+                <div class="l-toi-holder slidable horz"
+                    style="left: 100%">
+                    <div class="l-toi s-toi"></div>
+                </div>
             </div>
+            <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
         </div>
 
         <!-- Holds time system and session selectors, and zoom control -->