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/features/timeline/res/sass/_timeline-thematic.scss

@@ -148,14 +148,7 @@
         $bg: $timelineHeaderColorBg;
         $l: 5%;
         @include user-select(none);
-        @include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 70%, rgba($bg, 0) 100%));
-        .s-button {
-            height: 16px;
-            line-height: 16px;
-            .icon {
-                font-size: 0.7rem !important;
-            }
-        }
+        @include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 75%, rgba($bg, 0) 100%));
     }
 
     .l-timeline-resource-graph {

platform/features/timeline/res/templates/timeline.html

@@ -106,30 +106,32 @@
 
                 <!-- TOP PANE GANTT BARS -->
                 <div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
-                    <div class="l-hover-btns-holder s-hover-btns-holder">
+                    <div class="h-local-controls l-hover-btns-holder s-hover-btns-holder">
                         <a class="s-button icon-timer"
                            ng-click="scroll.follow = true"
                            ng-show="!toiController.isFollowing() && toiController.isActive()"
                            title="Follow time bounds">
                         </a>
 
-                        <a class="s-button icon-arrows-out"
-                           ng-click="scroll.follow = false; zoomController.fit()"
-                           ng-show="true"
-                           title="Zoom to fit">
-                        </a>
+                        <div class="l-btn-set">
+                            <a class="s-button icon-reset"
+                               ng-click="scroll.follow = false; zoomController.fit()"
+                               ng-show="true"
+                               title="Zoom to fit">
+                            </a>
 
-                        <a class="s-button icon-magnify-in"
-                           ng-click="scroll.follow = false; zoomController.zoom(-1)"
-                           ng-show="true"
-                           title="Zoom in">
-                        </a>
+                            <a class="s-button icon-magnify-in"
+                               ng-click="scroll.follow = false; zoomController.zoom(-1)"
+                               ng-show="true"
+                               title="Zoom in">
+                            </a>
 
-                        <a class="s-button icon-magnify-out"
-                           ng-click="scroll.follow = false; zoomController.zoom(1)"
-                           ng-show="true"
-                           title="Zoom out">
-                        </a>
+                            <a class="s-button icon-magnify-out"
+                               ng-click="scroll.follow = false; zoomController.zoom(1)"
+                               ng-show="true"
+                               title="Zoom out">
+                            </a>
+                        </div>
                     </div>
 
                     <div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">