Merge branch 'topic-conditionals' into new-widget

src/plugins/LADTable/components/LADTable.vue

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

src/plugins/condition/components/Condition.vue

@@ -82,23 +82,27 @@
 
         <span class="c-cdef__label">Output</span>
         <span class="c-cdef__controls">
-            <select v-model="selectedOutputSelection"
+            <span class="c-cdef__control">
-                    @change="setOutputValue"
+                <select v-model="selectedOutputSelection"
-            >
+                        @change="setOutputValue"
-                <option value="">- Select Output -</option>
-                <option v-for="option in outputOptions"
-                        :key="option"
-                        :value="option"
                 >
-                    {{ initCap(option) }}
+                    <option value="">- Select Output -</option>
-                </option>
+                    <option v-for="option in outputOptions"
-            </select>
+                            :key="option"
-            <input v-if="selectedOutputSelection === outputOptions[2]"
+                            :value="option"
-                   v-model="condition.configuration.output"
+                    >
-                   class="t-condition-name-input"
+                        {{ initCap(option) }}
-                   type="text"
+                    </option>
-                   @blur="persist"
+                </select>
-            >
+            </span>
+            <span class="c-cdef__control">
+                <input v-if="selectedOutputSelection === outputOptions[2]"
+                       v-model="condition.configuration.output"
+                       class="t-condition-name-input"
+                       type="text"
+                       @blur="persist"
+                >
+            </span>
         </span>
 
         <div v-if="!condition.isDefault"

src/plugins/condition/components/Criterion.vue

@@ -45,7 +45,7 @@
                     {{ option.text }}
                 </option>
             </select>
-            <span v-if="!enumerations.length">
+            <template v-if="!enumerations.length">
                 <span v-for="(item, inputIndex) in inputCount"
                       :key="inputIndex"
                       class="c-cdef__control__inputs"
@@ -57,7 +57,7 @@
                     >
                     <span v-if="inputIndex < inputCount-1">and</span>
                 </span>
-            </span>
+            </template>
             <span v-else>
                 <span v-if="inputCount && criterion.operation"
                       class="c-cdef__control"
@@ -79,6 +79,7 @@
 
 <script>
 import { OPERATIONS } from '../utils/operations';
+import { INPUT_TYPES } from '../utils/operations';
 
 export default {
     inject: ['openmct'],
@@ -109,7 +110,8 @@ export default {
             inputCount: 0,
             rowLabel: '',
             operationFormat: '',
-            enumerations: []
+            enumerations: [],
+            inputTypes: INPUT_TYPES
         }
     },
     computed: {
@@ -125,9 +127,9 @@ export default {
             for (let i = 0; i < this.filteredOps.length; i++) {
                 if (this.criterion.operation === this.filteredOps[i].name) {
                     if (this.filteredOps[i].appliesTo.length === 1) {
-                        type = this.filteredOps[i].appliesTo[0];
+                        type = this.inputTypes[this.filteredOps[i].appliesTo[0]];
                     } else {
-                        type = 'string'
+                        type = 'text'
                     }
                     break;
                 }

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/condition/utils/operations.js

@@ -204,3 +204,8 @@ export const OPERATIONS = [
         }
     }
 ];
+
+export const INPUT_TYPES = {
+    'string': 'text',
+    'number': 'number'
+};

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -347,62 +347,6 @@ define(['lodash'], function (_) {
                     };
                 }
 
-                function getFillMenu(selectedParent, selection) {
-                    return {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: selection.filter(selectionPath => {
-                            let type = selectionPath[0].context.layoutItem.type;
-                            return type === 'text-view' ||
-                                type === 'telemetry-view' ||
-                                type === 'box-view';
-                        }),
-                        property: function (selectionPath) {
-                            return getPath(selectionPath) + ".fill";
-                        },
-                        icon: "icon-paint-bucket",
-                        title: "Set fill color"
-                    };
-                }
-
-                function getStrokeMenu(selectedParent, selection) {
-                    return {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: selection.filter(selectionPath => {
-                            let type = selectionPath[0].context.layoutItem.type;
-                            return type === 'text-view' ||
-                                type === 'telemetry-view' ||
-                                type === 'box-view' ||
-                                type === 'image-view' ||
-                                type === 'line-view';
-                        }),
-                        property: function (selectionPath) {
-                            return getPath(selectionPath) + ".stroke";
-                        },
-                        icon: "icon-line-horz",
-                        title: "Set border color"
-                    };
-                }
-
-                function getTextColorMenu(selectedParent, selection) {
-                    return {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: selection.filter(selectionPath => {
-                            let type = selectionPath[0].context.layoutItem.type;
-                            return type === 'text-view' || type === 'telemetry-view';
-                        }),
-                        property: function (selectionPath) {
-                            return getPath(selectionPath) + ".color";
-                        },
-                        icon: "icon-font",
-                        mandatory: true,
-                        title: "Set text color",
-                        preventNone: true
-                    };
-                }
-
                 function getURLButton(selectedParent, selection) {
                     return {
                         control: "button",
@@ -429,7 +373,7 @@ define(['lodash'], function (_) {
                         property: function (selectionPath) {
                             return getPath(selectionPath);
                         },
-                        icon: "icon-gear",
+                        icon: "icon-font",
                         title: "Edit text properties",
                         dialog: DIALOG_FORM.text
                     };
@@ -505,14 +449,14 @@ define(['lodash'], function (_) {
 
                 let toolbar = {
                     'add-menu': [],
+                    'text': [],
+                    'url': [],
                     'toggle-frame': [],
                     'display-mode': [],
                     'telemetry-value': [],
                     'style': [],
                     'text-style': [],
                     'position': [],
-                    'text': [],
-                    'url': [],
                     'remove': []
                 };
 
@@ -546,15 +490,8 @@ define(['lodash'], function (_) {
                         if (toolbar['telemetry-value'].length === 0) {
                             toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
                         }
-                        if (toolbar.style.length < 2) {
-                            toolbar.style = [
-                                getFillMenu(selectedParent, selectedObjects),
-                                getStrokeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar['text-style'].length === 0) {
                             toolbar['text-style'] = [
-                                getTextColorMenu(selectedParent, selectedObjects),
                                 getTextSizeMenu(selectedParent, selectedObjects)
                             ];
                         }
@@ -571,15 +508,8 @@ define(['lodash'], function (_) {
                             toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'text-view') {
-                        if (toolbar.style.length < 2) {
-                            toolbar.style = [
-                                getFillMenu(selectedParent, selectedObjects),
-                                getStrokeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar['text-style'].length === 0) {
                             toolbar['text-style'] = [
-                                getTextColorMenu(selectedParent, selectedObjects),
                                 getTextSizeMenu(selectedParent, selectedObjects)
                             ];
                         }
@@ -599,12 +529,6 @@ define(['lodash'], function (_) {
                             toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'box-view') {
-                        if (toolbar.style.length < 2) {
-                            toolbar.style = [
-                                getFillMenu(selectedParent, selectedObjects),
-                                getStrokeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar.position.length === 0) {
                             toolbar.position = [
                                 getStackOrder(selectedParent, selectionPath),
@@ -618,11 +542,6 @@ define(['lodash'], function (_) {
                             toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'image-view') {
-                        if (toolbar.style.length === 0) {
-                            toolbar.style = [
-                                getStrokeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar.position.length === 0) {
                             toolbar.position = [
                                 getStackOrder(selectedParent, selectionPath),
@@ -639,11 +558,6 @@ define(['lodash'], function (_) {
                             toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'line-view') {
-                        if (toolbar.style.length === 0) {
-                            toolbar.style = [
-                                getStrokeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar.position.length === 0) {
                             toolbar.position = [
                                 getStackOrder(selectedParent, selectionPath),

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/plugins/telemetryTable/components/table.scss

@@ -21,10 +21,6 @@
         vertical-align: middle; // This is crucial to hiding 4px height injected by browser by default
     }
 
-    td {
-        color: $colorTelemFresh;
-    }
-
     /******************************* WRAPPERS */
     &__headers-w {
         // Wraps __headers table

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/_controls.scss

@@ -359,7 +359,7 @@ select {
     background-position: right .4em top 80%, 0 0;
     border: none;
     border-radius: $controlCr;
-    padding: 1px 20px 1px $interiorMargin;
+    padding: 2px 20px 2px $interiorMargin;
 
     *,
     option {

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

src/ui/layout/mct-tree.scss

@@ -92,32 +92,15 @@
 
         // Object labels in trees
         &__label {
-            // <a> tag that holds type icon and name.
-            // Draggable element.
-            /*border-radius: $controlCr;
-            display: flex;
-            align-items: center;
             flex: 1 1 auto;
-            overflow: hidden;
-            padding: $aPad;
-            white-space: nowrap;*/
         }
 
         &__name {
-           // @include ellipsize();
-           // display: inline;
             color: $colorItemTreeFg;
-          //  width: 100%;
         }
 
         &__type-icon {
-            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
-           // display: block;
-         //   flex: 0 0 auto;
-          //  font-size: 1.3em;
-          //  margin-right: $interiorMarginSm;
             color: $colorItemTreeIcon;
-          //  width: $treeTypeIconW;
         }
 
         &.is-alias {