UI enhancements (#3217)

* UI enhancements for #3176

- Large overlay now displays fullscreen;

* UI enhancements for #3176

- Adding new ".is-in-small-container" CSS - VERY WIP!
- TODO: fix table implementation;

* UI fixes for NIRVSS client #170

- Hide table header filter inputs when table is in small container;

* UI fixes for NIRVSS client #170

- Fixing legends and plot layout when small, and within a stacked plot;
- Add new `hideLegendWhenSmall` property;
- Remove 'hidden' from plot legend position options;
- Reduced opacity of tabular headers in Espresso theme;
- VERY, VERY WIP right now!

* UI fixes for NIRVSS client #170

- Fixing legends and plot layout when small, and within a stacked plot;
- Cleanups, indention, removed commented CSS;
- Tightened up spacing in plot Y axis;

* UI enhancements for #3176

- Move local controls for plots and imagery, prevent overlapping with
 view large button when in a hidden frame in a layout;
 - Finesse local control styling for increased legibility;
 - Move l-state-indicators to avoid overlap with repositioned local
 controls, finesse styling;

* UI enhancements for #3176

- Tweak large overlay close button for better visual alignment;

* UI enhancements for #3176

- Significant improvements to lines in Display Layouts;
- Increased border-width for lines and boxes;
- Code enhanced for proper handling of horizontal and
vertical lines - but still isn't working properly;
- Renamed box-view.scss to box-and-line-views.scss;
- VERY WIP!

* Fixed incorrect grid array reference

* UI enhancements for #3176

- Fixed final issue with Display Layout line drawing object, thank you
@deeptailor!;

* UI enhancements for #3176

- Contrast enhancements and markup normalization for `c-object-label`
elements in main view, Layout frames, Inspector and overlay;
- Enhanced `l-overlay-large` layout;
- Tightened up margins and spacing in plots;
- Refined `is-paused` styling in Telemetry Tables;
- Now hide Telemetry Tables 'Export Data' button if rows are selected,
which use a separate export button;
- Layout frames now hide button's text labels when small;
- Layout frames spacing tightened up and improved;

* UI enhancements for #3176

- Tweak Snow theme constants;

* UI enhancements for #3176

- Fixed ObjectFrame getOverlayElement method, added a wrapper div
around the viewed object to properly control resulting layout in the
overlay;
- Simplified preview CSS to remove background, border and padding;
- Layout tweaks to add space between scrollbar and thumbs in Imagery
view;
- Removed dev "-info" element in LineView.vue;

* UI enhancements for #3176

- Improved styling for 'edit lock' button;

* UI enhancements for #3176

- Show Display Layout frame "-move" bar on hover, rather than select, to
 make it easier to select items with hidden frames, and only show -move
  bar's drag grippy when that frame is selected;
- `pointer-events: none` applied to table's body and plot's plot areas
when placed in a Layout and being edited, prevents distracting
interactions (plot zoom/pan, table row selection) when selecting and
moving elements in a Layout;
- Refined hover styles for c-button to use $filterHov, simplified and
normalized hover styling;
- Converted a number of old `<a>` tags to `<buttons>` to normalize
styling and use the appropriate control;
- Edit lock button is now colored when locked;

* Fix linting issue

* Minor tweaks

- Tweaked control positioning;

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

src/ui/components/object-frame.scss

@@ -10,25 +10,21 @@
     &__header {
         flex: 0 0 auto;
         display: flex;
+        font-size: 1.05em;
         align-items: center;
-        margin-bottom: $interiorMargin;
+        margin-bottom: $interiorMarginSm;
+        padding: 1px 2px;
 
-        &__icon {
-            flex: 0 0 auto;
-            margin-right: $interiorMarginSm;
-            opacity: 0.5;
-        }
-
-        &__name {
-            @include headerFont(1em);
-            @include ellipsize();
-            flex: 0 1 auto;
+        .c-object-label {
+            &__name {
+                filter: $objectLabelNameFilter;
+            }
         }
     }
 
     &:not(.c-so-view--no-frame) {
         border: $browseFrameBorder;
-        padding: $interiorMargin;
+        padding: 0 $interiorMarginSm;
 
         .is-editing & {
             background: rgba($colorBodyBg, 0.8);
@@ -40,9 +36,9 @@
             display: none;
         }
 
-        > .c-so-view__local-controls {
-            top: $interiorMarginSm; right: $interiorMarginSm;
-        }
+        //> .c-so-view__local-controls {
+        //    top: $interiorMarginSm; right: $interiorMarginSm;
+        //}
 
         &.is-missing {
             @include isMissing($absPos: true);
@@ -55,9 +51,19 @@
     }
 
     &__local-controls {
+        // View Large button
+        box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
         position: absolute;
         top: $interiorMargin; right: $interiorMargin;
-        z-index: 2;
+        z-index: 10;
+    }
+
+    .c-click-icon,
+    .c-button {
+        // Shrink buttons a bit when they appear in a frame
+        border-radius: $smallCr !important;
+        font-size: 0.9em;
+        padding: 3px 5px;
     }
 
     &__view-large {
@@ -68,7 +74,6 @@
         > .c-so-view__view-large { display: block; }
     }
 
-    /*************************** OBJECT VIEW */
     &__object-view {
         flex: 1 1 auto;
         height: 0; // Chrome 73 overflow bug fix
@@ -79,13 +84,6 @@
             @include abs();
         }
     }
-
-    .c-click-icon,
-    .c-button {
-        // Shrink buttons a bit when they appear in a frame
-        font-size: 0.9em;
-        padding: 3px 5px;
-    }
 }
 
 .u-angular-object-view-wrapper {