mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 22:42:24 +00:00
62 lines
2.5 KiB
HTML
62 lines
2.5 KiB
HTML
<!--
|
|
|
|
NOTES
|
|
|
|
Ticks:
|
|
The thinking is to divide whatever the current time span is by 5,
|
|
and assign values accordingly to 5 statically-positioned ticks. So the tick x-position is a static percentage
|
|
of the total width available, and the labels change dynamically. This is consistent
|
|
with our current approach to the time axis of plots.
|
|
I'm keeping the number of ticks low so that when the view portal gets narrow,
|
|
the tick labels won't collide with each other. For extra credit, add/remove ticks as the user resizes the view area.
|
|
Note: this eval needs to be based on the whatever is containing the
|
|
time-controller component, not the whole browser window.
|
|
|
|
Range indicator and slider knobs:
|
|
The left and right properties used in .slider .range-holder and the .knobs are
|
|
CSS offsets from the left and right of their respective containers. You
|
|
may want or need to calculate those positions as pure offsets from the start datetime
|
|
(or left, as it were) and set them as left properties. No problem if so, but
|
|
we'll need to tweak the CSS tiny bit to get the center of the knobs to line up
|
|
properly on the range left and right bounds.
|
|
|
|
-->
|
|
|
|
<div class="l-time-controller" ng-controller="TimeConductorController">
|
|
<div class="l-time-range-inputs-holder">
|
|
Start: <input type="date" ng-model="startOuterDate"/>
|
|
End: <input type="date" ng-model="endInnerDate"/>
|
|
</div>
|
|
|
|
<div class="l-time-range-slider-holder">
|
|
<div class="l-time-range-slider">
|
|
<div class="slider"
|
|
mct-resize="spanWidth = bounds.width">
|
|
<div class="slot range-holder">
|
|
<div class="range"
|
|
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
|
</div>
|
|
</div>
|
|
<div class="knob knob-l" ng-style="{ left: startInnerPct }">
|
|
<div class="range-value">{{startInnerText}}</div>
|
|
</div>
|
|
<div class="knob knob-r" ng-style="{ right: endInnerPct }">
|
|
<div class="range-value">{{startOuterText}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-time-range-ticks-holder">
|
|
<div class="l-time-range-ticks">
|
|
<div
|
|
ng-repeat="tick in ticks"
|
|
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
|
|
class="tick tick-x"
|
|
>
|
|
<span class="l-time-range-tick-label">{{tick}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|