mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 14:07:50 +00:00
f3b83e0db7
Add icons for plot pan/zoom controls, to step back through or undo pan/zoom states. WTD-533.
122 lines
4.3 KiB
HTML
122 lines
4.3 KiB
HTML
<div class="gl-plot"
|
|
ng-controller="TelemetryController as telemetry">
|
|
<span ng-controller="PlotController as plot"
|
|
ng-mouseleave="representation.showControls = false">
|
|
|
|
<div class="gl-plot-legend">
|
|
<span class='plot-legend-item'
|
|
ng-repeat="telemetryObject in telemetry.getTelemetryObjects() track by $index">
|
|
<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="representation.showControls">
|
|
{{plot.getHoverCoordinates().join(', ')}}
|
|
</div>
|
|
|
|
<div class="gl-plot-axis-area gl-plot-y">
|
|
|
|
<div class="gl-plot-label gl-plot-y-label"
|
|
ng-show="!representation.showControls">
|
|
{{axes[1].active.name}}
|
|
</div>
|
|
|
|
<div ng-repeat="tick in axes[1].ticks"
|
|
class="gl-plot-tick gl-plot-y-tick-label"
|
|
ng-style="{ bottom: (100 * $index / (axes[1].ticks.length - 1)) + '%' }">
|
|
{{tick.label}}
|
|
</div>
|
|
|
|
<div class="gl-plot-y-options gl-plot-local-controls"
|
|
ng-show="representation.showControls"
|
|
ng-if="axes[1].options.length > 0">
|
|
<div class='form-control shell select'>
|
|
<select class="form-control input shell select"
|
|
ng-model="axes[1].active"
|
|
ng-options="option.name for option in axes[1].options">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="gl-plot-display-area"
|
|
ng-mouseenter="representation.showControls = true">
|
|
|
|
|
|
<div class="gl-plot-hash hash-v"
|
|
ng-repeat="tick in axes[0].ticks"
|
|
ng-style="{ left: (100 * $index / (axes[0].ticks.length - 1)) + '%', height: '100%' }"
|
|
ng-show="$index > 0 && $index < (axes[0].ticks.length - 1)">
|
|
</div>
|
|
<div class="gl-plot-hash hash-h"
|
|
ng-repeat="tick in axes[1].ticks"
|
|
ng-style="{ bottom: (100 * $index / (axes[1].ticks.length - 1)) + '%', width: '100%' }"
|
|
ng-show="$index > 0 && $index < (axes[1].ticks.length - 1)">
|
|
</div>
|
|
|
|
<mct-chart draw="draw"
|
|
ng-mousemove="plot.hover($event)"
|
|
ng-mousedown="plot.startMarquee($event)"
|
|
ng-mouseup="plot.endMarquee($event)">
|
|
</mct-chart>
|
|
|
|
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
|
|
<div class="gl-plot-local-controls"
|
|
style="position: absolute; top: 8px; right: 8px;">
|
|
|
|
<a href=""
|
|
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
|
ng-click="plot.stepBackPanZoom()"
|
|
ng-show="plot.isZoomed()"
|
|
title="Restore previous pan/zoom">
|
|
<span class="ui-symbol icon"><</span>
|
|
</a>
|
|
|
|
<a href=""
|
|
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
|
ng-click="plot.unzoom()"
|
|
ng-show="plot.isZoomed()"
|
|
title="Reset pan/zoom">
|
|
<span class="ui-symbol icon">I</span>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<span class="t-wait-spinner loading" ng-show="telemetry.isRequestPending()">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="gl-plot-axis-area gl-plot-x">
|
|
|
|
<div ng-repeat="tick in axes[0].ticks"
|
|
class="gl-plot-tick gl-plot-x-tick-label"
|
|
ng-show="$index > 0 && $index < (axes[0].ticks.length - 1)"
|
|
ng-style="{ left: (100 * $index / (axes[0].ticks.length - 1)) + '%' }">
|
|
{{tick.label}}
|
|
</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-show="representation.showControls"
|
|
ng-if="axes[0].options.length > 0">
|
|
<div class='form-control shell select'>
|
|
<select class="form-control input shell select"
|
|
ng-model="axes[0].active"
|
|
ng-options="option.name for option in axes[0].options">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
|