Release 2.0.5 UI and Gauge fixes (#5470)

* Various UI fixes
- Tweak to Gauge properties form for clarity and usability.
- Fix Gauge 'dial' type not obeying "Show units" property setting, closes #5325.
- Tweaks to Operator Status UI label and layout for clarity.
- Changed name and description of Graph object for clarity and consistency.
- Fixed CSS classing that was coloring Export menu items text incorrectly.
- Fixed icon-to-text vertical alignment in `.c-object-label`.
- Fix for broken layout in imagery local controls (brightness, layers, magnification).

Co-authored-by: Andrew Henry <akhenry@gmail.com>

example/exampleUser/ExampleUserProvider.js

@@ -31,7 +31,7 @@ const STATUSES = [{
     iconClassPoll: "icon-status-poll-question-mark"
 }, {
     key: "GO",
-    label: "GO",
+    label: "Go",
     iconClass: "icon-check",
     iconClassPoll: "icon-status-poll-question-mark",
     statusClass: "s-status-ok",
@@ -39,7 +39,7 @@ const STATUSES = [{
     statusFgColor: "#000"
 }, {
     key: "MAYBE",
-    label: "MAYBE",
+    label: "Maybe",
     iconClass: "icon-alert-triangle",
     iconClassPoll: "icon-status-poll-question-mark",
     statusClass: "s-status-warning",
@@ -47,7 +47,7 @@ const STATUSES = [{
     statusFgColor: "#000"
 }, {
     key: "NO_GO",
-    label: "NO GO",
+    label: "No go",
     iconClass: "icon-circle-slash",
     iconClassPoll: "icon-status-poll-question-mark",
     statusClass: "s-status-error",

src/plugins/charts/bar/plugin.js

@@ -28,9 +28,9 @@ export default function () {
     return function install(openmct) {
         openmct.types.addType(BAR_GRAPH_KEY, {
             key: BAR_GRAPH_KEY,
-            name: "Graph (Bar or Line)",
+            name: "Graph",
             cssClass: "icon-bar-chart",
-            description: "View data as a bar graph. Can be added to Display Layouts.",
+            description: "Visualize data as a bar or line graph.",
             creatable: true,
             initialize: function (domainObject) {
                 domainObject.composition = [];

src/plugins/gauge/components/Gauge.vue

@@ -169,6 +169,7 @@
             </g>
             <g class="c-dial__text">
                 <text
+                    v-if="displayUnits"
                     x="50%"
                     y="70%"
                     text-anchor="middle"

src/plugins/gauge/components/GaugeFormController.vue

@@ -40,7 +40,7 @@
             <div class="c-form__row">
                 <span class="req-indicator req">
                 </span>
-                <label>Range minimum value</label>
+                <label>Minimum value</label>
                 <input
                     ref="min"
                     v-model.number="min"
@@ -53,7 +53,7 @@
             <div class="c-form__row">
                 <span class="req-indicator">
                 </span>
-                <label>Range low limit</label>
+                <label>Low limit</label>
                 <input
                     ref="limitLow"
                     v-model.number="limitLow"
@@ -64,26 +64,26 @@
             </div>
 
             <div class="c-form__row">
-                <span class="req-indicator req">
+                <span class="req-indicator">
                 </span>
-                <label>Range maximum value</label>
+                <label>High limit</label>
                 <input
-                    ref="max"
-                    v-model.number="max"
-                    data-field-name="max"
+                    ref="limitHigh"
+                    v-model.number="limitHigh"
+                    data-field-name="limitHigh"
                     type="number"
                     @input="onChange"
                 >
             </div>
 
             <div class="c-form__row">
-                <span class="req-indicator">
+                <span class="req-indicator req">
                 </span>
-                <label>Range high limit</label>
+                <label>Maximum value</label>
                 <input
-                    ref="limitHigh"
-                    v-model.number="limitHigh"
-                    data-field-name="limitHigh"
+                    ref="max"
+                    v-model.number="max"
+                    data-field-name="max"
                     type="number"
                     @input="onChange"
                 >

src/plugins/imagery/components/imagery-view.scss

@@ -210,9 +210,10 @@
         border-radius: $controlCr;
         display: flex;
         align-items: flex-start;
+        flex-direction: row;
         justify-content: space-between;
         padding: $interiorMargin;
-        width: min-content;
+        width: max-content;
 
         > * + * {
             margin-left: $interiorMargin;
@@ -338,7 +339,6 @@
     &__input {
         display: flex;
         align-items: center;
-        width: 100%;
 
         &:before {
             color: rgba($colorMenuFg, 0.5);
@@ -353,13 +353,16 @@
 
     &--filters {
         // Styles specific to the brightness and contrast controls
-
         .c-image-controls {
+            &__controls {
+                width: 80px; // About the minimum this element can be; cannot size based on % due to markup structure
+            }
+
             &__sliders {
                 display: flex;
                 flex: 1 1 auto;
                 flex-direction: column;
-                min-width: 80px;
+                width: 100%;
 
                 > * + * {
                     margin-top: 11px;

src/plugins/operatorStatus/operator-status.scss

@@ -80,7 +80,7 @@
     &__content {
         $m: $interiorMargin;
         display: grid;
-        grid-template-columns: min-content 1fr;
+        grid-template-columns: max-content 1fr;
         grid-column-gap: $m;
         grid-row-gap: $m;
 

src/plugins/operatorStatus/pollQuestion/PollQuestion.vue

@@ -34,7 +34,7 @@
 
     <div class="c-status-poll__section c-status-poll-panel__content c-spq">
         <!-- Grid layout -->
-        <div class="c-spq__label">Current:</div>
+        <div class="c-spq__label">Current poll:</div>
         <div class="c-spq__value c-status-poll-panel__poll-question">{{ currentPollQuestion }}</div>
 
         <template v-if="statusCountViewModel.length > 0">
@@ -43,6 +43,7 @@
                 <div
                     v-for="entry in statusCountViewModel"
                     :key="entry.status.key"
+                    :title="entry.status.label"
                     class="c-status-poll-report__count"
                     :style="[{
                         background: entry.status.statusBgColor,
@@ -69,6 +70,7 @@
             >
             <button
                 class="c-button"
+                title="Publish a new poll question and reset previous responses"
                 @click="updatePollQuestion"
             >Update</button>
         </div>

src/plugins/plot/actions/ViewActions.js

@@ -25,7 +25,7 @@ const exportPNG = {
     name: 'Export as PNG',
     key: 'export-as-png',
     description: 'Export This View\'s Data as PNG',
-    cssClass: 'c-icon-button icon-download',
+    cssClass: 'icon-download',
     group: 'view',
     invoke(objectPath, view) {
         view.getViewContext().exportPNG();
@@ -36,7 +36,7 @@ const exportJPG = {
     name: 'Export as JPG',
     key: 'export-as-jpg',
     description: 'Export This View\'s Data as JPG',
-    cssClass: 'c-icon-button icon-download',
+    cssClass: 'icon-download',
     group: 'view',
     invoke(objectPath, view) {
         view.getViewContext().exportJPG();

src/ui/components/object-label.scss

@@ -2,7 +2,7 @@
     // <a> tag and draggable element that holds type icon and name.
     // Used mostly in trees and lists
     display: flex;
-    align-items: baseline; // Provides better vertical alignment than center
+    align-items: center;
     flex: 0 1 auto;
     overflow: hidden;
     white-space: nowrap;