[Frontend] TOI sass and markup sanding

charlesh88 · charlesh88 · commit 47a0aba601ed · 2016-10-04T18:12:01.000-07:00
Fixes #933 Fixes #1193 Color tweaks; Cleanups, commented code removal, etc.; tightened up tabular padding and font sizes;
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
@@ -75,7 +75,7 @@ $treeContextTriggerW: 20px;
 /*************** Tabular */
 $tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
-$tabularTdPadTB: 3px;
+$tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
diff --git a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss
@@ -61,7 +61,7 @@
     }
 
     .l-toi {
-        // Holds clock icon an unpin button
+        // Holds clock icon and unpin button
         font-size: $toiW;
         height: $toiW;
         width: $toiW;
@@ -70,34 +70,41 @@
             @extend .icon-clock;
             &:hover {
                 &:before {
+                    color: $toiColorBgAlert;
                     content: $glyph-icon-x-in-circle;
                 }
             }
         }
     }
 
     .l-toi-val {
-        $tbP: 1px;
-        background-color: $toiColorBg;
-        border-radius: $controlCr;
-        box-sizing: content-box;
-        display: inline-block;
-        color: $toiColorFg;
-        font-size: 0.7rem;
-        font-weight: 400;
-        height: $toiW;
-        right: $toiW + $interiorMarginSm;
-        top: 50%;
-        @include transform(translateY(-50%));
-        line-height: $toiW;
-        padding: $tbP $p;
-        white-space: nowrap;
+        display: none; // Hide by default; see .show-val below
     }
 
-    &.val-to-right {
+    &.show-val {
         .l-toi-val {
-            right: auto;
-            left: $toiW + $interiorMarginSm;
+            $tbP: 1px;
+            background-color: $toiColorBg;
+            border-radius: $controlCr;
+            box-sizing: content-box;
+            color: $toiColorFg;
+            display: inline-block;
+            font-size: 0.7rem;
+            font-weight: 400;
+            height: $toiW;
+            right: $toiW + $interiorMarginSm;
+            top: 50%;
+            @include transform(translateY(-50%));
+            line-height: $toiW;
+            padding: $tbP $p;
+            white-space: nowrap;
+        }
+
+        &.val-to-right {
+            .l-toi-val {
+                right: auto;
+                left: $toiW + $interiorMarginSm;
+            }
         }
     }
 }
@@ -110,24 +117,38 @@ table {
             &.l-toi.pinned {
                 border-top: 1px dashed $toiColorBg;
                 td, .td {
-                    &:first-child:before {
-                        @extend .icon-clock;
-                        @include transform(translate(-50%, -50%));
-                        color: $toiColorBg;
-                        cursor: pointer;
-                        display: block;
-                        position: absolute;
-                        left: 50%;
-                        bottom: auto;
-                        text-shadow: 0 1px 15px black;
-                        top: 0;
-                        z-index: 2;
+                    &: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: $toiW + $interiorMargin;
+                            width: $toiW + $interiorMargin;
+                            z-index: 2;
+                        }
                     }
                 }
 
                 &:hover {
                     td, .td {
                         &:first-child:before {
+                            color: $toiColorBgAlert;
                             content: $glyph-icon-x-in-circle !important;
                         }
                     }
diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -51,11 +51,6 @@ table {
 
 	tbody, .tbody {
 		display: table-row-group;
-/*		tr, .tr {
-			&:hover {
-				background: rgba($colorTabBodyFg, 0.1);
-			}
-		}*/
 	}
 	tr, .tr {
         border-top: 1px solid $colorTabBorder;
@@ -72,11 +67,12 @@ table {
 		}
 		th, .th, td, .td {
 			display: table-cell;
+            font-size: 0.7rem;
 		}
 		th, .th {
 			border-left: 1px solid $colorTabHeaderBorder;
 			color: $colorTabHeaderFg;
-			padding: $tabularTdPadLR $tabularTdPadLR;
+			padding: $tabularTdPadTB $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
 			&:first-child {
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -105,7 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
 $toiColorBg: #6b93c6;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
 $toiColorFg: #000;
+$toiColorBgAlert: #cf644a; // $colorFormInvalid;
 $toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
 
 // Status colors, mainly used for messaging and item ancillary symbols
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -105,7 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
 $toiColorBg: #6b93c6;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
 $toiColorFg: #fff;
+$toiColorBgAlert: #a7292a; // $colorFormInvalid;
 $toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
 
 // Status colors, mainly used for messaging and item ancillary symbols
diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -98,15 +98,14 @@
         <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">
-                <!-- Note:
-                - val-to-right should be applied when l-toi-holder left < 160px
-                -->
-                <div class="l-toi-holder"
-                     ng-class="{ 'pinned': true, 'val-to-right': false }"
-                     ng-click="this.pinned = false"
+                <!-- TOI element. val-to-right should be true when 'left' is < 150px -->
+                <div class="l-toi-holder show-val"
+                     ng-class="{ 'pinned': false, 'val-to-right': false }"
                     style="left: 70%">
                     <div class="l-toi">
-                        <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
+                        <a class="t-button-unpin icon-button"
+                           title="Unset Time of Interest"
+                           ng-click="dummyUnpin()"></a>
                         <span class="l-toi-val">21:31:30</span>
                     </div>
                 </div>
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
@@ -75,15 +75,15 @@
                 </div>
             </div>
 
-            <!-- new wrapper inserted here -->
             <div class="gl-plot-wrapper-display-area-and-x-axis">
-                <!-- TOI element -->
+                <!-- TOI element. val-to-right should be true when 'left' is < 150px -->
                 <div class="l-toi-holder show-val"
-                     ng-class="{ pinned: true, 'val-to-right': true }"
+                     ng-class="{ pinned: false, 'val-to-right': true }"
                      style="left: 0%">
-                    <!-- Need text val at bottom, plus vertical line -->
                     <span class="l-toi">
-                        <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
+                        <a class="t-button-unpin icon-button"
+                           title="Unset Time of Interest"
+                           ng-click="dummyUnpin()"></a>
                         <span class="l-toi-val">21:31:30</span>
                     </span>
                 </div>
diff --git a/platform/features/table/res/templates/mct-table.html b/platform/features/table/res/templates/mct-table.html
@@ -51,6 +51,7 @@
         <tbody>
             <tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
                 ng-class="{ 'l-toi pinned': false }"
+                ng-click="dummyUnpin()"
                 ng-style="{
                     top: visibleRow.offsetY + 'px',
                 }">
