Skip to content

Commit

Permalink
[Frontend] Styling for TOI element in plots
Browse files Browse the repository at this point in the history 
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;
  • Loading branch information
@charlesh88
charlesh88 committed Sep 17, 2016
1 parent 2c7ae95 commit 27e6caf
Show file tree
Hide file tree
Showing 3 changed files with 213 additions and 116 deletions.
2 changes: 1 addition & 1 deletion platform/commonUI/general/res/sass/_constants.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
147 changes: 119 additions & 28 deletions platform/commonUI/general/res/sass/plots/_plots-main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
180 changes: 93 additions & 87 deletions platform/features/plot/res/templates/plot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -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>
Expand Down

0 comments on commit 27e6caf

Please sign in to comment.