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/api/forms/FormsAPI.js

@@ -139,7 +139,7 @@ export default class FormsAPI extends EventEmitter {
         } else {
             overlay = self.openmct.overlays.overlay({
                 element: vm.$el,
-                size: 'small',
+                size: 'dialog',
                 onDestroy: () => vm.$destroy()
             });
         }

src/api/forms/components/controls/Datetime.vue

@@ -32,53 +32,49 @@
         prevent
         class="u-contents"
     >
-        <div class="field control date">
-            <input
-                v-model="date"
-                :pattern="/\d{4}-\d{2}-\d{2}/"
-                :placeholder="format"
-                type="date"
-                name="date"
-                @change="onChange"
-            >
-        </div>
-        <div class="field control hour sm">
-            <input
-                v-model="hour"
-                :pattern="/\d+/"
-                type="number"
-                name="hour"
-                maxlength="10"
-                min="0"
-                max="23"
-                @change="onChange"
-            >
-        </div>
-        <div class="field control min sm">
-            <input
-                v-model="min"
-                :pattern="/\d+/"
-                type="number"
-                name="min"
-                maxlength="2"
-                min="0"
-                max="59"
-                @change="onChange"
-            >
-        </div>
-        <div class="field control sec sm">
-            <input
-                v-model="sec"
-                :pattern="/\d+/"
-                type="number"
-                name="sec"
-                maxlength="2"
-                min="0"
-                max="59"
-                @change="onChange"
-            >
-        </div>
-        <div class="field control timezone">
+        <input
+            v-model="date"
+            class="field control date"
+            :pattern="/\d{4}-\d{2}-\d{2}/"
+            :placeholder="format"
+            type="date"
+            name="date"
+            @change="onChange"
+        >
+        <input
+            v-model="hour"
+            class="field control hour c-input--sm"
+            :pattern="/\d+/"
+            type="number"
+            name="hour"
+            maxlength="10"
+            min="0"
+            max="23"
+            @change="onChange"
+        >
+        <input
+            v-model="min"
+            class="field control min c-input--sm"
+            :pattern="/\d+/"
+            type="number"
+            name="min"
+            maxlength="2"
+            min="0"
+            max="59"
+            @change="onChange"
+        >
+        <input
+            v-model="sec"
+            class="field control sec c-input--sm"
+            :pattern="/\d+/"
+            type="number"
+            name="sec"
+            maxlength="2"
+            min="0"
+            max="59"
+            @change="onChange"
+        >
+        <div class="field control hint timezone">
             UTC
         </div>
     </form>

src/api/overlays/Overlay.js

@@ -6,7 +6,8 @@ const cssClasses = {
     large: 'l-overlay-large',
     small: 'l-overlay-small',
     fit: 'l-overlay-fit',
-    fullscreen: 'l-overlay-fullscreen'
+    fullscreen: 'l-overlay-fullscreen',
+    dialog: 'l-overlay-dialog'
 };
 
 class Overlay extends EventEmitter {

src/api/overlays/components/overlay-component.scss

@@ -1,4 +1,4 @@
-@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
+@mixin overlaySizing($marginTB: auto, $marginLR: auto, $width: auto, $height: auto) {
     position: absolute;
     top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
     width: $width;
@@ -98,6 +98,7 @@ body.desktop {
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
     .l-overlay-large,
     .l-overlay-small,
+    .l-overlay-dialog,
     .l-overlay-fit {
         .c-overlay__outer {
             border-radius: $overlayCr;
@@ -108,7 +109,7 @@ body.desktop {
     .l-overlay-fullscreen {
         // Used by About > Licenses display
         .c-overlay__outer {
-            @include overlaySizing($overlayOuterMarginFullscreen);
+            @include overlaySizing(nth($overlayOuterMarginFullscreen, 1), nth($overlayOuterMarginFullscreen, 2));
         }
     }
 
@@ -119,7 +120,7 @@ body.desktop {
         $lrPad: $pad;
         .c-overlay {
             &__outer {
-                @include overlaySizing($overlayOuterMarginLarge);
+                @include overlaySizing(nth($overlayOuterMarginLarge, 1), nth($overlayOuterMarginLarge, 2));
                 padding: $tbPad $lrPad;
             }
 
@@ -137,14 +138,20 @@ body.desktop {
 
     .l-overlay-small {
         .c-overlay__outer {
-            @include overlaySizing($overlayOuterMarginDialog);
+            @include overlaySizing(nth($overlayOuterMarginSmall, 1), nth($overlayOuterMarginSmall, 2));
+        }
+    }
+
+    .l-overlay-dialog {
+        .c-overlay__outer {
+            @include overlaySizing(nth($overlayOuterMarginDialog, 1), nth($overlayOuterMarginDialog, 2));
         }
     }
 
     .t-dialog-sm .l-overlay-small, // Legacy dialog support
     .l-overlay-fit {
         .c-overlay__outer {
-            @include overlaySizing(auto);
+            @include overlaySizing(auto, auto);
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);