Skip to content

Commit 99253a5

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for TOI element
Fixes #933 Fixes #1193 WIP: Markup and CSS revisions for updated UX approach
1 parent bb2ae2f commit 99253a5

File tree

7 files changed

+77
-101
lines changed

7 files changed

+77
-101
lines changed

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

+47-55
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,43 @@
2222

2323
.l-toi-holder {
2424
@include trans-prop-nice($props: opacity, $dur: 200ms);
25-
&:not(.active) {
26-
opacity: 0; // Hide by default, only show when user hovers over container that implements this element
25+
&:not(.pinned) {
26+
opacity: 0;
27+
}
28+
&.pinned {
29+
opacity: 1;
2730
}
2831
.l-toi {
29-
32+
position: absolute;
33+
&.block {
34+
$d: $toiW;
35+
background-color: $toiColorBg;
36+
border-radius: $controlCr;
37+
color: $toiColorFg;
38+
width: $d;
39+
height: $d;
40+
line-height: $d;
41+
text-align: center;
42+
&:hover {
43+
background-color: $colorAlert !important;
44+
color: #fff !important;
45+
}
46+
}
47+
&:hover {
48+
cursor: pointer !important;
49+
&:before {
50+
// Icon, change to close box
51+
content: $glyph-icon-x-in-circle !important;
52+
}
53+
}
3054
}
31-
.l-toi-val {
32-
color: $toiColorFg;
33-
55+
&:hover {
56+
$c: $toiColorBgHov;
57+
cursor: ew-resize;
58+
.l-toi.block {
59+
background-color: $c !important;
60+
color: $toiColorFgHov;
61+
}
3462
}
3563
}
3664

@@ -62,10 +90,10 @@ table {
6290
}
6391
&.l-toi.pinned {
6492
td {
65-
border-top: 1px solid $toiColorBgPinned;
93+
border-top: 1px solid $toiColorBg;
6694
&:first-child:before {
6795
@include toiIcon();
68-
color: $toiColorBgPinned;
96+
color: $toiColorFg;
6997
}
7098
}
7199
&:hover {
@@ -82,20 +110,13 @@ table {
82110
// TOI in plots
83111
.gl-plot {
84112
.gl-plot-wrapper-display-area-and-x-axis {
85-
&:hover {
86-
.l-toi-holder.hover {
87-
opacity: 1;
88-
}
89-
}
90113
.l-toi-holder {
91-
$toiColorBgPinned: rgba($toiColorBgPinned, 0.4);
92-
pointer-events: none;
114+
//@include test();
115+
@include transform(translateX(-50%));
93116
position: absolute;
94117
top: 0;
95-
bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned
96-
min-width: 50px;
97-
max-width: 150px;
98-
width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
118+
bottom: nth($plotDisplayArea, 3);
119+
width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
99120
&:before {
100121
// Vertical line
101122
border-left: 1px dashed $toiColorBg;
@@ -107,44 +128,15 @@ table {
107128
bottom: 0;
108129
width: 1px;
109130
}
110-
.l-toi-val {
111-
background-color: $toiColorBg;
112-
box-sizing: border-box;
113-
padding: $interiorMarginSm $interiorMarginSm;
114-
position: absolute;
115-
text-align: center;
116-
width: 100%;
117-
bottom: -2px;
118-
border-radius: $controlCr;
119-
.val {
120-
@include reverseEllipsis();
121-
}
122-
.t-unpin-button {
123-
margin-left: $interiorMarginSm;
124-
pointer-events: auto;
125-
}
131+
.l-toi {
132+
@extend .icon-clock;
133+
@include transform(translateY(100%));
134+
bottom: 0;
126135
}
127-
128-
&.pinned {
136+
&:hover {
137+
background-color: rgba($toiColorBgHov, 0.1);
129138
&:before {
130-
border-left-color: $toiColorBgPinned;
131-
border-left-style: solid;
132-
}
133-
.l-toi-val {
134-
background-color: $toiColorBgPinned;
135-
border-radius: 0;
136-
border-top-left-radius: $controlCr;
137-
border-top-right-radius: $controlCr;
138-
bottom: 0px;
139-
}
140-
}
141-
142-
&:not(.pinned) {
143-
.l-toi-val {
144-
@include transform(translateY(100%)); // Position of element when TOI is visible but not pinned
145-
}
146-
.t-unpin-button {
147-
display: none;
139+
border-left-color: $toiColorBgHov !important;
148140
}
149141
}
150142
z-index: 3;

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,9 @@
4848

4949
.gl-plot-wrapper-display-area-and-x-axis {
5050
// Holds the plot area and the X-axis only
51-
//@include test(blue, 0.1);
5251
position: absolute;
5352
top: nth($plotDisplayArea, 1);
54-
right: nth($plotDisplayArea, 2);
53+
right: nth($plotDisplayArea, 2) + $toiW / 2;
5554
bottom: 0;
5655
left: nth($plotDisplayArea, 4);
5756

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

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

106106
// Time of Interest
107-
$toiColorBg: #666;
108-
$toiColorBgHov: #999;
109-
$toiColorFg: #fff;
110-
$toiColorBgPinned: $colorKey;
111-
$toiColorFgPinned: #fff;
107+
$toiColorBg: $colorBtnMajorBg;
108+
$toiColorBgHov: $colorBtnMajorBgHov;
109+
$toiColorFg: #ccc;
110+
$toiColorFgHov: #fff;
111+
$toiColorBgActive: lighten($colorKey, 10%);
112+
$toiColorFgActive: $toiColorFgHov;
113+
$toiW: 18px;
112114

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

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

+7-5
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
104104
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
105105

106106
// Time of Interest
107-
$toiColorBg: #666;
108-
$toiColorBgHov: #333;
109-
$toiColorFg: #fff;
110-
$toiColorBgPinned: $colorKey;
111-
$toiColorFgPinned: #fff;
107+
$toiColorBg: $colorKey;
108+
$toiColorBgHov: lighten($colorKey, 10%);
109+
$toiColorFg: #ccc;
110+
$toiColorFgHov: #fff;
111+
$toiColorBgActive: lighten($colorKey, 20%);
112+
$toiColorFgActive: $toiColorFgHov;
113+
$toiW: 18px;
112114

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

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,11 @@
273273
.l-toi-holder {
274274
$c: $colorTimeCondTOIBg;
275275
$cHov: $toiColorBgHov;
276-
$cPinned: rgba($toiColorBgPinned, 0.8);
277-
$cPinnedHov: $toiColorBgPinned;
276+
//$cPinned: rgba($toiColorBgPinned, 0.8);
277+
//$cPinnedHov: $toiColorBgPinned;
278278
$linesVOffset: 2px;
279279
@include transform(translateX(-50%));
280-
color: $c;
280+
//color: $c;
281281
top: 0px;
282282
bottom: 0px;
283283
width: $timeCondTOIIconD;
@@ -288,7 +288,7 @@
288288
&:after {
289289
// Vertical lines
290290
content: '';
291-
background-color: $c;
291+
//background-color: $c;
292292
left: 50%;
293293
height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
294294
width: 1px;
@@ -340,7 +340,7 @@
340340
}
341341
}
342342

343-
&.pinned {
343+
/* &.pinned {
344344
//opacity: 1;
345345
z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
346346
&.active {
@@ -369,7 +369,7 @@
369369
content: $glyph-icon-x-in-circle;
370370
}
371371
}
372-
}
372+
}*/
373373
}
374374

375375
.l-time-conductor-controls {

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

+5-13
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,12 @@
100100
<div class="l-data-visualization">
101101
<!-- Note:
102102
- val-to-right should be applied when l-toi-holder left < 160px
103-
- The pinned TOI must precede the non-pinned version in markup,
104-
so that we can hide the non-pinned TOI when hovering over the pinned one.
105103
-->
106-
<div class="l-toi-holder pinned"
107-
ng-class="{ 'active': false, 'val-to-right': true }"
108-
ng-click="this.active = false"
109-
style="left: 5%">
110-
<div class="l-toi s-toi"></div>
111-
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
112-
</div>
113-
<div class="l-toi-holder hover"
114-
ng-class="{ 'val-to-right': false }"
115-
style="left: 75%">
116-
<div class="l-toi s-toi"></div>
104+
<div class="l-toi-holder"
105+
ng-class="{ 'pinned': true, 'val-to-right': false }"
106+
ng-click="this.pinned = false"
107+
style="left: 100%">
108+
<div class="l-toi"></div>
117109
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
118110
</div>
119111
</div>

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

+4-15
Original file line numberDiff line numberDiff line change
@@ -78,22 +78,11 @@
7878
<!-- new wrapper inserted here -->
7979
<div class="gl-plot-wrapper-display-area-and-x-axis">
8080
<!-- TOI element -->
81-
<div class="l-toi-holder pinned"
82-
ng-class="{ active: false }"
83-
style="left: 70%">
81+
<div class="l-toi-holder"
82+
ng-class="{ pinned: true }"
83+
style="left: 100%">
8484
<!-- 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>
88-
</div>
89-
</div>
90-
<div class="l-toi-holder hover"
91-
style="left: 20%">
92-
<!-- Need text val at bottom, plus vertical line -->
93-
<div class="l-toi-val l-flex-row">
94-
<span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
95-
<a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
96-
</div>
85+
<div class="l-toi block"></div>
9786
</div>
9887

9988
<div class="gl-plot-coords"

0 commit comments

Comments
 (0)