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/conductor/core/res/sass/_constants.scss

@@ -1,5 +1,5 @@
-$ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
-$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
+$ueTimeConductorH: (20px, 3px, 20px); // Heights for Ticks, Data Visualization, Controls elements
+$ueTimeConductorRtH: (20px, 3px, 20px); // Heights for elements in Real-time mode
 $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
 $timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
 $timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator

platform/features/conductor/core/res/sass/_time-conductor-base.scss

@@ -192,15 +192,19 @@
                 width: 100%;
                 height: 100%;
                 > g {
+                    // Tick holder
                     font-size: 0.9em;
+                    transform: translateY(23px);
                 }
-                path {
+                path,
+                line {
                     // Line beneath ticks
                     display: none;
                 }
                 line {
                     // Tick marks
-                    stroke: $c;
+                    //stroke: $c;
+                    //transform: translateY(-10px);
                 }
                 text {
                     // Tick labels
@@ -256,7 +260,7 @@
 
     .l-time-conductor-controls {
         align-items: center;
-        margin-top: $interiorMargin;
+        margin-top: $interiorMarginLg;
         .l-time-conductor-zoom-w {
             justify-content: flex-end;
             .time-conductor-zoom {
@@ -334,27 +338,25 @@
             content: $i;
         }
         .l-axis-holder {
+            $angle: 90deg;
             $c0: rgba($colorBodyFg, 0.1);
+            $c1: rgba($colorBodyFg, 0.1);
             $c2: transparent;
-            $grabTicksH: 3px;
-            $grabTicksXSpace: 4px;
-            $grabTicksYOffset: 0;
+            $grabTicksYOffset: 2px;
+            $grabTicksXSpace: 3px;
+            transition: background 150ms ease-in-out;
             @include cursorGrab();
             svg {
-                $c1: rgba($colorBodyFg, 0.2);
-                $angle: 90deg;
                 @include background-image(linear-gradient($angle,
                     $c1 1px, $c2 1px,
                     $c2 100%
                 ));
                 background-position: center $grabTicksYOffset;
                 background-repeat: repeat-x;
-                background-size: $grabTicksXSpace $grabTicksH;
+                background-size: $grabTicksXSpace $r1H - ($grabTicksYOffset * 2);
             }
             &:hover {
-                @include background-image(linear-gradient(
-                    $c0 70%, $c2 100%
-                ));
+                background: $c0;
             }
         }
     }

platform/features/conductor/core/res/templates/time-conductor.html

@@ -77,7 +77,7 @@
                     </span>
                 </span>
 
-                <input type="submit" class="off">
+                <input type="submit" class="invisible">
             </form>
             <conductor-axis class="mobile-hide" view-service="tcController.conductorViewService"></conductor-axis>
         </div>

platform/features/conductor/core/src/ui/ConductorAxisController.js

@@ -76,9 +76,8 @@ define(
 
             this.xAxis = d3Axis.axisTop();
 
-            // draw x axis with labels and move to the bottom of the chart area
-            this.axisElement = vis.append("g")
-                .attr("transform", "translate(0," + (height - PADDING) + ")");
+            // draw x axis with labels. CSS is used to position them.
+            this.axisElement = vis.append("g");
 
             if (this.timeAPI.timeSystem() !== undefined) {
                 this.changeTimeSystem(this.timeAPI.timeSystem());