Misc UI 5640 (#5762)

* Closes #5640
- Layout frame edit handle visually tweaked, no longer resizes frame contents on hover when editing.
- Gauge now centers in its container instead of left flush.
- Added large bg-icon for aggregate telemetry.
- Removed 'no class' single wrapper div in mct-tree.vue.
- Refinements to appearance of locator in save/edit overlay dialog.
- Better styling for search in progress and 'no results' messaging.
- Revised art and glyph for `icon-tabular-scrolling`.
- Change TelemetryTableType to use icon-tabular-scrolling icon and bg-icon.
- Fix bad/erroneous descriptions for Telemetry Table, LAD Table and LAD Table Set.
- Fix descriptions for multiple view types.
- Removed unused .bg-icon class.
- Fixed bad value check that was causing panes not to collapse when dragged
(by design) to a very narrow width.
- Visual style for grippy adjusted for better clarity on some monitors.
- Normalize size of alphanumeric's labels and values in Display Layouts.
- Fix margin strategy for object label in main view.
- Fixed Locator to dynamically size itself to use available vertical space.
- Added new `l-overlay-dialog` size parameter.
- Better approach to overlay sizing to make Properties dialogs larger vertically
and fullscreen overlays more apparent to the user.
- Normalized approach to numeric inputs to fix cross-browser
inconsistency with input spinners.
- Fixed layout problem in `Datetime.vue` component due to
numeric input spinners changes.
- Added object types for Display Layout drawing objects.
- Code modded in `ObjectName.vue` to grab layout object cssClass from
layoutItem.type.
- Big thanks to @jvigliotta for the assist with this!
- update snapshots

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -93,7 +93,7 @@ define(['lodash'], function (_) {
                     'table': {
                         value: 'table',
                         name: 'Table',
-                        class: 'icon-tabular-realtime'
+                        class: 'icon-tabular-scrolling'
                     }
                 };
                 const APPLICABLE_VIEWS = {

src/plugins/displayLayout/DrawingObjectTypes.js

@@ -0,0 +1,34 @@
+const displayLayoutDrawingObjectTypes = {
+    'box-view': {
+        name: "Box",
+        creatable: false,
+        description: 'A rectangle shape.',
+        cssClass: 'icon-box-round-corners'
+    },
+    'ellipse-view': {
+        name: "Ellipse",
+        creatable: false,
+        description: 'A ellipse shape.',
+        cssClass: 'icon-circle'
+    },
+    'line-view': {
+        name: "Line",
+        creatable: false,
+        description: 'A line.',
+        cssClass: 'icon-line-horz'
+    },
+    'text-view': {
+        name: "Text",
+        creatable: false,
+        description: 'An editable text box.',
+        cssClass: 'icon-font'
+    },
+    'image-view': {
+        name: "Image",
+        creatable: false,
+        description: 'An image.',
+        cssClass: 'icon-image'
+    }
+};
+
+export default displayLayoutDrawingObjectTypes;

src/plugins/displayLayout/components/layout-frame.scss

@@ -74,14 +74,15 @@
                         transition-delay: $moveBarOutDelay;
                         @include userSelectNone();
                         background: $editFrameMovebarColorBg;
-                        box-shadow: rgba(black, 0.2) 0 1px;
+                        box-shadow: rgba(black, 0.3) 0 2px;
                         bottom: auto;
                         display: block;
                         height: 0; // Height is set on hover below
-                        opacity: 0.8;
+                        opacity: 0.9;
                         max-height: 100%;
                         overflow: hidden;
                         text-align: center;
+                        z-index: 10;
 
                         &:before {
                             // Grippy
@@ -104,7 +105,6 @@
                     > .c-so-view.has-complex-content {
                         transition: $transIn;
                         transition-delay: 0s;
-                        padding-top: $editFrameMovebarH + $interiorMarginSm;
 
                         > .c-so-view__local-controls {
                             transform: translateY($editFrameMovebarH);

src/plugins/displayLayout/components/telemetry-view.scss

@@ -4,7 +4,7 @@
 
     > * {
         // Label and value holders
-        flex: 1 1 auto;
+        flex: 1 1 50%;
         display: flex;
         flex-direction: row;
         align-items: center;

src/plugins/displayLayout/plugin.js

@@ -25,6 +25,7 @@ import CopyToClipboardAction from './actions/CopyToClipboardAction';
 import DisplayLayout from './components/DisplayLayout.vue';
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js';
 import DisplayLayoutType from './DisplayLayoutType.js';
+import DisplayLayoutDrawingObjectTypes from './DrawingObjectTypes.js';
 
 import objectUtils from 'objectUtils';
 
@@ -125,6 +126,11 @@ export default function DisplayLayoutPlugin(options) {
                 return true;
             }
         });
+
+        for (const [type, definition] of Object.entries(DisplayLayoutDrawingObjectTypes)) {
+            openmct.types.addType(type, definition);
+        }
+
         DisplayLayoutPlugin._installed = true;
     };
 }