Skip to content

Commit dfbbc3b

Browse files
akhenryakhenry
committed
alt-click to select TOI from table
2 parents 430645b + 47a0aba commit dfbbc3b

File tree

18 files changed

+212
-174
lines changed

18 files changed

+212
-174
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ $treeContextTriggerW: 20px;
7575
/*************** Tabular */
7676
$tabularHeaderH: 22px;
7777
$tabularTdPadLR: $itemPadLR;
78-
$tabularTdPadTB: 3px;
78+
$tabularTdPadTB: 2px;
7979
/*************** Imagery */
8080
$imageMainControlBarH: 25px;
8181
$imageThumbsD: 120px;

‎platform/commonUI/general/res/sass/controls/_time-of-interest.scss

+61-63
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,6 @@
2020
* at runtime from the About dialog for additional information.
2121
*****************************************************************************/
2222

23-
24-
/*
25-
Plots
26-
-toi-holder:before vertical line
27-
-toi: glyphs
28-
29-
Tables
30-
tr: border color
31-
td:before: glyphs
32-
33-
TC
34-
-toi-holder:before, after: vertical lines
35-
-toi: glyphs
36-
37-
*/
3823
.l-toi-holder,
3924
.l-toi-holder:after,
4025
.l-toi-holder:before,
@@ -44,22 +29,23 @@ TC
4429
position: absolute;
4530
}
4631

47-
4832
.l-toi-holder {
4933
$p: 3px;
5034
@include transform(translateX(-50%));
5135
color: $toiColorBg;
5236
position: absolute;
5337
top: 0;
5438
bottom: 0;
55-
width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
39+
width: $toiW;
5640
&:not(.pinned) {
5741
opacity: 0;
5842
pointer-events: none;
5943
}
44+
6045
&.pinned {
6146
opacity: 1;
6247
}
48+
6349
&:before,
6450
&:after {
6551
// Vertical lines. TC uses both; plot only uses :before
@@ -73,8 +59,9 @@ TC
7359
bottom: 0;
7460
width: 2px;
7561
}
62+
7663
.l-toi {
77-
// Holds clock icon an unpin button
64+
// Holds clock icon and unpin button
7865
font-size: $toiW;
7966
height: $toiW;
8067
width: $toiW;
@@ -83,33 +70,41 @@ TC
8370
@extend .icon-clock;
8471
&:hover {
8572
&:before {
73+
color: $toiColorBgAlert;
8674
content: $glyph-icon-x-in-circle;
8775
}
8876
}
8977
}
9078
}
9179

9280
.l-toi-val {
93-
$tbP: 1px;
94-
background-color: $toiColorBg; //rgba($toiColorBg, 0.8);
95-
border-radius: $controlCr;
96-
box-sizing: content-box;
97-
display: inline-block;
98-
color: $toiColorFg;
99-
font-size: 0.7rem;
100-
height: $toiW;
101-
right: $toiW + $interiorMarginSm;
102-
top: 50%;
103-
@include transform(translateY(-50%));
104-
line-height: $toiW;
105-
padding: $tbP $p;
106-
white-space: nowrap;
81+
display: none; // Hide by default; see .show-val below
10782
}
10883

109-
&.val-to-right {
84+
&.show-val {
11085
.l-toi-val {
111-
right: auto;
112-
left: $toiW + $interiorMarginSm;
86+
$tbP: 1px;
87+
background-color: $toiColorBg;
88+
border-radius: $controlCr;
89+
box-sizing: content-box;
90+
color: $toiColorFg;
91+
display: inline-block;
92+
font-size: 0.7rem;
93+
font-weight: 400;
94+
height: $toiW;
95+
right: $toiW + $interiorMarginSm;
96+
top: 50%;
97+
@include transform(translateY(-50%));
98+
line-height: $toiW;
99+
padding: $tbP $p;
100+
white-space: nowrap;
101+
}
102+
103+
&.val-to-right {
104+
.l-toi-val {
105+
right: auto;
106+
left: $toiW + $interiorMarginSm;
107+
}
113108
}
114109
}
115110
}
@@ -120,38 +115,42 @@ table {
120115
tbody, .tbody {
121116
tr, .tr {
122117
&.l-toi.pinned {
123-
td {
124-
border-top: 1px dashed $toiColorBg;
125-
&:first-child:before {
126-
@extend .ui-symbol;
127-
@include transform(translate(-50%, -50%));
128-
content: $glyph-icon-clock;
129-
display: block;
130-
position: absolute;
131-
text-shadow: 0 1px 15px black;
132-
left: 50%;
133-
top: 0;
134-
z-index: 2;
135-
color: $toiColorBg;
136-
}
137-
}
118+
border-top: 1px dashed $toiColorBg;
119+
td, .td {
120+
&:first-child {
121+
&:before,
122+
&:after {
123+
@include transform(translate(-50%, -50%));
124+
display: block;
125+
position: absolute;
126+
left: 50%;
127+
bottom: auto;
128+
top: 0;
138129

139-
&.highlight-bottom-edge {
140-
td {
141-
border-bottom: 1px dashed $toiColorBg;
142-
//border-top: 1px solid transparent;
143-
&:first-child:before {
144-
@include transform(translate(-50%, 50%));
145-
top: auto;
146-
bottom: 0;
130+
}
131+
&:before {
132+
@extend .icon-clock;
133+
color: $toiColorBg;
134+
cursor: pointer;
135+
z-index: 3;
136+
}
137+
&:after {
138+
border-radius: 100%;
139+
content: '';
140+
background: $toiColorBlocker;
141+
height: $toiW + $interiorMargin;
142+
width: $toiW + $interiorMargin;
143+
z-index: 2;
147144
}
148145
}
149146
}
150147

151148
&:hover {
152-
td:first-child:before {
153-
content: $glyph-icon-x-in-circle;
154-
cursor: pointer;
149+
td, .td {
150+
&:first-child:before {
151+
color: $toiColorBgAlert;
152+
content: $glyph-icon-x-in-circle !important;
153+
}
155154
}
156155
}
157156
}
@@ -164,6 +163,7 @@ table {
164163
.gl-plot-wrapper-display-area-and-x-axis {
165164
.l-toi-holder {
166165
bottom: nth($plotDisplayArea, 3) - $interiorMargin;
166+
z-index: 3;
167167
&:after {
168168
display: none;
169169
}
@@ -172,8 +172,6 @@ table {
172172
@include transform(translateY(100%));
173173
bottom: 0;
174174
}
175-
176-
z-index: 3;
177175
}
178176
}
179177
}

‎platform/commonUI/general/res/sass/lists/_tabular.scss

+3-7
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,9 @@ table {
5151

5252
tbody, .tbody {
5353
display: table-row-group;
54-
/* tr, .tr {
55-
&:hover {
56-
background: rgba($colorTabBodyFg, 0.1);
57-
}
58-
}*/
5954
}
6055
tr, .tr {
56+
border-top: 1px solid $colorTabBorder;
6157
display: table-row;
6258
&:first-child .td {
6359
border-top: none;
@@ -71,11 +67,12 @@ table {
7167
}
7268
th, .th, td, .td {
7369
display: table-cell;
70+
font-size: 0.7rem;
7471
}
7572
th, .th {
7673
border-left: 1px solid $colorTabHeaderBorder;
7774
color: $colorTabHeaderFg;
78-
padding: $tabularTdPadLR $tabularTdPadLR;
75+
padding: $tabularTdPadTB $tabularTdPadLR;
7976
white-space: nowrap;
8077
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
8178
&:first-child {
@@ -99,7 +96,6 @@ table {
9996
}
10097
}
10198
td, .td {
102-
border-top: 1px solid $colorTabBorder;
10399
min-width: 20px;
104100
color: $colorTelemFresh;
105101
padding: $tabularTdPadTB $tabularTdPadLR;

‎platform/commonUI/themes/espresso/res/sass/_constants.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,11 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
104104
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
105105

106106
// Time of Interest
107-
$toiColorBg: #6b93c6; //$colorBtnMajorBg;
107+
$toiColorBg: #6b93c6;
108+
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
108109
$toiColorFg: #000;
109-
$toiW: 12px;
110+
$toiColorBgAlert: #cf644a; // $colorFormInvalid;
111+
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
110112

111113
// Status colors, mainly used for messaging and item ancillary symbols
112114
$colorStatusFg: #ccc;

‎platform/commonUI/themes/snow/res/sass/_constants.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
105105

106106
// Time of Interest
107107
$toiColorBg: #6b93c6;
108+
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
108109
$toiColorFg: #fff;
109-
$toiW: 12px;
110+
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
111+
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
110112

111113
// Status colors, mainly used for messaging and item ancillary symbols
112114
$colorStatusFg: #fff;

‎platform/features/conductor-v2/conductor/bundle.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ define([
9191
"$scope",
9292
"timeConductor",
9393
"timeConductorViewService",
94-
"$timeout"
94+
"formatService"
9595
]
9696
}
9797
],

‎platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

-5
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,6 @@
244244
left: nth($timeCondAxisLROffset, 1);
245245
right: nth($timeCondAxisLROffset, 2);
246246
&:hover {
247-
// Hide the cursor, because the TOI element essentially "becomes" the cursor
248-
// when the user is hovering over the visualization area.
249-
250-
// AH - not any more it doesn't?
251-
//cursor: none;
252247
.l-toi-holder.hover {
253248
opacity: 1;
254249
}

‎platform/features/conductor-v2/conductor/res/templates/time-conductor.html

+4-6
Original file line numberDiff line numberDiff line change
@@ -100,15 +100,13 @@
100100
ng-click="toi.click($event)">
101101
<a class="l-page-button s-icon-button icon-pointer-left"></a>
102102
<div class="l-data-visualization">
103-
<!-- Note:
104-
- val-to-right should be applied when l-toi-holder left < 160px
105-
-->
106-
<div class="l-toi-holder"
107-
ng-class="{ 'pinned': toi.pinned, 'val-to-right': false }"
103+
<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
104+
<div class="l-toi-holder show-val"
105+
ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 20 }"
108106
ng-style="{'left': toi.left + '%'}">
109107
<div class="l-toi">
110108
<a class="t-button-unpin icon-button" ng-click="toi.pinned = false"></a>
111-
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
109+
<span class="l-toi-val">{{toi.toiText}}</span>
112110
</div>
113111
</div>
114112
</div>

‎platform/features/conductor-v2/conductor/src/TimeConductor.js

+15-5
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,12 @@ define(['EventEmitter'], function (EventEmitter) {
123123
* @property {TimeConductorBounds} bounds
124124
*/
125125
this.emit('bounds', this.boundsVal);
126+
127+
// If a bounds change results in a TOI outside of the current
128+
// bounds, unset it
129+
if (this.toi < newBounds.start || this.toi > newBounds.end) {
130+
this.timeOfInterest(undefined);
131+
}
126132
}
127133
//Return a copy to prevent direct mutation of time conductor bounds.
128134
return JSON.parse(JSON.stringify(this.boundsVal));
@@ -158,17 +164,21 @@ define(['EventEmitter'], function (EventEmitter) {
158164
/**
159165
* Get or set the Time of Interest. The Time of Interest is the temporal
160166
* focus of the current view. It can be manipulated by the user from the
161-
* time conductor or from other views.
167+
* time conductor or from other views. The time of interest can
168+
* effectively be unset by assigning a value of 'undefined'.
162169
* @fires TimeConductor#timeOfInterest
163-
* @param newTOI
164-
* @returns {number} the current time of interest
170+
* @param {number | undefined} newTOI A new time of interest, represented
171+
* as a
172+
* number that is valid in the current time system.
173+
* @returns {number | undefined} the current time of interest
165174
*/
166175
TimeConductor.prototype.timeOfInterest = function (newTOI) {
167176
if (arguments.length > 0) {
168177
this.toi = newTOI;
169178
/**
170-
* @event TimeConductor#timeOfInterest The Time of Interest has moved.
171-
* @property {number} Current time of interest
179+
* @event TimeConductor#timeOfInterest The Time of Interest has
180+
* changed.
181+
* @property {number | undefined} Current time of interest
172182
*/
173183
this.emit('timeOfInterest', this.toi);
174184
}

0 commit comments

Comments
 (0)