Conditionals fixes and tweaks

- Legacy wrapper fixes to allow color styling to be applied as expected;
- New `$mainViewPad` constant;
- Fix `c-control-bar` element spacing in plots;
- TODO: check for regressions, particularly with plot views;
- Fixes #2772: better `is-style-invisible` css for `c-style-thumbs`;

src/plugins/LADTable/components/LADTable.vue

@@ -21,22 +21,24 @@
  *****************************************************************************/
 
 <template>
-<table class="c-table c-lad-table">
-    <thead>
-        <tr>
-            <th>Name</th>
-            <th>Timestamp</th>
-            <th>Value</th>
-        </tr>
-    </thead>
-    <tbody>
-        <lad-row
-            v-for="item in items"
-            :key="item.key"
-            :domain-object="item.domainObject"
-        />
-    </tbody>
-</table>
+<div class="c-lad-table-wrapper">
+    <table class="c-table c-lad-table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Timestamp</th>
+                <th>Value</th>
+            </tr>
+        </thead>
+        <tbody>
+            <lad-row
+                v-for="item in items"
+                :key="item.key"
+                :domain-object="item.domainObject"
+            />
+        </tbody>
+    </table>
+</div>
 </template>
 
 <script>

src/plugins/condition/components/inspector/conditional-styles.scss

@@ -94,6 +94,8 @@
 
     &.c-style-thumb {
         display: block !important;
+        background-color: transparent !important;
+        border-color: transparent !important;
         @include bgCheckerboard($size: 10px, $imp: true);
         opacity: 1;
     }

src/plugins/plot/res/templates/plot.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span ng-controller="PlotController as controller"
-    class="abs holder holder-plot has-control-bar">
+<div ng-controller="PlotController as controller"
+    class="c-plot holder holder-plot has-control-bar">
     <div class="c-control-bar" ng-show="!controller.hideExportButtons">
          <span class="c-button-set c-button-set--strip-h">
             <button class="c-button icon-download"
@@ -50,4 +50,4 @@
                   the-x-axis="xAxis">
         </mct-plot>
     </div>
-</span>
+</div>

src/plugins/plot/res/templates/stacked-plot.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span ng-controller="StackedPlotController as stackedPlot"
-      class="abs holder holder-plot has-control-bar t-plot-stacked">
+<div ng-controller="StackedPlotController as stackedPlot"
+      class="c-plot c-plot--stacked holder holder-plot has-control-bar">
     <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
        <span class="c-button-set c-button-set--strip-h">
           <button class="c-button icon-download"
@@ -57,4 +57,4 @@
             <mct-overlay-plot domain-object="telemetryObject"></mct-overlay-plot>
         </div>
     </div>
-</span>
+</div>

src/styles/_constants.scss

@@ -44,6 +44,7 @@ $overlayOuterMarginLg: 5%;
 $overlayOuterMarginFullscreen: 0%;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
+$mainViewPad: 2px;
 /*************** Items */
 $itemPadLR: 5px;
 $gridItemDesk: 175px;

src/styles/_legacy-plots.scss

@@ -25,32 +25,6 @@ mct-plot {
 }
 
 /*********************** STACKED PLOT LAYOUT */
-.t-plot-stacked {
-    .l-view-section {
-        //  Make this a flex container
-        display: flex;
-        flex-flow: column nowrap;
-        .gl-plot.child-frame {
-            mct-plot {
-                display: flex;
-                flex: 1 1 auto;
-                height: 100%;
-                position: relative;
-            }
-            flex: 1 1 auto;
-            &:not(:first-child) {
-                margin-top: $interiorMargin;
-            }
-        }
-    }
-
-    .s-status-timeconductor-unsynced .holder-plot {
-        .t-object-alert.t-alert-unsynced {
-            display: block;
-        }
-    }
-}
-
 .is-editing {
     .gl-plot.child-frame {
         &:hover {
@@ -66,11 +40,42 @@ mct-plot {
         }
     }
 }
+.c-plot {
+    $p: $mainViewPad;
+    position: absolute;
+    top: $p; right: $p; bottom: $p; left: $p;
+
+    &--stacked {
+        .l-view-section {
+            //  Make this a flex container
+            display: flex;
+            flex-flow: column nowrap;
+            .gl-plot.child-frame {
+                mct-plot {
+                    display: flex;
+                    flex: 1 1 auto;
+                    height: 100%;
+                    position: relative;
+                }
+                flex: 1 1 auto;
+                &:not(:first-child) {
+                    margin-top: $interiorMargin;
+                }
+            }
+        }
+
+        .s-status-timeconductor-unsynced .holder-plot {
+            .t-object-alert.t-alert-unsynced {
+                display: block;
+            }
+        }
+    }
+
+}
+
 
 .gl-plot {
-    color: $colorPlotFg;
     display: flex;
-    //font-size: 0.7rem;
     position: relative;
     width: 100%;
     height: 100%;
@@ -146,10 +151,10 @@ mct-plot {
     }
 
     .gl-plot-coords {
+        // This does not appear to be in use in Open MCT
         box-sizing: border-box;
         border-radius: $controlCr;
         background: black;
-        color: lighten($colorBodyFg, 30%);
         padding: 2px 5px;
         position: absolute;
         top: nth($plotDisplayArea,1) + $interiorMarginLg;
@@ -164,7 +169,6 @@ mct-plot {
 
     .gl-plot-label,
     .l-plot-label {
-        color: $colorPlotLabelFg;
         position: absolute;
         text-align: center;
 

src/styles/_legacy.scss

@@ -32,6 +32,10 @@
     display: flex;
     align-items: center;
 
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+
     &__label {
         display: inline-block;
         white-space: nowrap;

src/styles/_table.scss

@@ -78,10 +78,14 @@ div.c-table {
 
 .c-table-wrapper {
     // Wraps .c-control-bar and .c-table
-    @include abs();
-    overflow: hidden;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+
+    // Using absolute here because sizing table can't calc width properly if padding is used
+    $p: $mainViewPad;
+    position: absolute;
+    top: $p; right: $p; bottom: $p; left: $p;
 
     > .c-table {
         height: auto;
@@ -158,6 +162,12 @@ div.c-table {
     }
 }
 
+.c-lad-table-wrapper {
+    width: 100%;
+    height: 100%;
+    padding: $mainViewPad;
+}
+
 .c-lad-table {
     th, td {
         width: 33%; // Needed to prevent size jumping as values dynamically update