Skip to content

Commit

Permalink
Style enhancements for Derived Telemetry object
Browse files Browse the repository at this point in the history 
- Closes #7823
- Significant mods for style and CSS classing. Still WIP, more coming.
  • Loading branch information
@charlesh88
charlesh88 committed Sep 5, 2024
1 parent 2793da4 commit 1d686c2
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 66 deletions.
92 changes: 47 additions & 45 deletions src/plugins/comps/components/CompsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
-->

<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">
<div class="c-cs__content c-cs__current-output-value">
<span class="c-cs__current-output-value__label">Current Output</span>
Expand All @@ -36,43 +36,34 @@
</span>
</div>
</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-label c-section__label">Telemetry References</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">
<input type="checkbox" :checked="testDataApplied" @change="toggleTestData" />
<span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span>
<span class="c-toggle-switch__label">Apply Test Values</span>
</label>
</div>
<div class="c-cs__content">
<div class="hint" :class="{ 's-status-icon-warning-lo': !parameters?.length && isEditing }">
<div v-for="parameter in parameters" :key="parameter.name" class="telemery-reference">
Reference
<input
v-if="isEditing"
v-model="parameter.name"
class="telemery-reference-variable-input"
/>
<div v-else>&nbsp;{{ parameter.name }}</div>
<div class="c-comps__refs">
<div v-for="parameter in parameters" :key="parameter.name" class="c-comps__ref">
<span class="c-test-datum__string">Reference</span>
<input v-if="isEditing" v-model="parameter.name" type="text" class="c-input--md" />
<div v-else class="--em">{{ parameter.name }}</div>
<span class="c-test-datum__string">=</span>
<span class="c-comps__path-and-field">
<ObjectPath
: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 -->
<select v-if="isEditing" v-model="parameter.valueToUse" @change="updateParameters">
<option
Expand All @@ -85,28 +76,36 @@
{{ parameterValueOption.name }}
</option>
</select>
<div v-else>&nbsp;{{ parameter.valueToUse }}</div>
<input
v-if="isEditing"
v-model="parameter.testValue"
class="telemery-reference-variable-input"
@change="updateParameters"
/>
<div v-else>&nbsp;{{ parameter.testValue }}</div>
</div>
<template v-if="!parameters?.length && isEditing"
>Drag telemetry into Telemetry References to add variables for an expression</template
>
<div v-else>{{ parameter.valueToUse }}</div>
</span>
<span v-if="isEditing" class="c-test-datum__string">Test value</span>
<input
v-if="isEditing"
v-model="parameter.testValue"
type="text"
class="c-input--md"
@change="updateParameters"
/>
</div>
</div>
</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-label c-section__label">Expression</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">
<textarea
v-if="isEditing"
v-if="parameters?.length && isEditing"
v-model="expression"
class="expression-input"
placeholder="Enter an expression"
Expand All @@ -133,7 +132,7 @@
import { evaluate } from 'mathjs';
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';
const openmct = inject('openmct');
Expand All @@ -151,7 +150,10 @@ const outputFormat = ref(null);
let outputTelemetryCollection;
defineProps({
isEditing: { type: Boolean, required: true }
isEditing: {
type: Boolean,
required: true
}
});
onBeforeMount(async () => {
Expand Down Expand Up @@ -186,9 +188,9 @@ function updateParameters() {
applyTestData();
}
function getIconForType(telemetryObject) {
return openmct.types.get(telemetryObject.type).definition.cssClass;
}
// function getIconForType(telemetryObject) {
// return openmct.types.get(telemetryObject.type).definition.cssClass;
// }
function toggleTestData() {
testDataApplied.value = !testDataApplied.value;
Expand Down
74 changes: 54 additions & 20 deletions src/plugins/comps/components/comps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,66 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.c-comps {
.is-editing & {
padding: $interiorMargin;
}

.telemery-reference {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
align-items: left;
padding-bottom: 10px;
padding-top: 10px;
}
&__refs-and-controls {

.parametery-telemetry {
display: flex;
flex-direction: row;
}
}

.expression-input {
width: 100%;
margin-right: 10px;
}
&__section,
&__refs {
display: flex;
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

.telemery-reference-variable-input {
background-color: $colorBodyBg;
color: white;
//&__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;
}
}


/************************************ OLD */
.c-expression-output-good {
width: 100%;
margin-right: 10px;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/_constants-espresso.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ $colorInspectorBg: $colorBodyBg;
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: $colorBodyFgSubtle;
$colorInspectorPropVal: $colorBodyFgEm;
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 10%);
$colorInspectorSectionHeaderFg: #bfbfbf;

// Tabs
Expand Down
5 changes: 5 additions & 0 deletions src/styles/_controls.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,6 +417,11 @@ textarea {
width: 40px;
}

&--md {
// Smallish inputs, like numerics or short text
width: 80px;
}

&--autocomplete {
&__wrapper {
display: flex;
Expand Down

0 comments on commit 1d686c2

Please sign in to comment.