Misc ui 2 (#2248)

* Create button disabled when editing
* New disabled mixin;
* Tree styling
* Fixed icons for fullscreen toggle button
* Local controls fixed for Imagery and Plots
* Range control styling updated;
* Plot styling, significant mods
* Disclosure controls improved;
* New _legacy-plots.scss file added, no longer loads legacy plot SCSS
files;
* Removed 12px crosshair cursor in legend hover;
* Inspector tree styling in plot options
* Fix z-indexing related to Overlays

src/plugins/plot/res/templates/mct-plot.html

@@ -20,13 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
-    <div class="gl-plot-legend flex-elem l-flex-row"
+    <div class="gl-plot-legend"
          ng-class="{ 'hover-on-plot': !!highlights.length }"
          ng-show="legend.get('position') !== 'hidden'">
-        <span class="view-control flex-elem"
-            ng-class="{ expanded: legend.get('expanded') }"
+        <div class="gl-plot-legend__view-control c-disclosure-triangle is-enabled"
+            ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
             ng-click="legend.set('expanded', !legend.get('expanded'));">
-        </span>
+        </div>
 
         <!-- COLLAPSED PLOT LEGEND -->
         <div class="plot-wrapper-collapsed-legend">
@@ -52,7 +52,7 @@
         </div>
 
         <!-- EXPANDED PLOT LEGEND -->
-        <div class="plot-wrapper-expanded-legend flex-elem grows">
+        <div class="plot-wrapper-expanded-legend">
             <table>
                 <thead>
                     <tr>
@@ -133,7 +133,9 @@
              ng-style="{
                      left: (tickWidth + 30) + 'px'
                  }">
-            <span class="t-object-alert t-alert-unsynced" title="This plot is not currently displaying the latest data. Reset Pan/zoom to return to view latest data."></span>
+            <span class="t-object-alert t-alert-unsynced"
+                  title="This plot is not currently displaying the latest data.
+                Reset Pan/zoom to return to view latest data."></span>
             <div class="gl-plot-display-area">
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"

src/plugins/plot/res/templates/plot-options-browse.html

@@ -20,20 +20,20 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree">
+    <ul class="tree c-tree">
         <h2 title="Plot series display properties in this object">Plot Series</h2>
         <li ng-repeat="series in config.series.models">
-            <span class="tree-item menus-to-left">
-                <span class='ui-symbol view-control flex-elem'
-                      ng-class="{ expanded: series.expanded }"
+            <div class="c-tree__item menus-to-left">
+                <span class='c-disclosure-triangle is-enabled flex-elem'
+                      ng-class="{ 'c-disclosure-triangle--expanded': series.expanded }"
                       ng-click="series.expanded = !series.expanded">
                 </span>
                 <mct-representation
-                        class="rep-object-label"
+                        class="rep-object-label c-tree__item__label"
                         key="'label'"
                         mct-object="series.oldObject">
                 </mct-representation>
-            </span>
+            </div>
             <ul class="grid-properties" ng-show="series.expanded">
                 <li class="grid-row">
                     <div class="grid-cell label"

src/plugins/plot/res/templates/plot-options-edit.html

@@ -20,21 +20,21 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree l-inspector-part">
-        <h2 title="Display properties for this object">Plot Series Options</h2>
+    <ul class="tree c-tree">
+        <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
             form-model="series">
-            <span class="tree-item menus-to-left">
-                <span class='ui-symbol view-control flex-elem'
-                      ng-class="{ expanded: expanded }"
+            <div class="c-tree__item menus-to-left">
+                <span class='c-disclosure-triangle is-enabled flex-elem'
+                      ng-class="{ 'c-disclosure-triangle--expanded': expanded }"
                       ng-click="expanded = !expanded">
                 </span>
-                <mct-representation class="rep-object-label"
+                <mct-representation class="rep-object-label c-tree__item__label"
                                     key="'label'"
                                     mct-object="series.oldObject">
                 </mct-representation>
-            </span>
+            </div>
             <ul class="grid-properties" ng-show="expanded">
                 <li class="grid-row">
                 <!-- Value to be displayed -->