ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-15 13:48:12 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Style enhancements for Derived Telemetry object

Browse Source 
- Closes #7823
- Significant mods for style and CSS classing. Still WIP, more coming.
This commit is contained in:
Charles Hacskaylo
2024-09-04 17:33:36 -07:00
parent 2793da40ec
commit 1d686c2926
4 changed files with 109 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/plugins/comps/components/CompsView.vue
View File

@ -21,7 +21,7 @@
--> -->
<template> <template>
<div class="c-cs" aria-label="Derived Telemetry"> <div class="c-comps" aria-label="Derived Telemetry">
<section class="c-cs__current-output c-section"> <section class="c-cs__current-output c-section">
<div class="c-cs__content c-cs__current-output-value"> <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__label">Current Output</span>
@ -36,43 +36,34 @@
</span> </span>
</div> </div>
</section> </section>
<section id="telemetryReferenceSection" aria-label="Derived Telemetry References"> <section
id="telemetryReferenceSection"
class="c-comps__section c-comps__refs-and-controls"
aria-label="Derived Telemetry References"
>
<div class="c-cs__header c-section__header"> <div class="c-cs__header c-section__header">
<div class="c-cs__header-label c-section__label">Telemetry References</div> <div class="c-cs__header-label c-section__label">Telemetry References</div>
</div> </div>
<div
:class="['c-cs__test-data__controls c-cdef__controls', { disabled: !parameters?.length }]" <div :class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]">
>
<label v-if="isEditing" class="c-toggle-switch"> <label v-if="isEditing" class="c-toggle-switch">
<input type="checkbox" :checked="testDataApplied" @change="toggleTestData" /> <input type="checkbox" :checked="testDataApplied" @change="toggleTestData" />
<span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span> <span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span>
<span class="c-toggle-switch__label">Apply Test Values</span> <span class="c-toggle-switch__label">Apply Test Values</span>
</label> </label>
</div> </div>
<div class="c-cs__content"> <div class="c-comps__refs">
<div class="hint" :class="{ 's-status-icon-warning-lo': !parameters?.length && isEditing }"> <div v-for="parameter in parameters" :key="parameter.name" class="c-comps__ref">
<div v-for="parameter in parameters" :key="parameter.name" class="telemery-reference"> <span class="c-test-datum__string">Reference</span>
Reference <input v-if="isEditing" v-model="parameter.name" type="text" class="c-input--md" />
<input <div v-else class="--em">{{ parameter.name }}</div>
v-if="isEditing" <span class="c-test-datum__string">=</span>
v-model="parameter.name" <span class="c-comps__path-and-field">
class="telemery-reference-variable-input"
/>
<div v-else>&nbsp;{{ parameter.name }}</div>
<ObjectPath <ObjectPath
:domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)" :domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
:show-object-itself="true"
class="--em"
/> />
<div class="parametery-telemetry">
<div
class="parameter-telemetry-icon"
:class="
getIconForType(compsManager.getTelemetryObjectForParameter(parameter.keyString))
"
/>
<div class="parametery-telemetry-name">
{{ compsManager.getTelemetryObjectForParameter(parameter.keyString)?.name }}
</div>
</div>
<!-- drop down to select value from telemetry --> <!-- drop down to select value from telemetry -->
<select v-if="isEditing" v-model="parameter.valueToUse" @change="updateParameters"> <select v-if="isEditing" v-model="parameter.valueToUse" @change="updateParameters">
<option <option
@ -85,28 +76,36 @@
{{ parameterValueOption.name }} {{ parameterValueOption.name }}
</option> </option>
</select> </select>
<div v-else>&nbsp;{{ parameter.valueToUse }}</div> <div v-else>{{ parameter.valueToUse }}</div>
<input </span>
v-if="isEditing"
v-model="parameter.testValue" <span v-if="isEditing" class="c-test-datum__string">Test value</span>
class="telemery-reference-variable-input" <input
@change="updateParameters" v-if="isEditing"
/> v-model="parameter.testValue"
<div v-else>&nbsp;{{ parameter.testValue }}</div> type="text"
</div> class="c-input--md"
<template v-if="!parameters?.length && isEditing" @change="updateParameters"
>Drag telemetry into Telemetry References to add variables for an expression</template />
>
</div> </div>
</div> </div>
</section> </section>
<section id="expressionSection" aria-label="Derived Telemetry Expression"> <section
id="expressionSection"
aria-label="Derived Telemetry Expression"
class="c-comps__section c-comps__expression"
>
<div class="c-cs__header c-section__header"> <div class="c-cs__header c-section__header">
<div class="c-cs__header-label c-section__label">Expression</div> <div class="c-cs__header-label c-section__label">Expression</div>
</div> </div>
<div v-if="!parameters?.length && isEditing" class="hint">
Drag in telemetry to add references for an expression.
</div>
<div class="c-cs__content"> <div class="c-cs__content">
<textarea <textarea
v-if="isEditing" v-if="parameters?.length && isEditing"
v-model="expression" v-model="expression"
class="expression-input" class="expression-input"
placeholder="Enter an expression" placeholder="Enter an expression"
@ -133,7 +132,7 @@
import { evaluate } from 'mathjs'; import { evaluate } from 'mathjs';
import { inject, onBeforeMount, onBeforeUnmount, ref } from 'vue'; import { inject, onBeforeMount, onBeforeUnmount, ref } from 'vue';
import ObjectPath from '../../../ui/components/ObjectPath.vue'; import ObjectPath from '../../../ui/components/ObjectPathString.vue';
import CompsManager from '../CompsManager'; import CompsManager from '../CompsManager';
const openmct = inject('openmct'); const openmct = inject('openmct');
@ -151,7 +150,10 @@ const outputFormat = ref(null);
let outputTelemetryCollection; let outputTelemetryCollection;
defineProps({ defineProps({
isEditing: { type: Boolean, required: true } isEditing: {
type: Boolean,
required: true
}
}); });
onBeforeMount(async () => { onBeforeMount(async () => {
@ -186,9 +188,9 @@ function updateParameters() {
applyTestData(); applyTestData();
} }
function getIconForType(telemetryObject) { // function getIconForType(telemetryObject) {
return openmct.types.get(telemetryObject.type).definition.cssClass; // return openmct.types.get(telemetryObject.type).definition.cssClass;
} // }
function toggleTestData() { function toggleTestData() {
testDataApplied.value = !testDataApplied.value; testDataApplied.value = !testDataApplied.value;

78
src/plugins/comps/components/comps.scss
View File

@ -19,32 +19,66 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.c-comps {
.is-editing & {
padding: $interiorMargin;
}
.telemery-reference { &__refs-and-controls {
display: flex;
flex-direction: row; }
flex-wrap: wrap;
justify-content: start; &__section,
align-items: left; &__refs {
padding-bottom: 10px; display: flex;
padding-top: 10px; flex-direction: column;
gap: $interiorMarginSm;
}
&__ref {
@include discreteItem();
display: grid;
gap: $interiorMargin;
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 {
align-items: start;
display: flex;
gap: $interiorMargin;
}
&__expression {
textarea {
resize: vertical;
}
}
.--em {
color: $colorBodyFgEm;
//font-weight: bold;
}
} }
.parametery-telemetry {
display: flex;
flex-direction: row;
}
.expression-input {
width: 100%;
margin-right: 10px;
}
.telemery-reference-variable-input {
background-color: $colorBodyBg;
color: white;
}
/************************************ OLD */
.c-expression-output-good { .c-expression-output-good {
width: 100%; width: 100%;
margin-right: 10px; margin-right: 10px;

2
src/styles/_constants-espresso.scss
View File

@ -356,7 +356,7 @@ $colorInspectorBg: $colorBodyBg;
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: $colorBodyFgSubtle; $colorInspectorPropName: $colorBodyFgSubtle;
$colorInspectorPropVal: $colorBodyFgEm; $colorInspectorPropVal: $colorBodyFgEm;
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 10%);
$colorInspectorSectionHeaderFg: #bfbfbf; $colorInspectorSectionHeaderFg: #bfbfbf;
// Tabs // Tabs

5
src/styles/_controls.scss
View File

@ -417,6 +417,11 @@ textarea {
width: 40px; width: 40px;
} }
&--md {
// Smallish inputs, like numerics or short text
width: 80px;
}
&--autocomplete { &--autocomplete {
&__wrapper { &__wrapper {
display: flex; display: flex;