From 2943d2b6ec6c1c685a730c8242130ed954e657f4 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Mon, 11 Jul 2022 10:26:10 -0700
Subject: [PATCH] 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 | 6 ++---
src/plugins/charts/bar/plugin.js | 4 ++--
src/plugins/gauge/components/Gauge.vue | 1 +
.../gauge/components/GaugeFormController.vue | 24 +++++++++----------
.../imagery/components/imagery-view.scss | 11 +++++----
.../operatorStatus/operator-status.scss | 2 +-
.../pollQuestion/PollQuestion.vue | 4 +++-
src/plugins/plot/actions/ViewActions.js | 4 ++--
src/ui/components/object-label.scss | 2 +-
9 files changed, 32 insertions(+), 26 deletions(-)
diff --git a/example/exampleUser/ExampleUserProvider.js b/example/exampleUser/ExampleUserProvider.js
index 2926f0ba92..8fdd029234 100644
--- a/example/exampleUser/ExampleUserProvider.js
+++ b/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",
diff --git a/src/plugins/charts/bar/plugin.js b/src/plugins/charts/bar/plugin.js
index d96f9e0d0f..c0117b07c0 100644
--- a/src/plugins/charts/bar/plugin.js
+++ b/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 = [];
diff --git a/src/plugins/gauge/components/Gauge.vue b/src/plugins/gauge/components/Gauge.vue
index a9a1061068..2d250158eb 100644
--- a/src/plugins/gauge/components/Gauge.vue
+++ b/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"
diff --git a/src/plugins/gauge/components/GaugeFormController.vue b/src/plugins/gauge/components/GaugeFormController.vue
index 648e0c12d3..b9556e79bc 100644
--- a/src/plugins/gauge/components/GaugeFormController.vue
+++ b/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"
>
diff --git a/src/plugins/imagery/components/imagery-view.scss b/src/plugins/imagery/components/imagery-view.scss
index 50895d7e32..e29624fd17 100644
--- a/src/plugins/imagery/components/imagery-view.scss
+++ b/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;
diff --git a/src/plugins/operatorStatus/operator-status.scss b/src/plugins/operatorStatus/operator-status.scss
index 144ffff402..9482c650fa 100644
--- a/src/plugins/operatorStatus/operator-status.scss
+++ b/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;
diff --git a/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue b/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue
index 7f75e15ec7..ff8443cf9a 100644
--- a/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue
+++ b/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>
diff --git a/src/plugins/plot/actions/ViewActions.js b/src/plugins/plot/actions/ViewActions.js
index 7ebf7fe726..d8dbd4b0a3 100644
--- a/src/plugins/plot/actions/ViewActions.js
+++ b/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();
diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss
index 3128eaba37..174b02277f 100644
--- a/src/ui/components/object-label.scss
+++ b/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;