mirror of
https://github.com/nasa/openmct.git
synced 2025-06-06 09:21:43 +00:00
Enhancements for Derived Telemetry object
- Closes #7823 - Final sanding and polishing. - New discrete item style `c-output-featured` added to controls.scss - Applied to 'Current Output' section of both Derived Telemetry and Condition Sets. - TODOs: - [ ] Check for low-risk regressions in Condition Sets browse and edit modes. - [ ] New tests for ObjectPathString.vue component.
This commit is contained in:
Charles Hacskaylo
parent
1615c36b7e
commit
59461d6b06
@ -22,10 +22,10 @@
|
||||
|
||||
<template>
|
||||
<div class="c-comps" aria-label="Derived Telemetry">
|
||||
<section class="c-cs__current-output c-section">
|
||||
<div class="c-cs__content c-cs__current-output-value">
|
||||
<span class="c-cs__current-output-value__label">Current Output</span>
|
||||
<span class="c-cs__current-output-value__value" aria-label="Current Output Value">
|
||||
<section class="c-section c-comps-output">
|
||||
<div class="c-output-featured">
|
||||
<span class="c-output-featured__label">Current Output</span>
|
||||
<span class="c-output-featured__value" aria-label="Current Output Value">
|
||||
<template
|
||||
v-if="testDataApplied && currentTestOutput !== undefined && currentTestOutput !== null"
|
||||
>
|
||||
@ -115,27 +115,30 @@
|
||||
Drag in telemetry to add references for an expression.
|
||||
</div>
|
||||
|
||||
<div class="c-cs__content">
|
||||
<textarea
|
||||
v-if="parameters?.length && isEditing"
|
||||
v-model="expression"
|
||||
class="expression-input"
|
||||
class="c-comps__expression-value"
|
||||
placeholder="Enter an expression"
|
||||
@change="updateExpression"
|
||||
></textarea>
|
||||
<div v-else>
|
||||
<div class="c-comps__expression-value">
|
||||
{{ expression }}
|
||||
</div>
|
||||
<div v-if="expression && expressionOutput && isEditing" class="c-expression-output-bad">
|
||||
{{ expressionOutput }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="expression && !expressionOutput && isEditing"
|
||||
class="c-expression-output-good"
|
||||
<span
|
||||
v-if="expression && expressionOutput"
|
||||
class="icon-alert-triangle c-comps__expression-msg --bad"
|
||||
>
|
||||
Valid Expression
|
||||
</div>
|
||||
</div>
|
||||
Invalid: {{ expressionOutput }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="expression && !expressionOutput && isEditing"
|
||||
class="c-comps__expression-msg --good"
|
||||
>
|
||||
Expression valid
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -19,13 +19,34 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@mixin expressionMsg($fg, $bg) {
|
||||
$op: 0.4;
|
||||
color: rgba($fg, $op * 1.5);
|
||||
background: rgba($bg, $op);
|
||||
}
|
||||
|
||||
.c-comps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $interiorMarginLg;
|
||||
|
||||
.is-editing & {
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
&__refs-and-controls {
|
||||
&__output {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: $interiorMargin;
|
||||
|
||||
&-label {
|
||||
flex: 0 0 auto;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-value {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__section,
|
||||
@ -42,20 +63,6 @@
|
||||
grid-template-columns: max-content max-content min-content 1fr;
|
||||
padding: $interiorMargin;
|
||||
line-height: 170%; // Aligns text with controls like selects
|
||||
|
||||
//&__definition,
|
||||
//&__test-value {
|
||||
// display: flex;
|
||||
// align-items: flex-start;
|
||||
// gap: $interiorMargin;
|
||||
//}
|
||||
//
|
||||
//&__definition {
|
||||
//}
|
||||
//
|
||||
//&__test-value {
|
||||
//
|
||||
//}
|
||||
}
|
||||
|
||||
&__path-and-field {
|
||||
@ -65,10 +72,37 @@
|
||||
}
|
||||
|
||||
&__expression {
|
||||
textarea {
|
||||
resize: vertical;
|
||||
*[class*=value] {
|
||||
font-family: monospace;
|
||||
//font-size: 1.1em;
|
||||
resize: vertical; // Only applies to textarea
|
||||
}
|
||||
div[class*=value] {
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__expression-msg {
|
||||
@include expressionMsg($colorOkFg, $colorOk);
|
||||
border-radius: $basicCr;
|
||||
display: flex; // Creates hanging indent from :before icon
|
||||
padding: $interiorMarginSm $interiorMarginLg $interiorMarginSm $interiorMargin;
|
||||
//text-wrap: normal;
|
||||
max-width: max-content;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-check;
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.--bad {
|
||||
@include expressionMsg($colorErrorFg, $colorError);
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-alert-triangle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.--em {
|
||||
@ -76,17 +110,3 @@
|
||||
//font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************************ OLD */
|
||||
.c-expression-output-good {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.c-expression-output-bad {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
<template>
|
||||
<div class="c-cs" :class="{ 'is-stale': isStale }" aria-label="Condition Set">
|
||||
<section class="c-cs__current-output c-section">
|
||||
<div class="c-cs__content c-cs__current-output-value">
|
||||
<span class="c-cs__current-output-value__label">Current Output</span>
|
||||
<span class="c-cs__current-output-value__value" aria-label="Current Output Value">
|
||||
<div class="c-output-featured">
|
||||
<span class="c-output-featured__label">Current Output</span>
|
||||
<span class="c-output-featured__value" aria-label="Current Output Value">
|
||||
<template v-if="currentConditionOutput">
|
||||
{{ currentConditionOutput }}
|
||||
</template>
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
gap: $interiorMargin;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@ -89,23 +90,24 @@
|
||||
&__conditions {
|
||||
flex: 1 1 auto;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
//> * + * {
|
||||
// margin-top: $interiorMarginSm;
|
||||
//}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $interiorMarginSm;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
+ * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
//+ * {
|
||||
// margin-top: $interiorMarginSm;
|
||||
//}
|
||||
}
|
||||
|
||||
.c-button {
|
||||
@ -121,6 +123,7 @@
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $interiorMargin;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -154,6 +154,7 @@ button {
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: transform $transOutTime;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-down;
|
||||
font-family: symbolsfont;
|
||||
@ -268,6 +269,7 @@ button {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
/********* Disclosure Triangle */
|
||||
// Provides an arrow icon that when clicked expands an element to reveal its contents.
|
||||
// Used in tree items, plot legends. Always placed BEFORE an element.
|
||||
@ -322,8 +324,9 @@ button {
|
||||
section {
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
+ section {
|
||||
margin-top: $interiorMargin;
|
||||
//margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
.c-section__header {
|
||||
@ -331,11 +334,12 @@ section {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
margin-bottom: $interiorMargin;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
gap: $interiorMarginSm;
|
||||
//margin-bottom: $interiorMargin;
|
||||
//
|
||||
//> * + * {
|
||||
// margin-left: $interiorMarginSm;
|
||||
//}
|
||||
}
|
||||
|
||||
> [class*='__label'] {
|
||||
@ -359,6 +363,7 @@ input[type='password'],
|
||||
input[type='date'],
|
||||
textarea {
|
||||
@include reactive-input();
|
||||
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
@ -475,6 +480,7 @@ input[type='number'].c-input-number--no-spinners {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -505,8 +511,7 @@ select {
|
||||
color: $colorSelectFg;
|
||||
box-shadow: $shdwSelect;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position:
|
||||
right 0.4em top 80%,
|
||||
background-position: right 0.4em top 80%,
|
||||
0 0;
|
||||
border: none;
|
||||
border-radius: $controlCr;
|
||||
@ -937,6 +942,7 @@ select {
|
||||
|
||||
.c-labeled-input {
|
||||
font-size: 0.9em;
|
||||
|
||||
input[type='number'] {
|
||||
width: 40px; // Number input sucks and must have size set using this method
|
||||
}
|
||||
@ -1054,6 +1060,7 @@ select {
|
||||
/******************************************************** SLIDERS */
|
||||
.c-slider {
|
||||
@include cControl();
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
@ -1096,10 +1103,12 @@ input[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
@include sliderKnobRound($knobH);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
@include sliderKnobRound($knobH);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
border: none;
|
||||
@include sliderKnobRound($knobH);
|
||||
@ -1209,6 +1218,34 @@ input[type='range'] {
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** DISCRETE ITEMS */
|
||||
// OUTPUT
|
||||
// Element that showcases an output value. Used in Condition Sets and Derived Telemetry
|
||||
|
||||
.c-output-featured {
|
||||
display: flex;
|
||||
gap: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
|
||||
> * {
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 0 0 auto;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__value {
|
||||
$p: $interiorMargin * 2;
|
||||
//font-size: 1.25em;
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
background: rgba(black, 0.2);
|
||||
border-radius: $basicCr;
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** LEGACY */
|
||||
.l-btn-set {
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user