mirror of
https://github.com/nasa/openmct.git
synced 2024-12-30 09:58:52 +00:00
Merge pull request #2782 from nasa/conditionals-ch-fixes-032420
Misc Conditionals fixes
This commit is contained in:
Charles Hacskaylo
GitHub
commit
a1f2608e7c
@ -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>
|
||||
|
||||
@ -82,23 +82,27 @@
|
||||
|
||||
<span class="c-cdef__label">Output</span>
|
||||
<span class="c-cdef__controls">
|
||||
<select v-model="selectedOutputSelection"
|
||||
@change="setOutputValue"
|
||||
>
|
||||
<option value="">- Select Output -</option>
|
||||
<option v-for="option in outputOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
<span class="c-cdef__control">
|
||||
<select v-model="selectedOutputSelection"
|
||||
@change="setOutputValue"
|
||||
>
|
||||
{{ initCap(option) }}
|
||||
</option>
|
||||
</select>
|
||||
<input v-if="selectedOutputSelection === outputOptions[2]"
|
||||
v-model="condition.configuration.output"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
@blur="persist"
|
||||
>
|
||||
<option value="">- Select Output -</option>
|
||||
<option v-for="option in outputOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ initCap(option) }}
|
||||
</option>
|
||||
</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"
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -204,3 +204,8 @@ export const OPERATIONS = [
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export const INPUT_TYPES = {
|
||||
'string': 'text',
|
||||
'number': 'number'
|
||||
};
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -44,6 +44,7 @@ $overlayOuterMarginLg: 5%;
|
||||
$overlayOuterMarginFullscreen: 0%;
|
||||
$overlayOuterMarginDialog: 20%;
|
||||
$overlayInnerMargin: 25px;
|
||||
$mainViewPad: 2px;
|
||||
/*************** Items */
|
||||
$itemPadLR: 5px;
|
||||
$gridItemDesk: 175px;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -32,6 +32,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user