From 0457f7bee80f228878912f7ea1fcbe191c2046dc Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 1 Sep 2016 19:48:41 -0700
Subject: [PATCH] [Frontend] New markup for CSS from #1166

Fixes #967
Requires new styles implemented in #1166
---
 .../features/plot/res/templates/plot.html     | 219 ++++++++++--------
 1 file changed, 120 insertions(+), 99 deletions(-)

diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index 6dc3cd71b9..3f3db40508 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/platform/features/plot/res/templates/plot.html
@@ -20,120 +20,141 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="PlotController as plot"
-      class="abs holder holder-plot">
-    <div class="gl-plot"
-         ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
-         ng-repeat="subplot in plot.getSubPlots()">
-        <div class="gl-plot-legend">
-            <!-- ng-class is temporarily hard-coded in next element -->
+      class="abs holder holder-plot has-control-bar">
+    <div class="l-control-bar">
+         has-control-bar<span class="l-btn-set">
+            <a class="s-button t-export icon-download labeled first"
+               ng-click="exportPDF()"
+               title="Export This View's Data as PDF">
+                JPG
+            </a>
+            <a class="s-button t-export labeled"
+               ng-click="exportPNG()"
+               title="Export This View's Data as PNG">
+                PNG
+            </a>
+            <a class="s-button t-export labeled last"
+               ng-click="exportJPG()"
+               title="Export This View's Data as JPG">
+                PDF
+            </a>
+        </span>
+    </div>
+    <div class="l-view-section">
+        <div class="gl-plot"
+             ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
+             ng-repeat="subplot in plot.getSubPlots()">
+            <div class="gl-plot-legend">
+                <!-- ng-class is temporarily hard-coded in next element -->
             <span
-                class='plot-legend-item'
-                ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
-                ng-class="plot.getLegendClass(telemetryObject)">
+                    class='plot-legend-item'
+                    ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
+                    ng-class="plot.getLegendClass(telemetryObject)">
                 <span class='plot-color-swatch'
                       ng-style="{ 'background-color': plot.getColor($index) }">
                 </span>
                 <span class='title-label'>{{telemetryObject.getModel().name}}</span>
             </span>
-        </div>
-        <div class="gl-plot-coords"
-            ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
-            {{subplot.getHoverCoordinates()}}
-        </div>
-        <div class="gl-plot-axis-area gl-plot-y">
-            <div class="gl-plot-label gl-plot-y-label">
-                {{axes[1].active.name}}
             </div>
-            <div ng-repeat="tick in subplot.getRangeTicks()"
-                 class="gl-plot-tick gl-plot-y-tick-label"
-                 ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }">
-                {{tick.label | reverse}}
+            <div class="gl-plot-coords"
+                 ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
+                {{subplot.getHoverCoordinates()}}
             </div>
-            <div class="gl-plot-y-options gl-plot-local-controls"
-                 ng-if="axes[1].options.length > 1">
-                <div class='form-control shell select'>
-                    <select class="form-control input shell"
-                            ng-model="axes[1].active"
-                            ng-options="option.name for option in axes[1].options">
-                    </select>
+            <div class="gl-plot-axis-area gl-plot-y">
+                <div class="gl-plot-label gl-plot-y-label">
+                    {{axes[1].active.name}}
                 </div>
-            </div>
-        </div>
-        <div class="gl-plot-display-area"
-             ng-mouseenter="subplot.isHovering(true);"
-             ng-mouseleave="subplot.isHovering(false)"
-             ng-class="{ loading: plot.isRequestPending() }">
-            <!-- Out-of-bounds data indicators -->
-            <!-- ng-show is temporarily hard-coded in next element -->
-            <div ng-show="false" class="l-oob-data l-oob-data-up"></div>
-            <div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
-            <div class="gl-plot-hash hash-v"
-                 ng-repeat="tick in subplot.getDomainTicks()"
-                 ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
-                 ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
-            </div>
-            <div class="gl-plot-hash hash-h"
-                 ng-repeat="tick in subplot.getRangeTicks()"
-                 ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
-                 ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
-            </div>
-            <mct-chart draw="subplot.getDrawingObject()"
-                       ng-if="subplot.getTelemetryObjects().length > 0"
-                       ng-mousemove="subplot.hover($event)"
-                       mct-drag="subplot.continueDrag($event)"
-                       mct-drag-down="subplot.startDrag($event)"
-                       mct-drag-up="subplot.endDrag($event); plot.update()">
-            </mct-chart>
-            <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
-            <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
-                 ng-if="$first">
-                <a class="s-button icon-arrow-left"
-                   ng-click="plot.stepBackPanZoom()"
-                   ng-show="plot.isZoomed()"
-                   title="Restore previous pan/zoom">
-                </a>
-                <a class="s-button icon-arrows-out"
-                   ng-click="plot.unzoom()"
-                   ng-show="plot.isZoomed()"
-                   title="Reset pan/zoom">
-                </a>
-                <div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
-                     ng-if="plot.getModeOptions().length > 1"
-                     ng-controller="ClickAwayController as toggle">
-                    <span class="l-click-area" ng-click="toggle.toggle()"></span>
-                    <span>{{plot.getMode().name}}</span>
-                    <div class="menu" ng-show="toggle.isActive()">
-                        <ul>
-                            <li ng-repeat="option in plot.getModeOptions()"
-                                ng-click="plot.setMode(option); toggle.setState(false)"
-                                class="{{option.cssclass}}">
-                                    {{option.name}}
-                            </li>
-                        </ul>
+                <div ng-repeat="tick in subplot.getRangeTicks()"
+                     class="gl-plot-tick gl-plot-y-tick-label"
+                     ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }">
+                    {{tick.label | reverse}}
+                </div>
+                <div class="gl-plot-y-options gl-plot-local-controls"
+                     ng-if="axes[1].options.length > 1">
+                    <div class='form-control shell select'>
+                        <select class="form-control input shell"
+                                ng-model="axes[1].active"
+                                ng-options="option.name for option in axes[1].options">
+                        </select>
                     </div>
                 </div>
             </div>
-        </div>
-        <div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
-            <div ng-repeat="tick in subplot.getDomainTicks()"
-                 class="gl-plot-tick gl-plot-x-tick-label"
-                 ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
-                 ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
-                {{tick.label | reverse}}
-            </div>
-            <div class="gl-plot-label gl-plot-x-label">
-                {{axes[0].active.name}}
-            </div>
-            <div class="gl-plot-x-options gl-plot-local-controls"
-                 ng-if="axes[0].options.length > 1">
-                <div class='form-control shell select'>
-                    <select class="form-control input shell"
-                            ng-model="axes[0].active"
-                            ng-options="option.name for option in axes[0].options">
-                    </select>
+            <div class="gl-plot-display-area"
+                 ng-mouseenter="subplot.isHovering(true);"
+                 ng-mouseleave="subplot.isHovering(false)"
+                 ng-class="{ loading: plot.isRequestPending() }">
+                <!-- Out-of-bounds data indicators -->
+                <!-- ng-show is temporarily hard-coded in next element -->
+                <div ng-show="false" class="l-oob-data l-oob-data-up"></div>
+                <div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
+                <div class="gl-plot-hash hash-v"
+                     ng-repeat="tick in subplot.getDomainTicks()"
+                     ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
+                     ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
+                </div>
+                <div class="gl-plot-hash hash-h"
+                     ng-repeat="tick in subplot.getRangeTicks()"
+                     ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
+                     ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
+                </div>
+                <mct-chart draw="subplot.getDrawingObject()"
+                           ng-if="subplot.getTelemetryObjects().length > 0"
+                           ng-mousemove="subplot.hover($event)"
+                           mct-drag="subplot.continueDrag($event)"
+                           mct-drag-down="subplot.startDrag($event)"
+                           mct-drag-up="subplot.endDrag($event); plot.update()">
+                </mct-chart>
+                <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
+                <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
+                     ng-if="$first">
+                    <a class="s-button icon-arrow-left"
+                       ng-click="plot.stepBackPanZoom()"
+                       ng-show="plot.isZoomed()"
+                       title="Restore previous pan/zoom">
+                    </a>
+                    <a class="s-button icon-arrows-out"
+                       ng-click="plot.unzoom()"
+                       ng-show="plot.isZoomed()"
+                       title="Reset pan/zoom">
+                    </a>
+                    <div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
+                         ng-if="plot.getModeOptions().length > 1"
+                         ng-controller="ClickAwayController as toggle">
+                        <span class="l-click-area" ng-click="toggle.toggle()"></span>
+                        <span>{{plot.getMode().name}}</span>
+                        <div class="menu" ng-show="toggle.isActive()">
+                            <ul>
+                                <li ng-repeat="option in plot.getModeOptions()"
+                                    ng-click="plot.setMode(option); toggle.setState(false)"
+                                    class="{{option.cssclass}}">
+                                    {{option.name}}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
+                <div ng-repeat="tick in subplot.getDomainTicks()"
+                     class="gl-plot-tick gl-plot-x-tick-label"
+                     ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
+                     ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
+                    {{tick.label | reverse}}
+                </div>
+                <div class="gl-plot-label gl-plot-x-label">
+                    {{axes[0].active.name}}
+                </div>
+                <div class="gl-plot-x-options gl-plot-local-controls"
+                     ng-if="axes[0].options.length > 1">
+                    <div class='form-control shell select'>
+                        <select class="form-control input shell"
+                                ng-model="axes[0].active"
+                                ng-options="option.name for option in axes[0].options">
+                        </select>
+                    </div>
+                </div>
 
+            </div>
         </div>
     </div>
 </span>