[Frontend] TOI finalizing

Fixes #933
Fixes #1193
HTML template cleaned up; checked in snow theme,
theme colors tweaked; padding finalized; now uses
val-to-left instead of -to-right;

Author: charlesh88

platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss

@@ -66,7 +66,7 @@
         align-items: center;
         box-sizing: content-box;
         height: $toiH;
-        right: $toiPad * -2;
+        left: $toiPad * -2;
         @include transform(translateY(-50%)); top: 50%;
         padding: $toiPad;
         z-index: 1;
@@ -79,7 +79,6 @@
             height: 100%;
             line-height: $toiH;
             padding: $toiPad;
-            order: 2;
             overflow: hidden;
             white-space: nowrap;
             justify-content: space-between;
@@ -100,13 +99,13 @@
                 }
 
                 .t-button-resync {
-                    order: 2;
+                    order: 1;
                     &:before {
                         content: $glyph-icon-resync;
                     }
                 }
                 .t-button-unpin {
-                    order: 1;
+                    order: 2;
                     &:hover {
                         color: $toiColorBgAlert;
                     }
@@ -146,8 +145,9 @@
 .show-val .l-toi-holder {
     .l-toi {
         .l-toi-buttons {
+            order: 1;
             &:hover {
-                margin-left: $interiorMarginSm;
+                margin-right: $interiorMarginSm;
             }
         }
         .l-toi-val {
@@ -161,28 +161,28 @@
             font-weight: 400;
             height: $toiH;
             line-height: $toiH;
-            order: 1;
+            order: 2;
             padding: 1px 3px;
             white-space: nowrap;
         }
     }
 
-    &.val-to-right {
+    &.val-to-left {
         .l-toi {
-            right: auto;
-            left: $toiPad * -2;
+            left: auto;
+            right: $toiPad * -2;
 
             .l-toi-buttons {
-                order: 1;
+                order: 2;
                 &:hover {
-                    .t-button-resync { order: 1; }
-                    .t-button-unpin { order: 2; }
-                    margin-right: $interiorMarginSm;
+                    .t-button-resync { order: 2; }
+                    .t-button-unpin { order: 1; }
+                    margin-left: $interiorMarginSm;
                 }
             }
 
             .l-toi-val {
-                order: 2;
+                order: 1;
             }
         }
     }
@@ -198,6 +198,7 @@ table {
                 z-index: 1;
                 td, .td {
                     .l-toi-holder {
+                        left: 50% !important;
                         &:before,
                         &:after {
                             display: none;

platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss

@@ -39,10 +39,10 @@ $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
 
 // Time of Interest
 $toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
-$toiColorFg: #000;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
+$toiColorFg: #000; // Used by value display
 $toiColorCtrlFg: #fff;
-$toiColorBgAlert: #cf2a12;
+$toiColorBgAlert: #cf2a12; // Used by unpin button on hover
 $colorTimeCondTOIBg: darken($toiColorBg, 20%);
 $colorTimeCondTOIBgHov: $toiColorBg;
 

platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss

@@ -39,10 +39,10 @@ $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
 
 // Time of Interest
 $toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
-$toiColorFg: #fff;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
+$toiColorFg: #fff; // Used by value display
 $toiColorCtrlFg: #fff;
-$toiColorBgAlert: #a7292a; // $colorFormInvalid;
+$toiColorBgAlert: #ff9540; // Used by unpin button on hover
 $colorTimeCondTOIBg: darken($toiColorBg, 20%);
 $colorTimeCondTOIBgHov: $toiColorBg;
 

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

@@ -1,27 +1,13 @@
-<!--
 <div class="l-toi-holder"
-     ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 80 }"
+     ng-class="{ 'pinned': toi.pinned, 'val-to-left': toi.left > 80 }"
      ng-style="{'left': toi.left + '%'}">
-    <div class="l-toi">
-        <a class="t-button-unpin icon-button" title="Unset Time of Interest"
-           ng-click="toi.dismiss()"></a>
-        <a class="t-button-resync icon-button" title="Re-sync Time of Interest"
-           ng-click="toi.resync()"></a>
-    </div>
-    <span class="l-toi-val">{{toi.toiText}}</span>
-</div>
--->
-
-<div class="l-toi-holder"
-     ng-class="{ 'pinned': true, 'val-to-right': true }"
-     ng-style="{'left': 50 + '%'}">
     <div class="l-flex-row l-toi">
         <span class="flex-elem l-flex-row l-toi-buttons">
             <a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"
                ng-click="toi.resync()"></a>
             <a class="flex-elem t-button-unpin icon-button" title="Unset Time of Interest"
                ng-click="toi.dismiss()"></a>
         </span>
-        <span class="flex-elem l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
+        <span class="flex-elem l-toi-val">{{toi.toiText}}</span>
     </div>
 </div>