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
         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
+      <span
-          v-else-if="expression && !expressionOutput && isEditing"
+        v-if="expression && expressionOutput"
-          class="c-expression-output-good"
+        class="icon-alert-triangle c-comps__expression-msg --bad"
       >
-          Valid Expression
+        Invalid: {{ expressionOutput }}
-        </div>
+      </span>
-      </div>
+      <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;
   }
 

src/styles/_controls.scss

@@ -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;
+        gap: $interiorMarginSm;
-
+        //margin-bottom: $interiorMargin;
-    > * + * {
+        //
-      margin-left: $interiorMarginSm;
+        //> * + * {
-    }
+        //    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:
+    background-position: right 0.4em top 80%,
-    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;