Skip to content

Commit 27e6caf

Browse files
charlesh88charlesh88
committed
[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;
1 parent 2c7ae95 commit 27e6caf

File tree

3 files changed

+213
-116
lines changed

3 files changed

+213
-116
lines changed

‎platform/commonUI/general/res/sass/_constants.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ $plotXBarH: 32px;
9696
$plotLegendH: 20px;
9797
$plotSwatchD: 8px;
9898
// 1: Top, 2: right, 3: bottom, 4: left
99-
$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH + $interiorMargin, $plotYBarW);
99+
$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH, $plotYBarW);
100100
/* min plot height is based on user testing to find minimum useful height */
101101
$plotMinH: 95px;
102102
/*************** Bubbles */

‎platform/commonUI/general/res/sass/plots/_plots-main.scss

+119-28
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@
1919
* this source code distribution or the Licensing information page available
2020
* at runtime from the About dialog for additional information.
2121
*****************************************************************************/
22+
@mixin reverseEllipsis() {
23+
direction: rtl;
24+
unicode-bidi:bidi-override;
25+
overflow: hidden;
26+
white-space: nowrap;
27+
text-overflow: ellipsis;
28+
}
29+
2230
.abs.holder-plot {
2331
// Fend off the scrollbar when less than min-height;
2432
right: $interiorMargin;
@@ -46,18 +54,118 @@
4654
}
4755
}
4856

57+
.gl-plot-wrapper-display-area-and-x-axis {
58+
// Holds the plot area and the X-axis only
59+
//@include test(blue, 0.1);
60+
position: absolute;
61+
top: nth($plotDisplayArea, 1);
62+
right: nth($plotDisplayArea, 2);
63+
bottom: 0;
64+
left: nth($plotDisplayArea, 4);
65+
66+
.gl-plot-display-area {
67+
//@include test(yellow);
68+
@if $colorPlotBg != none {
69+
background-color: $colorPlotBg;
70+
}
71+
position: absolute;
72+
top: 0;
73+
right: 0;
74+
bottom: nth($plotDisplayArea, 3);
75+
left: 0;
76+
cursor: crosshair;
77+
border: 1px solid $colorPlotAreaBorder;
78+
}
79+
80+
.gl-plot-axis-area.gl-plot-x {
81+
//@include test(green);
82+
top: auto;
83+
right: 0;
84+
bottom: 0;
85+
left: 0;
86+
height: $plotXBarH;
87+
width: auto;
88+
overflow: hidden;
89+
}
90+
91+
.l-toi-holder {
92+
//@include test(green);
93+
$cBg: #666 ;
94+
$cBgPinnedOpacity: 0.3;
95+
$cBgPinned: rgba($colorKey, 0.4);
96+
//@include transform(translateX(-50%));
97+
pointer-events: none;
98+
position: absolute;
99+
top: 0;
100+
bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned
101+
min-width: 50px;
102+
max-width: 150px;
103+
width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
104+
&:before {
105+
// Vertical line
106+
//background-color: $cBg;
107+
border-left: 1px dashed $cBg;
108+
content:'';
109+
display: block;
110+
left: 50%;
111+
//@include transform(translateX(-50%));
112+
position: absolute;
113+
top: 0; bottom: 0;
114+
width: 1px;
115+
}
116+
.l-toi-val {
117+
//@include test(green);
118+
background-color: $cBg;
119+
color: #fff;
120+
box-sizing: border-box;
121+
//display: inline-block;
122+
padding: $interiorMarginSm $interiorMarginSm;
123+
position: absolute;
124+
text-align: center;
125+
//white-space: nowrap;
126+
width: 100%;
127+
bottom: -2px;
128+
border-radius: $controlCr;
129+
.val {
130+
@include reverseEllipsis();
131+
//display: inline-block;
132+
}
133+
.t-unpin-button {
134+
//display: inline-block;
135+
margin-left: $interiorMarginSm;
136+
pointer-events: auto;
137+
}
138+
}
139+
140+
&.pinned {
141+
//opacity: 0.4;
142+
&:before {
143+
border-left-color: $cBgPinned;
144+
border-left-style: solid;
145+
}
146+
.l-toi-val {
147+
background-color: $cBgPinned;
148+
border-radius: 0;
149+
border-top-left-radius: $controlCr;
150+
border-top-right-radius: $controlCr;
151+
bottom: 0px;
152+
}
153+
}
154+
155+
&:not(.pinned) {
156+
.l-toi-val {
157+
@include transform(translateY(100%)); // Position of element when TOI is visible but not pinned
158+
}
159+
.t-unpin-button {
160+
display: none;
161+
}
162+
}
163+
z-index: 3;
164+
}
165+
}
166+
49167
.gl-plot-axis-area {
50-
//@include test();
51168
position: absolute;
52-
&.gl-plot-x {
53-
top: auto;
54-
right: 0;
55-
bottom: $interiorMargin;
56-
left: $plotYBarW;
57-
height: $plotXBarH;
58-
width: auto;
59-
overflow: hidden;
60-
}
61169
&.gl-plot-y {
62170
top: $plotLegendH + $interiorMargin;
63171
right: auto;
@@ -84,19 +192,6 @@
84192
}
85193
}
86194

87-
.gl-plot-display-area {
88-
@if $colorPlotBg != none {
89-
background-color: $colorPlotBg;
90-
}
91-
position: absolute;
92-
top: nth($plotDisplayArea, 1);
93-
right: nth($plotDisplayArea, 2);
94-
bottom: nth($plotDisplayArea, 3);
95-
left: nth($plotDisplayArea, 4);
96-
cursor: crosshair;
97-
border: 1px solid $colorPlotAreaBorder;
98-
}
99-
100195
.gl-plot-label,
101196
.l-plot-label {
102197
color: $colorPlotLabelFg;
@@ -265,13 +360,9 @@
265360

266361
.gl-plot-tick,
267362
.tick-label {
268-
direction: rtl;
269-
unicode-bidi:bidi-override;
363+
@include reverseEllipsis();
270364
font-size: 0.7rem;
271365
position: absolute;
272-
overflow: hidden;
273-
white-space: nowrap;
274-
text-overflow: ellipsis;
275366
&.gl-plot-x-tick-label,
276367
&.tick-label-x {
277368
right: auto;

‎platform/features/plot/res/templates/plot.html

+93-87
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,16 @@
4545
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
4646
ng-repeat="subplot in plot.getSubPlots()">
4747
<div class="gl-plot-legend">
48-
<!-- ng-class is temporarily hard-coded in next element -->
49-
<span
50-
class='plot-legend-item'
51-
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
52-
ng-class="plot.getLegendClass(telemetryObject)">
53-
<span class='plot-color-swatch'
54-
ng-style="{ 'background-color': plot.getColor($index) }">
48+
<span class='plot-legend-item'
49+
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
50+
ng-class="plot.getLegendClass(telemetryObject)">
51+
<span class='plot-color-swatch'
52+
ng-style="{ 'background-color': plot.getColor($index) }">
53+
</span>
54+
<span class='title-label'>{{telemetryObject.getModel().name}}</span>
5555
</span>
56-
<span class='title-label'>{{telemetryObject.getModel().name}}</span>
57-
</span>
58-
</div>
59-
<div class="gl-plot-coords"
60-
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
61-
{{subplot.getHoverCoordinates()}}
6256
</div>
57+
6358
<div class="gl-plot-axis-area gl-plot-y">
6459
<div class="gl-plot-label gl-plot-y-label">
6560
{{axes[1].active.name}}
@@ -79,91 +74,102 @@
7974
</div>
8075
</div>
8176
</div>
82-
<div class="gl-plot-display-area"
83-
ng-mouseenter="subplot.isHovering(true);"
84-
ng-mouseleave="subplot.isHovering(false)"
85-
ng-class="{ loading: plot.isRequestPending() }">
77+
78+
<!-- new wrapper inserted here -->
79+
<div class="gl-plot-wrapper-display-area-and-x-axis">
8680

8781
<!-- TOI element -->
88-
<div class="l-toi-holder">
89-
<!-- Need text vals at top and bottom, plus vertical line -->
90-
<div class="l-toi-val">
91-
<span class="val">{{subplot.getHoverCoordinates()}}</span>
92-
<a class="s-icon-button icon-x"></a>
82+
<div class="l-toi-holder"
83+
style="left: 20%">
84+
<!-- Need text val at bottom, plus vertical line -->
85+
<div class="l-toi-val l-flex-row">
86+
<span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
87+
<a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
9388
</div>
9489
</div>
9590

96-
<!-- Out-of-bounds data indicators -->
97-
<!-- ng-show is temporarily hard-coded in next element -->
98-
<div ng-show="false" class="l-oob-data l-oob-data-up"></div>
99-
<div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
100-
<div class="gl-plot-hash hash-v"
101-
ng-repeat="tick in subplot.getDomainTicks()"
102-
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
103-
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
91+
<div class="gl-plot-coords"
92+
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
93+
{{subplot.getHoverCoordinates()}}
10494
</div>
105-
<div class="gl-plot-hash hash-h"
106-
ng-repeat="tick in subplot.getRangeTicks()"
107-
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
108-
ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
109-
</div>
110-
<mct-chart draw="subplot.getDrawingObject()"
111-
ng-if="subplot.getTelemetryObjects().length > 0"
112-
ng-mousemove="subplot.hover($event)"
113-
mct-drag="subplot.continueDrag($event)"
114-
mct-drag-down="subplot.startDrag($event)"
115-
mct-drag-up="subplot.endDrag($event); plot.update()">
116-
</mct-chart>
117-
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
118-
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
119-
ng-if="$first">
120-
<a class="s-button icon-arrow-left"
121-
ng-click="plot.stepBackPanZoom()"
122-
ng-show="plot.isZoomed()"
123-
title="Restore previous pan/zoom">
124-
</a>
125-
<a class="s-button icon-arrows-out"
126-
ng-click="plot.unzoom()"
127-
ng-show="plot.isZoomed()"
128-
title="Reset pan/zoom">
129-
</a>
130-
<div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
131-
ng-if="plot.getModeOptions().length > 1"
132-
ng-controller="ClickAwayController as toggle">
133-
<span class="l-click-area" ng-click="toggle.toggle()"></span>
134-
<span>{{plot.getMode().name}}</span>
135-
<div class="menu" ng-show="toggle.isActive()">
136-
<ul>
137-
<li ng-repeat="option in plot.getModeOptions()"
138-
ng-click="plot.setMode(option); toggle.setState(false)"
139-
class="{{option.cssclass}}">
140-
{{option.name}}
141-
</li>
142-
</ul>
95+
96+
<div class="gl-plot-display-area"
97+
ng-mouseenter="subplot.isHovering(true);"
98+
ng-mouseleave="subplot.isHovering(false)"
99+
ng-class="{ loading: plot.isRequestPending() }">
100+
101+
<!-- Out-of-bounds data indicators -->
102+
<!-- ng-show is temporarily hard-coded in next element -->
103+
<div ng-show="false" class="l-oob-data l-oob-data-up"></div>
104+
<div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
105+
<div class="gl-plot-hash hash-v"
106+
ng-repeat="tick in subplot.getDomainTicks()"
107+
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
108+
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
109+
</div>
110+
<div class="gl-plot-hash hash-h"
111+
ng-repeat="tick in subplot.getRangeTicks()"
112+
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
113+
ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
114+
</div>
115+
<mct-chart draw="subplot.getDrawingObject()"
116+
ng-if="subplot.getTelemetryObjects().length > 0"
117+
ng-mousemove="subplot.hover($event)"
118+
mct-drag="subplot.continueDrag($event)"
119+
mct-drag-down="subplot.startDrag($event)"
120+
mct-drag-up="subplot.endDrag($event); plot.update()">
121+
</mct-chart>
122+
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
123+
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
124+
ng-if="$first">
125+
<a class="s-button icon-arrow-left"
126+
ng-click="plot.stepBackPanZoom()"
127+
ng-show="plot.isZoomed()"
128+
title="Restore previous pan/zoom">
129+
</a>
130+
<a class="s-button icon-arrows-out"
131+
ng-click="plot.unzoom()"
132+
ng-show="plot.isZoomed()"
133+
title="Reset pan/zoom">
134+
</a>
135+
<div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
136+
ng-if="plot.getModeOptions().length > 1"
137+
ng-controller="ClickAwayController as toggle">
138+
<span class="l-click-area" ng-click="toggle.toggle()"></span>
139+
<span>{{plot.getMode().name}}</span>
140+
<div class="menu" ng-show="toggle.isActive()">
141+
<ul>
142+
<li ng-repeat="option in plot.getModeOptions()"
143+
ng-click="plot.setMode(option); toggle.setState(false)"
144+
class="{{option.cssclass}}">
145+
{{option.name}}
146+
</li>
147+
</ul>
148+
</div>
143149
</div>
144150
</div>
145151
</div>
146-
</div>
147-
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
148-
<div ng-repeat="tick in subplot.getDomainTicks()"
149-
class="gl-plot-tick gl-plot-x-tick-label"
150-
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
151-
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
152-
{{tick.label | reverse}}
153-
</div>
154-
<div class="gl-plot-label gl-plot-x-label">
155-
{{axes[0].active.name}}
156-
</div>
157-
<div class="gl-plot-x-options gl-plot-local-controls"
158-
ng-if="axes[0].options.length > 1">
159-
<div class='form-control shell select'>
160-
<select class="form-control input shell"
161-
ng-model="axes[0].active"
162-
ng-options="option.name for option in axes[0].options">
163-
</select>
152+
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
153+
<div ng-repeat="tick in subplot.getDomainTicks()"
154+
class="gl-plot-tick gl-plot-x-tick-label"
155+
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
156+
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
157+
{{tick.label | reverse}}
158+
</div>
159+
<div class="gl-plot-label gl-plot-x-label">
160+
{{axes[0].active.name}}
161+
</div>
162+
<div class="gl-plot-x-options gl-plot-local-controls"
163+
ng-if="axes[0].options.length > 1">
164+
<div class='form-control shell select'>
165+
<select class="form-control input shell"
166+
ng-model="axes[0].active"
167+
ng-options="option.name for option in axes[0].options">
168+
</select>
169+
</div>
164170
</div>
165-
</div>
166171

172+
</div>
167173
</div>
168174
</div>
169175
</div>

0 commit comments

Comments
 (0)