[Frontend] Styling for Time Conductor v2

Fixes #993
In-progress; mode menu names and
descriptors modified, markup cleaned up

Author: charlesh88

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -42,17 +42,14 @@
             &.start-date {
                 @include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
             }
-
             &.end-date {
                 @include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
                 right: 0;
                 text-align: right;
             }
-
             input[type="text"] {
                 width: $inputW;
             }
-
             .icon-calendar {
                 position: absolute;
                 margin-left: -16px;
@@ -70,44 +67,30 @@
             position: relative;
             width: 100%;
         }
-
         .l-axis-holder {
             height: $r1H;
             position: relative;
             width: 100%;
             svg {
                 stroke: $c;
                 width: 100%; height: 100%;
+                > g {
+                    font-size: 0.8em;
+                }
                 path {display: none;}
                 line {stroke: $c;}
             }
         }
 	}
-
     .l-data-visualization {
         background: rgba($colorTick, 0.3);
         height: $r2H;
     }
-
 	.l-time-domain-selector {
 		position: absolute;
 		right: 0px;
 		top: $interiorMargin;
 	}
-
-/*    .super-menu.mode-selector-menu {
-        height: 200px; width: 400px;
-        .menu-item-description {
-            .desc-area.icon {
-                @include test();
-                $h: 50px;
-                //font-size: 3em;
-                //height: $h;
-                //line-height: $h;
-            }
-        }
-    }*/
-
 }
 
 .s-time-range-val {

platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html

@@ -26,42 +26,42 @@
                 <a
                    ng-mouseover="representation.activeMetadata = {
                         glyph: '\ue604',
-                        name: 'Fixed Time-Span',
-                        description: 'Display data that falls between two fixed dates'
+                        name: 'Fixed Timespan Mode',
+                        description: 'Query and explore data that falls between two fixed dates.'
                     }"
                    ng-mouseleave="representation.activeMetadata = undefined">
                     <span class="ui-symbol icon type-icon">
                         &#xe604;
                     </span>
-                    Fixed Time-span
+                    Fixed Timespan Mode
                 </a>
             </li>
             <li ng-click="representation.mode='realtime'">
                 <a
                         ng-mouseover="representation.activeMetadata = {
                         glyph: '\u0043',
                         name: 'Real-time Mode',
-                        description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
+                        description: 'Monitor real-time streaming data as it comes in. The Time Conductor will automatically advance itself based on a UTC clock.'
                     }"
                         ng-mouseleave="representation.activeMetadata = undefined">
                     <span class="ui-symbol icon type-icon">
                         &#x43;
                     </span>
-                    Real-time
+                    Real-time Mode
                 </a>
             </li>
             <li ng-click="representation.mode='latest'">
                 <a
                         ng-mouseover="representation.activeMetadata = {
                         glyph: '\u0044',
-                        name: 'Latest Available Data',
-                        description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
+                        name: 'Latest Available Data Mode',
+                        description: 'Monitor real-time streaming data as it comes in. The Time Conductor will only advance when data becomes available.'
                     }"
                         ng-mouseleave="representation.activeMetadata = undefined">
                     <span class="ui-symbol icon type-icon">
                         &#x44;
                     </span>
-                    Latest Available Data
+                    Latest Available Data Mode
                 </a>
             </li>
         </ul>

platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html

@@ -38,7 +38,7 @@
 <span ng-controller="ClickAwayController as modeController">
     <div class="s-menu-btn"
          ng-click="modeController.toggle()">
-		<span class="title-label">Fixed Time Span</span>
+		<span class="title-label">Historical Data Mode</span>
     </div>
     <div class="menu super-menu mini mode-selector-menu"
          ng-show="modeController.isActive()">

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

@@ -1,9 +1,7 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
 <div class="l-time-conductor follow-mode"
      ng-controller="TimeConductorController as tcController" class="l-flex-col">
-    <!-- Holds date selectors and ticks -->
-
-    <!-- Holds ticks -->
+    <!-- Holds inputs and ticks -->
     <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
         <form class="abs l-time-conductor-inputs-holder"
               ng-submit="tcController.updateBoundsFromForm(formModel)">