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,7 +21,8 @@
  *****************************************************************************/
 
 <template>
-<table class="c-table c-lad-table">
+<div class="c-lad-table-wrapper">
+    <table class="c-table c-lad-table">
         <thead>
             <tr>
                 <th>Name</th>
@@ -36,7 +37,8 @@
                 :domain-object="item.domainObject"
             />
         </tbody>
-</table>
+    </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"
+<div ng-controller="PlotController as controller"
-    class="abs holder holder-plot has-control-bar">
+    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"
+<div ng-controller="StackedPlotController as stackedPlot"
-      class="abs holder holder-plot has-control-bar t-plot-stacked">
+      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,7 +25,27 @@ mct-plot {
 }
 
 /*********************** STACKED PLOT LAYOUT */
-.t-plot-stacked {
+.is-editing {
+    .gl-plot.child-frame {
+        &:hover {
+            background: rgba($editUIColorBg, 0.1);
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+        }
+
+        &[s-selected] {
+            border: 1px solid $editUIColorFg !important;
+            color: $editUIColorFg !important;
+            box-shadow: $editFrameSelectedShdw;
+            z-index: 2;
+        }
+    }
+}
+.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;
@@ -49,28 +69,13 @@ mct-plot {
                 display: block;
             }
         }
-}
-
-.is-editing {
-    .gl-plot.child-frame {
-        &:hover {
-            background: rgba($editUIColorBg, 0.1);
-            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
     }
 
-        &[s-selected] {
-            border: 1px solid $editUIColorFg !important;
-            color: $editUIColorFg !important;
-            box-shadow: $editFrameSelectedShdw;
-            z-index: 2;
-        }
-    }
 }
 
+
 .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