mirror of
https://github.com/nasa/openmct.git
synced 2025-05-03 17:22:56 +00:00
[Front-end] WIP Markup and CSS for Follow Line
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
parent
8ec3c42291
commit
fc49e5d023
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -96,119 +96,124 @@
|
|||||||
|
|
||||||
<!-- 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">
|
||||||
<mct-split-pane anchor="bottom"
|
|
||||||
|
<span class="toi-control-holder temp" ng-controller="TimelineTOIController as toiController">
|
||||||
|
<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"
|
ng-show="!toiController.isFollowing() && toiController.isActive()"
|
||||||
ng-show="!toiController.isFollowing() && toiController.isActive()"
|
title="Follow time bounds">
|
||||||
title="Follow time bounds">
|
</a>
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="s-button icon-arrows-out"
|
<a class="s-button icon-arrows-out"
|
||||||
ng-click="scroll.follow = false; zoomController.fit()"
|
ng-click="scroll.follow = false; zoomController.fit()"
|
||||||
ng-show="true"
|
ng-show="true"
|
||||||
title="Zoom to fit">
|
title="Zoom to fit">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="s-button icon-magnify-in"
|
<a class="s-button icon-magnify-in"
|
||||||
ng-click="scroll.follow = false; zoomController.zoom(-1)"
|
ng-click="scroll.follow = false; zoomController.zoom(-1)"
|
||||||
ng-show="true"
|
ng-show="true"
|
||||||
title="Zoom in">
|
title="Zoom in">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="s-button icon-magnify-out"
|
<a class="s-button icon-magnify-out"
|
||||||
ng-click="scroll.follow = false; zoomController.zoom(1)"
|
ng-click="scroll.follow = false; zoomController.zoom(1)"
|
||||||
ng-show="true"
|
ng-show="true"
|
||||||
title="Zoom out">
|
title="Zoom out">
|
||||||
</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()),
|
||||||
start: scroll.x,
|
start: scroll.x,
|
||||||
width: scroll.width,
|
width: scroll.width,
|
||||||
step: zoomController.toPixels(zoomController.zoom()),
|
step: zoomController.toPixels(zoomController.zoom()),
|
||||||
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()"
|
</div>
|
||||||
ng-style="{ left: toiController.x() + 'px' }">
|
<div ng-if="toiController.isActive()" class="l-follow-line s-follow-line"
|
||||||
</div>
|
ng-style="{ left: toiController.x() - scroll.x + 'px' }"></div>
|
||||||
</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"
|
||||||
mct-scroll-y="scroll.y">
|
mct-scroll-y="scroll.y">
|
||||||
<div class="l-width-control"
|
<div class="l-width-control"
|
||||||
ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
|
ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
|
||||||
<div class="t-swimlane s-swimlane l-swimlane"
|
<div class="t-swimlane s-swimlane l-swimlane"
|
||||||
ng-repeat="swimlane in timelineController.swimlanes()"
|
ng-repeat="swimlane in timelineController.swimlanes()"
|
||||||
ng-class="{
|
ng-class="{
|
||||||
exceeded: swimlane.exceeded(),
|
exceeded: swimlane.exceeded(),
|
||||||
selected: selection.selected(swimlane),
|
selected: selection.selected(swimlane),
|
||||||
'drop-into': swimlane.highlight(),
|
'drop-into': swimlane.highlight(),
|
||||||
'drop-after': swimlane.highlightBottom()
|
'drop-after': swimlane.highlightBottom()
|
||||||
}"
|
}"
|
||||||
ng-click="selection.select(swimlane)"
|
ng-click="selection.select(swimlane)"
|
||||||
mct-swimlane-drop="swimlane">
|
mct-swimlane-drop="swimlane">
|
||||||
|
|
||||||
<mct-representation key="'gantt'"
|
<mct-representation key="'gantt'"
|
||||||
mct-object="swimlane.domainObject"
|
mct-object="swimlane.domainObject"
|
||||||
parameters="{
|
parameters="{
|
||||||
scroll: scroll,
|
scroll: scroll,
|
||||||
toPixels: zoomController.toPixels
|
toPixels: zoomController.toPixels
|
||||||
}">
|
}">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
|
|
||||||
<span ng-if="selection.selected(swimlane)">
|
<span ng-if="selection.selected(swimlane)">
|
||||||
<span ng-repeat="handle in timelineController.handles()"
|
<span ng-repeat="handle in timelineController.handles()"
|
||||||
ng-style="handle.style(zoomController)"
|
ng-style="handle.style(zoomController)"
|
||||||
style="position: absolute; top: 0px; bottom: 0px;"
|
style="position: absolute; top: 0px; bottom: 0px;"
|
||||||
class="handle"
|
class="handle"
|
||||||
ng-class="{ start: $index === 0, mid: $index === 1, end: $index > 1 }"
|
ng-class="{ start: $index === 0, mid: $index === 1, end: $index > 1 }"
|
||||||
mct-drag-down="handle.begin()"
|
mct-drag-down="handle.begin()"
|
||||||
mct-drag="handle.drag(delta[0], zoomController); timelineController.refresh()"
|
mct-drag="handle.drag(delta[0], zoomController); timelineController.refresh()"
|
||||||
mct-drag-up="handle.finish()">
|
mct-drag-up="handle.finish()">
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- HORZ SPLITTER -->
|
<!-- HORZ SPLITTER -->
|
||||||
<mct-splitter></mct-splitter>
|
<mct-splitter></mct-splitter>
|
||||||
|
|
||||||
<!-- BOTTOM PANE RESOURCE GRAPHS AND RIGHT PANE HORIZONTAL SCROLL CONTROL -->
|
<!-- BOTTOM PANE RESOURCE GRAPHS AND RIGHT PANE HORIZONTAL SCROLL CONTROL -->
|
||||||
<div class="split-pane-component l-timeline-resource-graph l-timeline-pane t-pane-h l-pane-btm">
|
<div class="split-pane-component l-timeline-resource-graph l-timeline-pane t-pane-h l-pane-btm">
|
||||||
<div class="l-graphs-holder"
|
<div class="l-graphs-holder"
|
||||||
mct-resize="scroll.width = bounds.width">
|
mct-resize="scroll.width = bounds.width">
|
||||||
<div class="t-graphs l-graphs">
|
<div class="t-graphs l-graphs">
|
||||||
<mct-include key="'timeline-resource-graphs'"
|
<mct-include key="'timeline-resource-graphs'"
|
||||||
parameters="{
|
parameters="{
|
||||||
origin: zoomController.toMillis(scroll.x),
|
origin: zoomController.toMillis(scroll.x),
|
||||||
duration: zoomController.toMillis(scroll.width),
|
duration: zoomController.toMillis(scroll.width),
|
||||||
graphs: timelineController.graphs()
|
graphs: timelineController.graphs()
|
||||||
}">
|
}">
|
||||||
</mct-include>
|
</mct-include>
|
||||||
|
</div>
|
||||||
|
<div ng-if="toiController.isActive()" class="l-follow-line s-follow-line"
|
||||||
|
ng-style="{ left: toiController.x() - scroll.x + 'px' }"></div>
|
||||||
|
</div>
|
||||||
|
<div mct-scroll-x="scroll.x"
|
||||||
|
class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control">
|
||||||
|
<div class="l-width-control"
|
||||||
|
ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</mct-split-pane>
|
||||||
<div mct-scroll-x="scroll.x"
|
</span>
|
||||||
class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control">
|
|
||||||
<div class="l-width-control"
|
|
||||||
ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mct-split-pane>
|
|
||||||
</span>
|
</span>
|
||||||
</mct-split-pane>
|
</mct-split-pane>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user