ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-23 15:02:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Front-end] WIP Markup and CSS for Follow Line

Browse Source 
Fixes #1688
Moved TimelineTOIController up 2 levels of markup hierarchy
to allow Follow Lines, one in each split pane;
Follow LInes markup and CSS in progress;
This commit is contained in:
Charles Hacskaylo 2017-09-18 15:07:35 -07:00
parent 8ec3c42291
commit fc49e5d023
2 changed files with 105 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platform/features/timeline/res/sass/_timelines.scss
View File

@ -329,6 +329,7 @@
// Follow Line // Follow Line
.l-follow-line { .l-follow-line {
pointer-events: none;
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0; bottom: 0;
width: 1px; width: 1px;
@ -336,7 +337,7 @@
} }
.s-follow-line { .s-follow-line {
background: rgba(red, 0.5); background: rgba($timeControllerToiLineColor, 0.5);
} }
} }

17
platform/features/timeline/res/templates/timeline.html
View File

@ -96,13 +96,14 @@
<!-- RIGHT PANE: GANTT AND RESOURCE PLOTS --> <!-- RIGHT PANE: GANTT AND RESOURCE PLOTS -->
<span ng-controller="TimelineZoomController as zoomController" class="abs"> <span ng-controller="TimelineZoomController as zoomController" class="abs">
<span class="toi-control-holder temp" ng-controller="TimelineTOIController as toiController">
<mct-split-pane anchor="bottom" <mct-split-pane anchor="bottom"
position="pane.y" position="pane.y"
class="abs split-pane-component l-timeline-pane l-pane-r t-pane-v"> class="abs split-pane-component l-timeline-pane l-pane-r t-pane-v">
<!-- TOP PANE GANTT BARS --> <!-- TOP PANE GANTT BARS -->
<div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt" <div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
ng-controller="TimelineTOIController as toiController">
<div class="l-hover-btns-holder s-hover-btns-holder"> <div class="l-hover-btns-holder s-hover-btns-holder">
<a class="s-button icon-clock" <a class="s-button icon-clock"
ng-click="scroll.follow = true" ng-click="scroll.follow = true"
@ -129,7 +130,7 @@
</a> </a>
</div> </div>
<div class="abs l-timeline-gantt-header-w" mct-scroll-x="scroll.x"> <div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">
<mct-include key="'timeline-ticks'" <mct-include key="'timeline-ticks'"
parameters="{ parameters="{
fullWidth: zoomController.width(timelineController.end()), fullWidth: zoomController.width(timelineController.end()),
@ -139,10 +140,9 @@
toMillis: zoomController.toMillis toMillis: zoomController.toMillis
}"> }">
</mct-include> </mct-include>
<div class="t-follow-line l-follow-line s-follow-line" ng-if="toiController.isActive()"
ng-style="{ left: toiController.x() + 'px' }">
</div>
</div> </div>
<div ng-if="toiController.isActive()" class="l-follow-line s-follow-line"
ng-style="{ left: toiController.x() - scroll.x + 'px' }"></div>
<div class="t-swimlanes-holder l-swimlanes-holder" <div class="t-swimlanes-holder l-swimlanes-holder"
mct-scroll-x="scroll.x" mct-scroll-x="scroll.x"
@ -200,6 +200,8 @@
}"> }">
</mct-include> </mct-include>
</div> </div>
<div ng-if="toiController.isActive()" class="l-follow-line s-follow-line"
ng-style="{ left: toiController.x() - scroll.x + 'px' }"></div>
</div> </div>
<div mct-scroll-x="scroll.x" <div mct-scroll-x="scroll.x"
class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control"> class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control">
@ -210,5 +212,8 @@
</div> </div>
</mct-split-pane> </mct-split-pane>
</span> </span>
</span>
</mct-split-pane> </mct-split-pane>
</div> </div>