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/ui/layout/layout.scss

@@ -392,6 +392,8 @@
 
     &__nav-to-parent-button {
         // This is an icon-button
+        margin-right: $interiorMargin;
+
         .is-editing & {
             display: none;
         }
@@ -412,7 +414,6 @@
 
     &__object-name--w {
         @include headerFont(1.5em);
-        margin-left: $interiorMarginLg;
         min-width: 0;
 
         .is-status__indicator {

src/ui/layout/mct-tree.scss

@@ -287,8 +287,10 @@
 
 .c-selector {
     &.c-tree-and-search {
-        border: 1px solid $colorFormLines;
-        border-radius: $controlCr;
-        padding: $interiorMargin;
+        background: rgba($colorFormLines, 0.1);
+        border-radius: $basicCr;
+        padding: 2px;
+        height: 100%;
+        min-height: 150px;
     }
 }

src/ui/layout/mct-tree.vue

@@ -5,7 +5,6 @@
     :class="{
         'c-selector': isSelectorTree
     }"
-    :style="treeHeight"
 >
     <div
         ref="search"
@@ -44,29 +43,27 @@
         role="tree"
         aria-expanded="true"
     >
-        <div>
 
-            <div
-                ref="dummyItem"
-                class="c-tree__item-h"
-                style="left: -1000px; position: absolute; visibility: hidden"
-            >
-                <div class="c-tree__item">
-                    <span class="c-tree__item__view-control c-nav__up is-enabled"></span>
-                    <a
-                        class="c-tree__item__label c-object-label"
-                        draggable="true"
-                        href="#"
-                    >
-                        <div class="c-tree__item__type-icon c-object-label__type-icon icon-folder">
-                            <span title="Open MCT"></span>
-                        </div>
-                        <div class="c-tree__item__name c-object-label__name">
-                            Open MCT
-                        </div>
-                    </a>
-                    <span class="c-tree__item__view-control c-nav__down"></span>
-                </div>
+        <div
+            ref="dummyItem"
+            class="c-tree__item-h"
+            style="left: -1000px; position: absolute; visibility: hidden"
+        >
+            <div class="c-tree__item">
+                <span class="c-tree__item__view-control c-nav__up is-enabled"></span>
+                <a
+                    class="c-tree__item__label c-object-label"
+                    draggable="true"
+                    href="#"
+                >
+                    <div class="c-tree__item__type-icon c-object-label__type-icon icon-folder">
+                        <span title="Open MCT"></span>
+                    </div>
+                    <div class="c-tree__item__name c-object-label__name">
+                        Open MCT
+                    </div>
+                </a>
+                <span class="c-tree__item__view-control c-nav__down"></span>
             </div>
         </div>
 
@@ -213,7 +210,7 @@ export default {
             if (!this.isSelectorTree) {
                 return {};
             } else {
-                return { height: this.itemHeight * LOCATOR_ITEM_COUNT_HEIGHT + 'px' };
+                return { 'min-height': this.itemHeight * LOCATOR_ITEM_COUNT_HEIGHT + 'px' };
             }
         }
     },

src/ui/layout/pane.vue

@@ -23,7 +23,7 @@
         >{{ label }}</span>
         <slot name="controls"></slot>
         <button
-            v-if="collapsable"
+            v-if="isCollapsable"
             class="l-pane__collapse-button c-icon-button"
             @click="toggleCollapse"
         ></button>
@@ -69,8 +69,8 @@ export default {
         };
     },
     computed: {
-        collapsable() {
-            return this.hideParam && this.hideParam.length;
+        isCollapsable() {
+            return this.hideParam && this.hideParam.length > 0;
         }
     },
     beforeMount() {
@@ -80,7 +80,7 @@ export default {
     async mounted() {
         await this.$nextTick();
         // Hide tree and/or inspector pane if specified in URL
-        if (this.collapsable) {
+        if (this.isCollapsable) {
             this.handleHideUrl();
         }
     },
@@ -145,7 +145,7 @@ export default {
         updatePosition: function (event) {
             let size = this.getNewSize(event);
             let intSize = parseInt(size.substr(0, size.length - 2), 10);
-            if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
+            if (intSize < COLLAPSE_THRESHOLD_PX && this.isCollapsable === true) {
                 this.dragCollapse = true;
                 this.end();
                 this.toggleCollapse();

src/ui/layout/search/SearchResultsDropDown.vue

@@ -58,16 +58,17 @@
             </div>
             <div
                 v-if="searchLoading"
-            > <progress-bar
-                :model="{progressText: 'Searching...',
-                         progressPerc: undefined
-                }"
-            />
+                class="c-gsearch__result-pane-msg"
+            >
+                <div class="hint">Searching...</div>
+                <progress-bar :model="{ progressPerc: undefined }" />
             </div>
             <div
                 v-if="!searchLoading && (!annotationResults || !annotationResults.length) &&
                     (!objectResults || !objectResults.length)"
-            >No matching results.
+                class="c-gsearch__result-pane-msg"
+            >
+                <div class="hint">No results found</div>
             </div>
         </div>
     </div>

src/ui/layout/search/search.scss

@@ -66,6 +66,12 @@
     &__results-section-title {
         @include propertiesHeader();
     }
+
+    &__result-pane-msg {
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+    }
 }
 
 .c-gsearch-result {