Merge branch 'open1193' of https://github.com/nasa/openmctweb into open1193

platform/commonUI/general/res/sass/_mixins.scss

@@ -363,14 +363,13 @@
     }
 }
 
-@mixin webkitProp($name, $val) {
+@mixin cursorGrab() {
-	#{$name}: #{$val};
+    cursor: grab;
-	-webkit-#{$name}: #{$val};
+    cursor: -webkit-grab;
-}
+    &:active {
-
+        cursor: grabbing;
-@mixin webkitVal($name, $val) {
+        cursor: -webkit-grabbing;
-	#{$name}: #{$val};
+    }
-	#{$name}: -webkit-#{$val};
 }
 
 @mixin verticalCenter {

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

@@ -345,6 +345,9 @@
         .mode-selector .s-menu-button:before {
             content: $i;
         }
+        .l-axis-holder {
+            @include cursorGrab();
+        }
     }
 
     // Realtime mode

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

@@ -66,20 +66,19 @@
         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;
 
         .l-toi-buttons {
-            @include trans-prop-nice($props: width, $dur: 250ms);
+            @include trans-prop-nice($props: (width, padding), $dur: 250ms);
             border-radius: $controlCr;
             box-sizing: content-box;
             font-size: $toiH;
             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;
                     }
@@ -141,11 +140,14 @@
     }
 }
 
+
+// TOI is showing value as well
 .show-val .l-toi-holder {
     .l-toi {
         .l-toi-buttons {
+            order: 1;
             &:hover {
-                margin-left: $interiorMarginSm;
+                margin-right: $interiorMarginSm;
             }
         }
         .l-toi-val {
@@ -159,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: auto;
-            left: $toiPad * -2;
+            right: $toiPad * -2;
 
             .l-toi-buttons {
-                order: 1;
+                order: 2;
                 &:hover {
-                    .t-button-resync { order: 1; }
+                    .t-button-resync { order: 2; }
-                    .t-button-unpin { order: 2; }
+                    .t-button-unpin { order: 1; }
-                    margin-right: $interiorMarginSm;
+                    margin-left: $interiorMarginSm;
                 }
             }
 
             .l-toi-val {
-                order: 2;
+                order: 1;
             }
         }
     }
@@ -196,18 +198,24 @@ table {
                 z-index: 1;
                 td, .td {
                     .l-toi-holder {
-                        //@include test();
+                        left: 50% !important;
-                        //width: 100%;
-                        //z-index: 5;
                         &:before,
                         &:after {
                             display: none;
                         }
                         .l-toi {
-                            background: $toiColorBlocker;
+                            background: rgba($toiColorBlocker, 0.9);
+                            border-radius: 20%;
+                            height: auto;
                             padding: $toiPad;
                             @include transform(translate(-50%, -50%));
                             left: 50%; right: auto; top: 0;
+                            .l-toi-buttons {
+                                padding: 1px;
+                                &:hover {
+                                    padding: $toiPad;
+                                }
+                            }
                         }
                     }
                 }
@@ -216,57 +224,6 @@ table {
     }
 }
 
-// Old approach
-/*.tabular,
-table {
-    tbody, .tbody {
-        tr, .tr {
-            &.l-toi.pinned {
-                border-top: 1px dashed $toiColorBg;
-                td, .td {
-                    &:first-child {
-                        &:before,
-                        &:after {
-                            @include transform(translate(-50%, -50%));
-                            display: block;
-                            position: absolute;
-                            left: 50%;
-                            bottom: auto;
-                            top: 0;
-
-                        }
-
-                        &:before {
-                            @extend .icon-clock;
-                            color: $toiColorBg;
-                            cursor: pointer;
-                            z-index: 3;
-                        }
-
-                        &:after {
-                            border-radius: 100%;
-                            content: '';
-                            background: $toiColorBlocker;
-                            height: $toiH + $interiorMargin;
-                            width: $toiH + $interiorMargin;
-                            z-index: 2;
-                        }
-                    }
-                }
-
-                &:hover {
-                    td, .td {
-                        &:first-child:before {
-                            color: $toiColorBgAlert;
-                            content: $glyph-icon-x-in-circle !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}*/
-
 // TOI in plots
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {

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
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
-$toiColorFg: #000;
+$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
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
-$toiColorFg: #fff;
+$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-conductor.html

@@ -1,15 +1,4 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
-<style>
-    .fixed-mode .l-axis-holder {
-        cursor: grab;
-        cursor: -webkit-grab;
-    }
-
-    .fixed-mode .l-axis-holder:active {
-        cursor: grabbing;
-        cursor: -webkit-grabbing;
-    }
-</style>
 <div ng-controller="TimeConductorController as tcController"
     class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
         ng-class="{'status-panning': panning}">

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

@@ -1,20 +1,6 @@
-<!--
 <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"
@@ -22,6 +8,6 @@
             <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>

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

@@ -164,7 +164,7 @@ $ueTimeConductorH: (33px, 18px, 20px);
                     margin-left: 0;
                 }
                 .l-time-range-tick-label {
-                    @include webkitProp(transform, translateX(-50%));
+                    @include transform(translateX(-50%));
                     color: $colorPlotLabelFg;
                     display: inline-block;
                     font-size: 0.7rem;