Style enhancements for Derived Telemetry object

- Closes #7823
- Significant mods for style and CSS classing. Still WIP, more coming.

src/plugins/comps/components/CompsView.vue

@@ -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>
@@ -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
@@ -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"
@@ -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');
@@ -151,7 +150,10 @@ const outputFormat = ref(null);
 let outputTelemetryCollection;
 
 defineProps({
-  isEditing: { type: Boolean, required: true }
+  isEditing: {
+    type: Boolean,
+    required: true
+  }
 });
 
 onBeforeMount(async () => {
@@ -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;

src/plugins/comps/components/comps.scss

@@ -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 {
+
+  }
+
+  &__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
+
+    //&__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 {
   width: 100%;
   margin-right: 10px;

src/styles/_constants-espresso.scss

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

src/styles/_controls.scss

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