mirror of
https://github.com/nasa/openmct.git
synced 2024-12-23 15:02:23 +00:00
74 lines
3.0 KiB
HTML
74 lines
3.0 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="textfield"
|
|
placeholder="YYYY-MM-DD HH:mm:ss"
|
|
ng-model="startOuterDate"/>
|
|
End: <input type="textfield"
|
|
placeholder="YYYY-MM-DD HH:mm:ss"
|
|
ng-model="endOuterDate"/>
|
|
</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"
|
|
mct-drag-down="startMiddleDrag()"
|
|
mct-drag="middleDrag(delta[0])"
|
|
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
|
</div>
|
|
</div>
|
|
<div class="knob knob-l"
|
|
mct-drag-down="startLeftDrag()"
|
|
mct-drag="leftDrag(delta[0])"
|
|
ng-style="{ left: startInnerPct }">
|
|
<div class="range-value">{{startInnerText}}</div>
|
|
</div>
|
|
<div class="knob knob-r"
|
|
mct-drag-down="startRightDrag()"
|
|
mct-drag="rightDrag(delta[0])"
|
|
ng-style="{ right: endInnerPct }">
|
|
<div class="range-value">{{endInnerText}}</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>
|