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.

src/plugins/comps/components/CompsView.vue

@@ -22,10 +22,10 @@
 
 <template>
   <div class="c-comps" aria-label="Derived Telemetry">
-    <section class="c-cs__current-output c-section">
+    <section class="c-section c-comps-output">
-      <div class="c-cs__content c-cs__current-output-value">
+      <div class="c-output-featured">
-        <span class="c-cs__current-output-value__label">Current Output</span>
+        <span class="c-output-featured__label">Current Output</span>
-        <span class="c-cs__current-output-value__value" aria-label="Current Output Value">
+        <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
-        <textarea
+        v-if="parameters?.length && isEditing"
-          v-if="parameters?.length && isEditing"
+        v-model="expression"
-          v-model="expression"
+        class="c-comps__expression-value"
-          class="expression-input"
+        placeholder="Enter an expression"
-          placeholder="Enter an expression"
+        @change="updateExpression"
-          @change="updateExpression"
+      ></textarea>
-        ></textarea>
+      <div v-else>
-        <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"
-        >
-          Valid Expression
-        </div>
       </div>
+      <span
+        v-if="expression && expressionOutput"
+        class="icon-alert-triangle c-comps__expression-msg --bad"
+      >
+        Invalid: {{ expressionOutput }}
+      </span>
+      <span
+        v-else-if="expression && !expressionOutput && isEditing"
+        class="c-comps__expression-msg --good"
+      >
+        Expression valid
+      </span>
     </section>
   </div>
 </template>

src/plugins/comps/components/comps.scss

@@ -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 {
+    *[class*=value] {
-      resize: vertical;
+      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;
-}

src/plugins/condition/components/ConditionSet.vue

@@ -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">
+      <div class="c-output-featured">
-        <span class="c-cs__current-output-value__label">Current Output</span>
+        <span class="c-output-featured__label">Current Output</span>
-        <span class="c-cs__current-output-value__value" aria-label="Current Output Value">
+        <span class="c-output-featured__value" aria-label="Current Output Value">
           <template v-if="currentConditionOutput">
             {{ currentConditionOutput }}
           </template>

src/plugins/condition/components/conditionals.scss

@@ -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;
   }