Skip to content

Commit 06af84c

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for Time Conductor v2
Fixes #933 In-progress: fixed SVG text color, field styling for fixed vs. real-time, markup cleanup
1 parent 5238aa2 commit 06af84c

File tree

6 files changed

+183
-123
lines changed

6 files changed

+183
-123
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
4848
$uePaneMiniTabCollapsedW: 11px;
4949
$ueEditLeftPaneW: 75%;
5050
$treeSearchInputBarH: 25px;
51-
$ueTimeControlH: (21px, 18px, 20px);
51+
$ueTimeControlH: (25px, 18px, 20px);
5252
/*************** Panes */
5353
$ueBrowseLeftPaneTreeMinW: 150px;
5454
$ueBrowseLeftPaneTreeMaxW: 35%;
@@ -108,6 +108,7 @@ $bubbleMaxW: 300px;
108108
$reqSymbolW: 15px;
109109
$reqSymbolM: $interiorMargin * 2;
110110
$reqSymbolFontSize: 0.7em;
111+
$inputTextP: 3px 5px;
111112
/*************** Wait Spinner Defaults */
112113
$waitSpinnerD: 32px;
113114
$waitSpinnerTreeD: 20px;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ input, textarea {
6666
input[type="text"],
6767
input[type="search"] {
6868
vertical-align: baseline;
69-
padding: 3px 5px;
69+
padding: $inputTextP;
7070
}
7171

7272
h1, h2, h3 {

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

+106-53
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
@mixin toiLineHovEffects() {
2-
&:before,
3-
&:after {
4-
background-color: $timeControllerToiLineColorHov;
5-
}
2+
&:before,
3+
&:after {
4+
background-color: $timeControllerToiLineColorHov;
5+
}
66
}
77

88
.l-time-conductor {
9-
$minW: 500px;
10-
$knobHOffset: 0px;
11-
$rangeValPad: $interiorMargin;
12-
$rangeValOffset: $sliderKnobW + $interiorMargin;
13-
$r1H: nth($ueTimeControlH,1);
14-
$r2H: nth($ueTimeControlH,2);
15-
$r3H: nth($ueTimeControlH,3);
9+
$minW: 500px;
10+
$knobHOffset: 0px;
11+
$rangeValPad: $interiorMargin;
12+
$rangeValOffset: $sliderKnobW + $interiorMargin;
13+
$r1H: nth($ueTimeControlH, 1);
14+
$r2H: nth($ueTimeControlH, 2);
15+
$r3H: nth($ueTimeControlH, 3);
1616

1717
// Glyphs Todo: replace with refactored CSS approach when that is merged into master
1818
$glyphIconFixed: '\e604';
@@ -24,57 +24,75 @@
2424
min-width: $minW;
2525
position: relative;
2626

27-
>.l-row-elem {
27+
> .l-row-elem {
2828
// First order row elements
29-
box-sizing: border-box;
29+
box-sizing: border-box;
3030
width: 100%;
3131
position: relative;
32-
&:not(:first-child) {
33-
margin-top: $interiorMargin;
32+
}
33+
34+
.mode-selector .s-menu-btn,
35+
.time-delta {
36+
&:before {
37+
@extend .ui-symbol;
38+
margin-right: $interiorMarginSm;
3439
}
35-
}
40+
}
41+
42+
.time-delta {
43+
&:before {
44+
color: $colorTimeCondKeyBg;
45+
}
46+
}
3647

3748
.l-time-conductor-inputs-holder,
3849
.l-time-conductor-ticks {
3950
font-size: 0.8rem;
4051
}
4152

42-
.l-time-conductor-inputs-holder {
43-
$inputW: 180px;
44-
$ticksBlockerFadeW: 25px;
53+
.l-time-conductor-inputs-holder {
54+
$trInputW: 180px;
55+
$hmInputW: 80px;
56+
$ticksBlockerFadeW: 50px;
4557
$iconCalendarW: 16px;
4658
$wBgColor: $colorBodyBg;
47-
//$wBgColor: green;
48-
$wBgW: $inputW + $interiorMargin + $iconCalendarW;
4959

5060
height: $r1H;
5161
z-index: 1;
52-
.l-time-range-input-w {
62+
.l-time-range-w {
5363
// Wraps a datetime text input field
64+
height: 100%;
5465
position: absolute;
55-
width: $wBgW + $ticksBlockerFadeW;
56-
&.start-date {
57-
@include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
66+
&.start-w {
67+
@include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
68+
padding-right: $ticksBlockerFadeW;
5869
}
59-
&.end-date {
60-
@include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
70+
&.end-w {
71+
@include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
72+
padding-left: $ticksBlockerFadeW;
6173
right: 0;
6274
text-align: right;
6375
}
6476
input[type="text"] {
65-
width: $inputW;
77+
@include trans-prop-nice(padding, 250ms);
78+
}
79+
.time-range-input input {
80+
width: $trInputW;
81+
}
82+
.hrs-min-input input {
83+
width: $hmInputW;
6684
}
6785
.icon-calendar {
6886
margin-top: 4px;
6987
}
7088
}
71-
}
89+
}
7290

73-
.l-time-conductor-ticks {
91+
.l-time-conductor-ticks {
7492
$c: $colorTick;
75-
height: $r1H;
93+
height: $r1H;
7694
mct-conductor-axis {
77-
@include transform(translateY(3px));
95+
//@include transform(translateY(1px));
7896
display: block;
7997
position: relative;
8098
width: 100%;
@@ -85,38 +103,50 @@
85103
width: 100%;
86104
svg {
87105
text-rendering: geometricPrecision;
88-
width: 100%; height: 100%;
106+
width: 100%;
107+
height: 100%;
89108
> g {
90109
font-size: 0.9em;
91110
}
92-
path {display: none;}
93-
line {stroke: $c;}
94-
text { fill: $c; }
111+
path {
112+
display: none;
113+
}
114+
line {
115+
stroke: $c;
116+
}
117+
text {
118+
fill: $c;
119+
}
95120
}
96121
}
97-
}
122+
}
98123
.l-data-visualization {
99124
background: rgba($colorTick, 0.3);
100125
height: $r2H;
101126
}
102127

103-
.mode-selector .s-menu-btn {
104-
&:before {
105-
@extend .ui-symbol;
106-
margin-right: $interiorMarginSm;
107-
content: $glyphIconFixed;
108-
}
128+
.l-time-conductor-controls {
129+
margin-top: $interiorMargin;
109130
}
110131

111132
// Realtime, latest modes
112133
&.realtime-mode,
113134
&.latest-mode {
114135
.l-time-conductor-inputs-holder {
115136
.l-time-range-input-w {
116-
input:not(:hover) {
137+
input[type="text"]:not(.error) {
117138
background: transparent;
118139
box-shadow: none;
119140
border-radius: 0;
141+
padding-left: 0;
142+
padding-right: 0;
143+
&:hover {
144+
@include nice-input();
145+
padding: $inputTextP;
146+
}
147+
}
148+
&.start-date {
149+
pointer-events: none;
120150
}
121151
.icon-calendar {
122152
display: none;
@@ -128,21 +158,42 @@
128158
}
129159

130160
.l-data-visualization {
131-
background: rgba($colorTimeCondKey, 0.5) !important
161+
background: rgba($colorTimeCondKeyBg, 0.5) !important
132162
}
133163
.mode-selector .s-menu-btn {
134-
@include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma));
164+
@include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
165+
}
166+
}
167+
&.fixed-mode {
168+
$i: $glyphIconFixed;
169+
.mode-selector .s-menu-btn:before {
170+
content: $i;
171+
}
172+
}
173+
&.realtime-mode {
174+
$i: $glyphIconRealtime;
175+
.time-delta:before {
176+
content: $i;
177+
}
178+
.mode-selector .s-menu-btn:before {
179+
content: $i;
180+
}
181+
}
182+
&.latest-mode {
183+
$i: $glyphIconLatest;
184+
.time-delta:before {
185+
content: $i;
186+
}
187+
.mode-selector .s-menu-btn:before {
188+
content: $i;
135189
}
136190
}
137-
138-
&.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
139-
&.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
140191
}
141192

142193
.s-time-range-val {
143-
border-radius: $controlCr;
144-
background-color: $colorInputBg;
145-
padding: 1px 1px 0 $interiorMargin;
194+
border-radius: $controlCr;
195+
background-color: $colorInputBg;
196+
padding: 1px 1px 0 $interiorMargin;
146197
}
147198

148199
/******************************************************************** MOBILE */
@@ -178,7 +229,9 @@
178229
margin-right: 0;
179230
}
180231
.l-time-range-inputs-elem {
181-
&.lbl { display: none; }
232+
&.lbl {
233+
display: none;
234+
}
182235
}
183236
}
184237
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
210210
$colorLoadingBg: rgba($colorBodyFg, 0.2);
211211

212212
// Time Conductor
213-
$colorTimeCondKey: #1d7a96;
213+
$colorTimeCondKeyBg: #1d7a96;
214+
$colorTimeCondKeyFg: #fff;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
210210
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
211211

212212
// Time Conductor
213-
$colorTimeCondKey: #0092b3;
213+
$colorTimeCondKeyBg: #0092b3;
214+
$colorTimeCondKeyFg: #fff;

0 commit comments

Comments
 (0)