mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
[Frontend] Styling for TOI element in plots
Fixes #933 Fixes #1193 Relates to #1182 WIP, adding TOI to plot view; Integrated Andrew's work from #1182; Significant changes to markup and additions to plot scss;
This commit is contained in:
Charles Hacskaylo
parent
2c7ae95106
commit
27e6caf69b
@ -96,7 +96,7 @@ $plotXBarH: 32px;
|
||||
$plotLegendH: 20px;
|
||||
$plotSwatchD: 8px;
|
||||
// 1: Top, 2: right, 3: bottom, 4: left
|
||||
$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH + $interiorMargin, $plotYBarW);
|
||||
$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH, $plotYBarW);
|
||||
/* min plot height is based on user testing to find minimum useful height */
|
||||
$plotMinH: 95px;
|
||||
/*************** Bubbles */
|
||||
|
||||
@ -19,6 +19,14 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@mixin reverseEllipsis() {
|
||||
direction: rtl;
|
||||
unicode-bidi:bidi-override;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.abs.holder-plot {
|
||||
// Fend off the scrollbar when less than min-height;
|
||||
right: $interiorMargin;
|
||||
@ -46,18 +54,118 @@
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
// Holds the plot area and the X-axis only
|
||||
//@include test(blue, 0.1);
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: nth($plotDisplayArea, 2);
|
||||
bottom: 0;
|
||||
left: nth($plotDisplayArea, 4);
|
||||
|
||||
.gl-plot-display-area {
|
||||
//@include test(yellow);
|
||||
@if $colorPlotBg != none {
|
||||
background-color: $colorPlotBg;
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: 0;
|
||||
cursor: crosshair;
|
||||
border: 1px solid $colorPlotAreaBorder;
|
||||
}
|
||||
|
||||
.gl-plot-axis-area.gl-plot-x {
|
||||
//@include test(green);
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: $plotXBarH;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.l-toi-holder {
|
||||
//@include test(green);
|
||||
$cBg: #666 ;
|
||||
$cBgPinnedOpacity: 0.3;
|
||||
$cBgPinned: rgba($colorKey, 0.4);
|
||||
//@include transform(translateX(-50%));
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned
|
||||
min-width: 50px;
|
||||
max-width: 150px;
|
||||
width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
&:before {
|
||||
// Vertical line
|
||||
//background-color: $cBg;
|
||||
border-left: 1px dashed $cBg;
|
||||
content:'';
|
||||
display: block;
|
||||
left: 50%;
|
||||
//@include transform(translateX(-50%));
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
width: 1px;
|
||||
}
|
||||
.l-toi-val {
|
||||
//@include test(green);
|
||||
background-color: $cBg;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
//display: inline-block;
|
||||
padding: $interiorMarginSm $interiorMarginSm;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
//white-space: nowrap;
|
||||
width: 100%;
|
||||
bottom: -2px;
|
||||
border-radius: $controlCr;
|
||||
.val {
|
||||
@include reverseEllipsis();
|
||||
//display: inline-block;
|
||||
}
|
||||
.t-unpin-button {
|
||||
//display: inline-block;
|
||||
margin-left: $interiorMarginSm;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
//opacity: 0.4;
|
||||
&:before {
|
||||
border-left-color: $cBgPinned;
|
||||
border-left-style: solid;
|
||||
}
|
||||
.l-toi-val {
|
||||
background-color: $cBgPinned;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $controlCr;
|
||||
border-top-right-radius: $controlCr;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pinned) {
|
||||
.l-toi-val {
|
||||
@include transform(translateY(100%)); // Position of element when TOI is visible but not pinned
|
||||
}
|
||||
.t-unpin-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-axis-area {
|
||||
//@include test();
|
||||
position: absolute;
|
||||
&.gl-plot-x {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: $interiorMargin;
|
||||
left: $plotYBarW;
|
||||
height: $plotXBarH;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.gl-plot-y {
|
||||
top: $plotLegendH + $interiorMargin;
|
||||
right: auto;
|
||||
@ -84,19 +192,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area {
|
||||
@if $colorPlotBg != none {
|
||||
background-color: $colorPlotBg;
|
||||
}
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: nth($plotDisplayArea, 2);
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: nth($plotDisplayArea, 4);
|
||||
cursor: crosshair;
|
||||
border: 1px solid $colorPlotAreaBorder;
|
||||
}
|
||||
|
||||
.gl-plot-label,
|
||||
.l-plot-label {
|
||||
color: $colorPlotLabelFg;
|
||||
@ -265,13 +360,9 @@
|
||||
|
||||
.gl-plot-tick,
|
||||
.tick-label {
|
||||
direction: rtl;
|
||||
unicode-bidi:bidi-override;
|
||||
@include reverseEllipsis();
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&.gl-plot-x-tick-label,
|
||||
&.tick-label-x {
|
||||
right: auto;
|
||||
|
||||
@ -45,21 +45,16 @@
|
||||
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
|
||||
ng-repeat="subplot in plot.getSubPlots()">
|
||||
<div class="gl-plot-legend">
|
||||
<!-- ng-class is temporarily hard-coded in next element -->
|
||||
<span
|
||||
class='plot-legend-item'
|
||||
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
|
||||
ng-class="plot.getLegendClass(telemetryObject)">
|
||||
<span class='plot-color-swatch'
|
||||
ng-style="{ 'background-color': plot.getColor($index) }">
|
||||
<span class='plot-legend-item'
|
||||
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
|
||||
ng-class="plot.getLegendClass(telemetryObject)">
|
||||
<span class='plot-color-swatch'
|
||||
ng-style="{ 'background-color': plot.getColor($index) }">
|
||||
</span>
|
||||
<span class='title-label'>{{telemetryObject.getModel().name}}</span>
|
||||
</span>
|
||||
<span class='title-label'>{{telemetryObject.getModel().name}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="gl-plot-coords"
|
||||
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
||||
{{subplot.getHoverCoordinates()}}
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-axis-area gl-plot-y">
|
||||
<div class="gl-plot-label gl-plot-y-label">
|
||||
{{axes[1].active.name}}
|
||||
@ -79,91 +74,102 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-plot-display-area"
|
||||
ng-mouseenter="subplot.isHovering(true);"
|
||||
ng-mouseleave="subplot.isHovering(false)"
|
||||
ng-class="{ loading: plot.isRequestPending() }">
|
||||
|
||||
<!-- new wrapper inserted here -->
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
|
||||
<!-- TOI element -->
|
||||
<div class="l-toi-holder">
|
||||
<!-- Need text vals at top and bottom, plus vertical line -->
|
||||
<div class="l-toi-val">
|
||||
<span class="val">{{subplot.getHoverCoordinates()}}</span>
|
||||
<a class="s-icon-button icon-x"></a>
|
||||
<div class="l-toi-holder"
|
||||
style="left: 20%">
|
||||
<!-- Need text val at bottom, plus vertical line -->
|
||||
<div class="l-toi-val l-flex-row">
|
||||
<span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
|
||||
<a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Out-of-bounds data indicators -->
|
||||
<!-- ng-show is temporarily hard-coded in next element -->
|
||||
<div ng-show="false" class="l-oob-data l-oob-data-up"></div>
|
||||
<div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
|
||||
<div class="gl-plot-hash hash-v"
|
||||
ng-repeat="tick in subplot.getDomainTicks()"
|
||||
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
|
||||
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
|
||||
<div class="gl-plot-coords"
|
||||
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
||||
{{subplot.getHoverCoordinates()}}
|
||||
</div>
|
||||
<div class="gl-plot-hash hash-h"
|
||||
ng-repeat="tick in subplot.getRangeTicks()"
|
||||
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
|
||||
ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
|
||||
</div>
|
||||
<mct-chart draw="subplot.getDrawingObject()"
|
||||
ng-if="subplot.getTelemetryObjects().length > 0"
|
||||
ng-mousemove="subplot.hover($event)"
|
||||
mct-drag="subplot.continueDrag($event)"
|
||||
mct-drag-down="subplot.startDrag($event)"
|
||||
mct-drag-up="subplot.endDrag($event); plot.update()">
|
||||
</mct-chart>
|
||||
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
|
||||
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
|
||||
ng-if="$first">
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.stepBackPanZoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
<a class="s-button icon-arrows-out"
|
||||
ng-click="plot.unzoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
<div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
|
||||
ng-if="plot.getModeOptions().length > 1"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
<span>{{plot.getMode().name}}</span>
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-repeat="option in plot.getModeOptions()"
|
||||
ng-click="plot.setMode(option); toggle.setState(false)"
|
||||
class="{{option.cssclass}}">
|
||||
{{option.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="gl-plot-display-area"
|
||||
ng-mouseenter="subplot.isHovering(true);"
|
||||
ng-mouseleave="subplot.isHovering(false)"
|
||||
ng-class="{ loading: plot.isRequestPending() }">
|
||||
|
||||
<!-- Out-of-bounds data indicators -->
|
||||
<!-- ng-show is temporarily hard-coded in next element -->
|
||||
<div ng-show="false" class="l-oob-data l-oob-data-up"></div>
|
||||
<div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
|
||||
<div class="gl-plot-hash hash-v"
|
||||
ng-repeat="tick in subplot.getDomainTicks()"
|
||||
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
|
||||
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
|
||||
</div>
|
||||
<div class="gl-plot-hash hash-h"
|
||||
ng-repeat="tick in subplot.getRangeTicks()"
|
||||
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
|
||||
ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
|
||||
</div>
|
||||
<mct-chart draw="subplot.getDrawingObject()"
|
||||
ng-if="subplot.getTelemetryObjects().length > 0"
|
||||
ng-mousemove="subplot.hover($event)"
|
||||
mct-drag="subplot.continueDrag($event)"
|
||||
mct-drag-down="subplot.startDrag($event)"
|
||||
mct-drag-up="subplot.endDrag($event); plot.update()">
|
||||
</mct-chart>
|
||||
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
|
||||
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
|
||||
ng-if="$first">
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.stepBackPanZoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
<a class="s-button icon-arrows-out"
|
||||
ng-click="plot.unzoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
<div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
|
||||
ng-if="plot.getModeOptions().length > 1"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
<span>{{plot.getMode().name}}</span>
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-repeat="option in plot.getModeOptions()"
|
||||
ng-click="plot.setMode(option); toggle.setState(false)"
|
||||
class="{{option.cssclass}}">
|
||||
{{option.name}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
|
||||
<div ng-repeat="tick in subplot.getDomainTicks()"
|
||||
class="gl-plot-tick gl-plot-x-tick-label"
|
||||
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
|
||||
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
|
||||
{{tick.label | reverse}}
|
||||
</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-if="axes[0].options.length > 1">
|
||||
<div class='form-control shell select'>
|
||||
<select class="form-control input shell"
|
||||
ng-model="axes[0].active"
|
||||
ng-options="option.name for option in axes[0].options">
|
||||
</select>
|
||||
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
|
||||
<div ng-repeat="tick in subplot.getDomainTicks()"
|
||||
class="gl-plot-tick gl-plot-x-tick-label"
|
||||
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
|
||||
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
|
||||
{{tick.label | reverse}}
|
||||
</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-if="axes[0].options.length > 1">
|
||||
<div class='form-control shell select'>
|
||||
<select class="form-control input shell"
|
||||
ng-model="axes[0].active"
|
||||
ng-options="option.name for option in axes[0].options">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user