ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-13 20:58:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] New markup for CSS from #1166

Browse Source 
Fixes #967
Requires new styles implemented in #1166
This commit is contained in:
Charles Hacskaylo
2016-09-01 19:48:41 -07:00
parent c9868762a4
commit 0457f7bee8
1 changed files with 120 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
platform/features/plot/res/templates/plot.html
View File

@ -20,120 +20,141 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span ng-controller="PlotController as plot" <span ng-controller="PlotController as plot"
class="abs holder holder-plot"> class="abs holder holder-plot has-control-bar">
<div class="gl-plot" <div class="l-control-bar">
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}" has-control-bar<span class="l-btn-set">
ng-repeat="subplot in plot.getSubPlots()"> <a class="s-button t-export icon-download labeled first"
<div class="gl-plot-legend"> ng-click="exportPDF()"
<!-- ng-class is temporarily hard-coded in next element --> 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 <span
class='plot-legend-item' class='plot-legend-item'
ng-repeat="telemetryObject in subplot.getTelemetryObjects()" ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
ng-class="plot.getLegendClass(telemetryObject)"> ng-class="plot.getLegendClass(telemetryObject)">
<span class='plot-color-swatch' <span class='plot-color-swatch'
ng-style="{ 'background-color': plot.getColor($index) }"> ng-style="{ 'background-color': plot.getColor($index) }">
</span> </span>
<span class='title-label'>{{telemetryObject.getModel().name}}</span> <span class='title-label'>{{telemetryObject.getModel().name}}</span>
</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>
<div ng-repeat="tick in subplot.getRangeTicks()" <div class="gl-plot-coords"
class="gl-plot-tick gl-plot-y-tick-label" ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }"> {{subplot.getHoverCoordinates()}}
{{tick.label | reverse}}
</div> </div>
<div class="gl-plot-y-options gl-plot-local-controls" <div class="gl-plot-axis-area gl-plot-y">
ng-if="axes[1].options.length > 1"> <div class="gl-plot-label gl-plot-y-label">
<div class='form-control shell select'> {{axes[1].active.name}}
<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 ng-repeat="tick in subplot.getRangeTicks()"
</div> class="gl-plot-tick gl-plot-y-tick-label"
<div class="gl-plot-display-area" ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }">
ng-mouseenter="subplot.isHovering(true);" {{tick.label | reverse}}
ng-mouseleave="subplot.isHovering(false)" </div>
ng-class="{ loading: plot.isRequestPending() }"> <div class="gl-plot-y-options gl-plot-local-controls"
<!-- Out-of-bounds data indicators --> ng-if="axes[1].options.length > 1">
<!-- ng-show is temporarily hard-coded in next element --> <div class='form-control shell select'>
<div ng-show="false" class="l-oob-data l-oob-data-up"></div> <select class="form-control input shell"
<div ng-show="false" class="l-oob-data l-oob-data-dwn"></div> ng-model="axes[1].active"
<div class="gl-plot-hash hash-v" ng-options="option.name for option in axes[1].options">
ng-repeat="tick in subplot.getDomainTicks()" </select>
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> </div>
</div> <div class="gl-plot-display-area"
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x"> ng-mouseenter="subplot.isHovering(true);"
<div ng-repeat="tick in subplot.getDomainTicks()" ng-mouseleave="subplot.isHovering(false)"
class="gl-plot-tick gl-plot-x-tick-label" ng-class="{ loading: plot.isRequestPending() }">
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)" <!-- Out-of-bounds data indicators -->
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }"> <!-- ng-show is temporarily hard-coded in next element -->
{{tick.label | reverse}} <div ng-show="false" class="l-oob-data l-oob-data-up"></div>
</div> <div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
<div class="gl-plot-label gl-plot-x-label"> <div class="gl-plot-hash hash-v"
{{axes[0].active.name}} ng-repeat="tick in subplot.getDomainTicks()"
</div> ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
<div class="gl-plot-x-options gl-plot-local-controls" ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
ng-if="axes[0].options.length > 1"> </div>
<div class='form-control shell select'> <div class="gl-plot-hash hash-h"
<select class="form-control input shell" ng-repeat="tick in subplot.getRangeTicks()"
ng-model="axes[0].active" ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
ng-options="option.name for option in axes[0].options"> ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
</select> </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> </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>
</div> </div>
</span> </span>