Skip to content

Commit 64ce8a2

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for Time Conductor v2
Fixes #933 Color adjusts, mini super-menu size and font tweaks, glyphs added to selector, SVG style fixes in progress
1 parent bf0e85a commit 64ce8a2

File tree

4 files changed

+80
-20
lines changed

4 files changed

+80
-20
lines changed

‎platform/commonUI/general/res/sass/controls/_menus.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@
202202
margin-bottom: $interiorMargin * 2;
203203
}
204204
&.description {
205-
color: $colorCreateMenuText;
205+
color: pushBack($colorCreateMenuText, 20%);
206206
font-size: 0.8em;
207207
line-height: 1.5em;
208208
}
@@ -211,15 +211,21 @@
211211
}
212212

213213
&.mini {
214-
width: 350px;
215-
height: 250px;
214+
width: 400px;
215+
height: 300px;
216216
.pane {
217+
&.menu-items {
218+
font-size: 0.8em;
219+
}
217220
&.menu-item-description {
218221
padding: $interiorMargin * 3;
219222
.desc-area {
220223
&.icon {
221224
font-size: 4em;
222225
}
226+
&.title {
227+
font-size: 1em;
228+
}
223229
}
224230
}
225231
}

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

+62-15
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@
1414
$r2H: nth($ueTimeControlH,2);
1515
$r3H: nth($ueTimeControlH,3);
1616

17+
// Glyphs Todo: replace with refactored CSS approach when that is merged into master
18+
$glyphIconFixed: '\e604';
19+
$glyphIconRealtime: '\43';
20+
$glyphIconLatest: '\44';
21+
1722
border-top: 1px solid $colorInteriorBorder;
1823
padding-top: $interiorMargin;
1924
min-width: $minW;
20-
font-size: 0.8rem;
2125
position: relative;
2226

2327
>.l-row-elem {
@@ -30,29 +34,37 @@
3034
}
3135
}
3236

37+
.l-time-conductor-inputs-holder,
38+
.l-time-conductor-ticks {
39+
font-size: 0.8rem;
40+
}
41+
3342
.l-time-conductor-inputs-holder {
34-
$inputW: 200px;
43+
$inputW: 180px;
3544
$ticksBlockerFadeW: 25px;
45+
$iconCalendarW: 16px;
46+
$wBgColor: $colorBodyBg;
47+
//$wBgColor: green;
48+
$wBgW: $inputW + $interiorMargin + $iconCalendarW;
49+
3650
height: $r1H;
3751
z-index: 1;
3852
.l-time-range-input-w {
3953
// Wraps a datetime text input field
4054
position: absolute;
41-
width: $inputW + $ticksBlockerFadeW;
55+
width: $wBgW + $ticksBlockerFadeW;
4256
&.start-date {
43-
@include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
57+
@include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
4458
}
4559
&.end-date {
46-
@include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
60+
@include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
4761
right: 0;
4862
text-align: right;
4963
}
5064
input[type="text"] {
5165
width: $inputW;
5266
}
5367
.icon-calendar {
54-
position: absolute;
55-
margin-left: -16px;
5668
margin-top: 4px;
5769
}
5870
}
@@ -61,8 +73,8 @@
6173
.l-time-conductor-ticks {
6274
$c: $colorTick;
6375
height: $r1H;
64-
margin-top: 0 !important;
6576
mct-conductor-axis {
77+
@include transform(translateY(3px));
6678
display: block;
6779
position: relative;
6880
width: 100%;
@@ -72,10 +84,12 @@
7284
position: relative;
7385
width: 100%;
7486
svg {
75-
stroke: $c;
87+
text-rendering: geometricPrecision;
88+
color: transparent;
89+
fill: $c !important; // Todo: figure out why this isn't working
7690
width: 100%; height: 100%;
7791
> g {
78-
font-size: 0.8em;
92+
font-size: 0.9em;
7993
}
8094
path {display: none;}
8195
line {stroke: $c;}
@@ -86,11 +100,44 @@
86100
background: rgba($colorTick, 0.3);
87101
height: $r2H;
88102
}
89-
.l-time-domain-selector {
90-
position: absolute;
91-
right: 0px;
92-
top: $interiorMargin;
93-
}
103+
104+
.mode-selector .s-menu-btn {
105+
&:before {
106+
@extend .ui-symbol;
107+
margin-right: $interiorMarginSm;
108+
content: $glyphIconFixed;
109+
}
110+
}
111+
112+
// Realtime, latest modes
113+
&.realtime-mode,
114+
&.latest-mode {
115+
.l-time-conductor-inputs-holder {
116+
.l-time-range-input-w {
117+
input:not(:hover) {
118+
background: transparent;
119+
box-shadow: none;
120+
border-radius: 0;
121+
}
122+
.icon-calendar {
123+
display: none;
124+
}
125+
&.end-date {
126+
display: none;
127+
}
128+
}
129+
}
130+
131+
.l-data-visualization {
132+
background: rgba($colorTimeCondKey, 0.5) !important
133+
}
134+
.mode-selector .s-menu-btn {
135+
@include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma));
136+
}
137+
}
138+
139+
&.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
140+
&.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
94141
}
95142

96143
.s-time-range-val {

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,7 @@ $colorAboutLink: #84b3ff;
207207

208208
// Loading
209209
$colorLoadingFg: $colorAlt1;
210-
$colorLoadingBg: rgba($colorBodyFg, 0.2);
210+
$colorLoadingBg: rgba($colorBodyFg, 0.2);
211+
212+
// Time Conductor
213+
$colorTimeCondKey: #1d7a96;

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ $colorGridLines: rgba(#000, 0.05);
5252
$colorInvokeMenu: #fff;
5353
$colorObjHdrTxt: $colorBodyFg;
5454
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
55-
$colorTick: rgba(black, 0.2);
55+
$colorTick: pullForward($colorBodyBg, 30%);
5656

5757
// Menu colors
5858
$colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -185,6 +185,7 @@ $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
185185
// Splitter
186186
$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
187187
$splitterHandleD: 2px;
188+
$splitterDSm: 16px; // Smaller splitter, used inside elements like a Timeline view
188189
$colorSplitterBg: pullForward($colorBodyBg, 10%);
189190
$splitterShdw: none;
190191
$splitterEndCr: none;
@@ -207,3 +208,6 @@ $colorAboutLink: #84b3ff;
207208
// Loading
208209
$colorLoadingFg: $colorAlt1;
209210
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
211+
212+
// Time Conductor
213+
$colorTimeCondKey: #0092b3;

0 commit comments

Comments
 (0)