Skip to content

Commit 6042e4a

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for TOI element
Fixes #933 Fixes #1193 WIP: plots and TC done, moving on to tables; moved sass into conductor-v2; moved constants;
1 parent 1a53430 commit 6042e4a

File tree

10 files changed

+105
-87
lines changed

10 files changed

+105
-87
lines changed

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

-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
@import "controls/lists";
4343
@import "controls/menus";
4444
@import "controls/messages";
45-
@import "controls/time-of-interest";
4645
@import "mobile/controls/menus";
4746

4847
/********************************* FORMS */

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
// Holds the plot area and the X-axis only
5151
position: absolute;
5252
top: nth($plotDisplayArea, 1);
53-
right: nth($plotDisplayArea, 2) + $toiH / 2;
53+
right: nth($plotDisplayArea, 2);
5454
bottom: 0;
5555
left: nth($plotDisplayArea, 4);
5656

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

-9
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,6 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
103103
$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
104104
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
105105

106-
// Time of Interest
107-
$toiColorBg: #6b93c6;
108-
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
109-
$toiColorFg: #000;
110-
$toiColorCtrlFg: #fff;
111-
$toiColorBgAlert: #cf2a12; // $colorFormInvalid;
112-
$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
113-
$toiPadLR: 4px;
114-
115106
// Status colors, mainly used for messaging and item ancillary symbols
116107
$colorStatusFg: #ccc;
117108
$colorStatusDefault: #ccc;

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

-9
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,6 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
103103
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
104104
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
105105

106-
// Time of Interest
107-
$toiColorBg: #6b93c6;
108-
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
109-
$toiColorFg: #fff;
110-
$toiColorCtrlFg: #fff;
111-
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
112-
$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
113-
$toiPadLR: 2px;
114-
115106
// Status colors, mainly used for messaging and item ancillary symbols
116107
$colorStatusFg: #fff;
117108
$colorStatusDefault: #ccc;

‎platform/features/conductor-v2/conductor/res/sass/_constants.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization,
22
$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
33
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
44
$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
5-
$timeCondAxisLROffset: (6px, 6px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
65
$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
7-
$timeCondTOIValOffset: 0px;
6+
$timeCondTOIValOffset: 0px;
7+
$ticksBlockerFadeW: 50px;
8+
$toiBlockerFadeW: 10px;
9+
$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
10+
$toiPad: 4px;
11+
$timeCondAxisLROffset: (($toiH / 2) + $toiPad, ($toiH / 2) + $toiPad); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px

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

-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@
125125
}
126126

127127
.l-time-conductor-inputs-holder {
128-
$ticksBlockerFadeW: 50px;
129128
$iconCalendarW: 16px;
130129
$wBgColor: $colorBodyBg;
131130

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

+68-54
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@
2222

2323
.l-toi-holder,
2424
.l-toi-holder:after,
25-
.l-toi-holder:before,
26-
.l-toi {
25+
.l-toi-holder:before {
2726
display: block;
2827
position: absolute;
2928
}
3029

3130
.l-toi-holder {
31+
$blockerFadeW: $toiBlockerFadeW;
32+
$LROffset: $blockerFadeW + $toiPad;
3233
$p: 3px;
3334
@include transform(translateX(-50%));
3435
color: $toiColorBg;
@@ -62,50 +63,56 @@
6263

6364
.l-toi {
6465
// Holds buttons and val. Acts as a blocking element.
65-
@extend .l-flex-row;
66-
@include transform(translateY(-50%));
67-
background: blue; // $toiColorBlocker;
66+
@include background-image(linear-gradient(90deg, transparent, $toiColorBlocker 10%, $toiColorBlocker 90%, transparent 100%));
67+
position: absolute;
6868
align-items: center;
6969
box-sizing: content-box;
7070
height: $toiH;
71-
left: $toiPadLR * -1;
72-
top: 50%;
73-
padding: $toiPadLR $toiPadLR $toiPadLR 0;
71+
right: $LROffset * -1;
72+
@include transform(translateY(-50%)); top: 50%;
73+
padding: $toiPad $blockerFadeW $toiPad $LROffset;
7474
z-index: 1;
7575

7676
.l-toi-buttons {
77-
@extend .flex-elem;
7877
@include trans-prop-nice($props: width, $dur: 250ms);
7978
border-radius: $controlCr;
8079
box-sizing: content-box;
8180
font-size: $toiH;
8281
height: 100%;
8382
line-height: $toiH;
84-
padding: $toiPadLR $toiPadLR;
83+
padding: $toiPad $toiPad;
84+
order: 2;
8585
overflow: hidden;
8686
white-space: nowrap;
87+
justify-content: space-between;
8788
width: $toiH;
8889

8990
&:hover {
9091
// Expand and display controls; clock icon changes to resync
9192
background-color: $toiColorBg;
9293
cursor: pointer;
94+
margin-left: $interiorMarginSm;
9395
width: 30px;
94-
//z-index: 2;
9596

9697
.icon-button {
9798
color: rgba($toiColorCtrlFg, 0.5);
9899
opacity: 1;
99100
&:hover {
100101
color: $toiColorCtrlFg;
101102
}
102-
&.t-button-unpin:hover {
103-
color: $toiColorBgAlert;
104-
}
105103
}
106104

107-
.t-button-resync:before {
108-
content: $glyph-icon-resync;
105+
.t-button-resync {
106+
order: 2;
107+
&:before {
108+
content: $glyph-icon-resync;
109+
}
110+
}
111+
.t-button-unpin {
112+
order: 1;
113+
&:hover {
114+
color: $toiColorBgAlert;
115+
}
109116
}
110117

111118
& + .l-toi-val {
@@ -114,16 +121,16 @@
114121
}
115122
}
116123
}
117-
// Holds clock icon and resync and unpin buttons
118-
//left: $toiPadLR * -1;
119124

120125
.icon-button {
121126
color: $toiColorBg;
122127
}
128+
123129
.t-button-resync {
124130
@extend .icon-clock;
125131
&:hover { color: $toiColorCtrlFg; }
126132
}
133+
127134
.t-button-unpin {
128135
@include trans-prop-nice($props: opacity, $dur: 150ms);
129136
@extend .icon-x-in-circle;
@@ -137,33 +144,43 @@
137144
}
138145

139146
&.show-val {
140-
.l-toi-val {
141-
$tbP: 1px;
142-
@extend .flex-elem;
143-
@include trans-prop-nice($props: opacity, $dur: 150ms);
144-
background-color: $toiColorBg;
145-
border-radius: $controlCr;
146-
box-sizing: content-box;
147-
color: $toiColorFg;
148-
display: inline-block;
149-
font-size: 0.7rem;
150-
font-weight: 400;
151-
height: $toiH;
152-
//right: $toiH + $interiorMarginSm;
153-
//top: 50%;
154-
//@include transform(translateY(-50%));
155-
line-height: $toiH;
156-
padding: $tbP $p;
157-
white-space: nowrap;
158-
&:hover {
159-
//opacity: 1;
147+
.l-toi {
148+
.l-toi-val {
149+
$tbP: 1px;
150+
@include trans-prop-nice($props: opacity, $dur: 150ms);
151+
background-color: $toiColorBg;
152+
border-radius: $controlCr;
153+
box-sizing: content-box;
154+
color: $toiColorFg;
155+
display: inline-block;
156+
font-size: 0.7rem;
157+
font-weight: 400;
158+
height: $toiH;
159+
line-height: $toiH;
160+
order: 1;
161+
padding: $tbP $p;
162+
white-space: nowrap;
160163
}
161164
}
165+
}
166+
167+
&.val-to-right {
168+
.l-toi {
169+
right: auto;
170+
left: $LROffset * -1;
171+
padding: $toiPad $LROffset $toiPad $blockerFadeW;
172+
173+
.l-toi-buttons {
174+
order: 1;
175+
&:hover {
176+
.t-button-resync { order: 1; }
177+
.t-button-unpin { order: 2; }
178+
margin-right: $interiorMarginSm;
179+
}
180+
}
162181

163-
&.val-to-right {
164182
.l-toi-val {
165-
right: auto;
166-
left: $toiH + $interiorMarginSm;
183+
order: 2;
167184
}
168185
}
169186
}
@@ -188,12 +205,14 @@ table {
188205
top: 0;
189206

190207
}
208+
191209
&:before {
192210
@extend .icon-clock;
193211
color: $toiColorBg;
194212
cursor: pointer;
195213
z-index: 3;
196214
}
215+
197216
&:after {
198217
border-radius: 100%;
199218
content: '';
@@ -221,25 +240,20 @@ table {
221240
// TOI in plots
222241
.gl-plot {
223242
.gl-plot-wrapper-display-area-and-x-axis {
243+
right: nth($plotDisplayArea, 2) + ($toiH / 2) + $toiPad; // Make room for TOI element
244+
224245
.l-toi-holder {
225246
bottom: nth($plotDisplayArea, 3) - $interiorMargin;
226247
z-index: 3;
227248

228-
.l-toi,
229-
.l-toi-val {
230-
//@include transform(translateY(100%));
249+
.l-toi {
250+
@include transform(translateY(100%));
231251

232252
}
233253

234254
.l-toi {
235-
//bottom: $toiPadLR - 1;
236-
//z-index: 2;
237-
}
238-
239-
.l-toi-val {
240-
//top: auto;
241-
//bottom: 0;
242-
//z-index: 1;
255+
top: auto;
256+
bottom: $toiPad;
243257
}
244258
}
245259
}
@@ -253,7 +267,7 @@ table {
253267
&:after {
254268
// Vertical lines
255269
border-left-style: solid;
256-
//height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
270+
height: ((nth($ueTimeConductorH, 2) - $timeCondTOIIconD)/2) + $linesVOffset;
257271
}
258272

259273
&:before {
@@ -268,4 +282,4 @@ table {
268282
bottom: 0px;
269283
}
270284
}
271-
}
285+
}

‎platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,15 @@ $colorTimeCondKeyBg: #4e70dc;
3636
$colorTimeCondKeyFg: #fff;
3737
$colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
3838
$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
39-
@import "time-conductor-base";
39+
40+
// Time of Interest
41+
$toiColorBg: #6b93c6;
42+
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
43+
$toiColorFg: #000;
44+
$toiColorCtrlFg: #fff;
45+
$toiColorBgAlert: #cf2a12;
46+
$colorTimeCondTOIBg: darken($toiColorBg, 20%);
47+
$colorTimeCondTOIBgHov: $toiColorBg;
48+
49+
@import "time-conductor-base";
50+
@import "time-of-interest";

‎platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss

+10-1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ $colorTimeCondKeyBg: #6178dc;
3636
$colorTimeCondKeyFg: #fff;
3737
$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
3838
$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
39+
40+
// Time of Interest
41+
$toiColorBg: #6b93c6;
42+
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
43+
$toiColorFg: #fff;
44+
$toiColorCtrlFg: #fff;
45+
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
3946
$colorTimeCondTOIBg: darken($toiColorBg, 20%);
4047
$colorTimeCondTOIBgHov: $toiColorBg;
41-
@import "time-conductor-base";
48+
49+
@import "time-conductor-base";
50+
@import "time-of-interest";

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313

1414
<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
1515
<div class="l-toi-holder show-val"
16-
ng-class="{ 'pinned': true, 'val-to-right': toi.left < 20 }"
17-
ng-style="{'left': 20 + '%'}">
18-
<div class="l-toi">
19-
<span class="l-toi-buttons">
20-
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
21-
ng-click="toi.dismiss()"></a>
22-
<a class="t-button-resync icon-button" title="Re-sync Time of Interest"
16+
ng-class="{ 'pinned': true, 'val-to-right': false }"
17+
ng-style="{'left': 90 + '%'}">
18+
<div class="l-flex-row l-toi">
19+
<span class="flex-elem l-flex-row l-toi-buttons">
20+
<a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"
2321
ng-click="toi.resync()"></a>
22+
<a class="flex-elem t-button-unpin icon-button" title="Unset Time of Interest"
23+
ng-click="toi.dismiss()"></a>
2424
</span>
25-
<span class="l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
25+
<span class="flex-elem l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
2626
</div>
2727
</div>

0 commit comments

Comments
 (0)