Review and integrate UI enhancements (#2078)

* [Frontend] WIP New local-controls classes

Fixes #2000
- h-local-controls
- Markup in plots changed
- Changed reset plot button's icon

* [Frontend] WIP local-controls classes

Fixes #2000
- Refactoring to use and apply local-control classes consistently;
- Plots and imagery done in main view and Display Layout contexts;

* [Frontend] WIP local-controls classes

Fixes #2000
- Use local-control classes in Timelines;
- Group Timeline buttons in l-btn-set;
- Use reset icon glyph;

* [Frontend] WIP local-controls classes

Fixes #2000
- Slight increase in size to buttons in frame context;

* [Frontend] local-controls classes

Fixes #2000
- Code cleanup;
- Update Style Guide content;
- Provisionally done, needs unit testing and double-checking;

* [Frontend] Better selecting in browse mode

Fixes #2000
- Better colors and approach to selecting in browse mode;

* [Frontend] Tweaks to pane collapse mini-tabs

Fixes #1758
Fixes #2000
- Enlarged mini-tabs and moved to screen top;
- Removed duplicative theme-based constants;

* [Frontend] Tweaks to "nav up" arrow button

Fixes #1758
Fixes #2000
- Increased hit area of .l-back "nav up" arrow in object-browse-bar;

* [Frontend] Glyph improvements

Fixes #1758
Fixes #2000
- New arrow glyph for view controls;
- Increased hit area of view controls in tree for mobile and desktop;
- Better "hamburger" menu glyph;

* [Frontend] Inspector refactor to CSS grid WIP

Fixes #1758
Fixes #2000
- WIP!!!;
- Good progress on Properties section;

* [Frontend] Inspector refactor to CSS grid WIP

Fixes #2000
- Significant mods to CSS and markup;
- New grid archetypes classes;
- Added title attribs to plot options edit and browse props;
- Added value, alarm markers to plot series browse props;
- Nearly done (?) but needs unit testing and cleanups;

* [Frontend] Minor tweaks to form and form-row

Fixes #2000
- Fixing margin problem with .form-row;
- h2 instead of div.section-header;

* [Frontend] Fixed H2 in Elements pool

Fixes #2000

* Refinements to Time Conductor

Fixes #2000
- Tweaks size of fixed position grab ticks;
- Positioning refinements to ticks and text;
- Hide major tick marks;

* Hide View Large button for nested hidden-frame Layouts

Fixes #2000
- When a layout is nested and has its frame hidden, hide the
View Large button;

* Better hiding of Time Conductor "Submit" button

Fixes #2000

* Re-added new icon-arrow-right-equilateral glyph;

Fixes #2000
Fixes #2078

* Remove commented styles/markup

Fixes #2000
Fixes #2078

* Repaired approach to hiding Time Conductor Submit button

Fixes #2000
Fixes #2078
- Renamed .off to .invisible and added refinements;

* Fixed wrong conflict resolutions; polish search

Fixes #2000
Fixes #2078
- .invisible instead of .off in search.html;
- Minor polishing to search;

fixes #1758
fixes #1763 
fixes #2011

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -128,40 +128,80 @@
     }
 }
 
-.l-local-controls {
-    // Control shown when hovering over an object, like plots and imagery
-    // Default position is upper right
-    $p: $interiorMargin;
-    position: absolute;
-    top: $p; right: $p; bottom: auto;
-    text-align: right;
-    z-index: 5;
+
+
+/******************************************************** LOCAL CONTROLS */
+// Controls placed in proximity to or overlaid on components and views
+
+.local-controls-persist {
+
 }
 
-.s-local-controls {
-    font-size: 0.7rem;
-    &.s-wrapper-transluc {
-        // Semi-opaque wrapper to visually distinguish a control
-        // from the background
-        background: rgba($colorTransLucBg, 0.7);
-        box-sizing: border-box;
-        border-radius: $controlCr;
+.local-controls-hidden {
+    // Used within .has-local-controls, hidden by default
+
+}
+
+.local-controls-flyout {
+
+}
+
+body.desktop .has-local-controls {
+    // Helper class, provides hover ability to show local controls
+
+    &:hover .local-controls-hidden {
+        @include trans-prop-nice($props: opacity, $dur: 50ms);
+        opacity: 1;
+        pointer-events: inherit;
     }
-}
 
-.has-local-controls {
-    .local-control {
-        @include trans-prop-nice($props: opacity, $dur: 250ms);
+    .local-controls-hidden {
+        @include trans-prop-nice($props: opacity, $dur: 1000ms);
         opacity: 0;
+        pointer-events: none;
     }
-    &:hover {
-        .local-control {
-            @include trans-prop-nice($props: opacity, $dur: 10ms);
-            opacity: 1;
+}
+
+.h-local-controls {
+    // An explicit outer holder for controls. Typically placed in upper right.
+    align-items: center;
+    font-size: 0.7rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+
+    &.h-local-controls-overlay-content {
+        $p: $interiorMargin;
+        position: absolute;
+        top: $p; right: $p;
+        z-index: 2;
+    }
+
+    .l-btn-set,
+    .s-button {
+        &:not(:first-child) {
+            margin-left: $interiorMargin;
         }
     }
 }
 
+.h-local-controls-overlay-content {
+    background: $colorBodyBg;
+    border-radius: $controlCr + 1;
+    box-sizing: border-box;
+    border-radius: $controlCr;
+    padding: 1px;
+    .s-button {
+        background: $colorBtnBg;
+    }
+}
+
+.h-local-controls-trans {
+    background: rgba($colorTransLucBg, 0.5);
+    padding: $interiorMargin;
+}
+
 /******************************************************** VIEW CONTROLS */
 // Expand/collapse > and v arrows, used in tree and plot legend
 // Moved this over from a tree-only context 5/18/17
@@ -174,7 +214,7 @@
     &:before {
         position: absolute;
         @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right;
+        content: $glyph-icon-arrow-right-equilateral;
         @include transform-origin(center);
     }
     &.expanded:before {
@@ -773,13 +813,17 @@ textarea {
     @extend .icon-arrow-right;
     cursor: pointer;
     font-size: 0.75em;
+    width: $treeVCW;
     &:before {
+        // Arrow glyph
+        left: 50%;
         position: absolute;
         @include trans-prop-nice(transform, 100ms);
+        transform: translateX(-50%);
         transform-origin: center;
     }
     &.expanded:before {
-        transform: rotate(90deg);
+        transform: translateX(-50%) rotate(90deg);
     }
 }