ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 06:03:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for Time Conductor v2

Browse Source 
Fixes #933
Color adjusts, mini super-menu size
and font tweaks, glyphs added to selector,
SVG style fixes in progress
This commit is contained in:
Charles Hacskaylo 2016-07-11 14:03:41 -07:00
parent bf0e85a94c
commit 64ce8a2b2a
4 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -202,7 +202,7 @@
margin-bottom: $interiorMargin * 2;
}
&.description {
color: $colorCreateMenuText;
color: pushBack($colorCreateMenuText, 20%);
font-size: 0.8em;
line-height: 1.5em;
}
@ -211,15 +211,21 @@
}
&.mini {
width: 350px;
height: 250px;
width: 400px;
height: 300px;
.pane {
&.menu-items {
font-size: 0.8em;
}
&.menu-item-description {
padding: $interiorMargin * 3;
.desc-area {
&.icon {
font-size: 4em;
}
&.title {
font-size: 1em;
}
}
}
}

75
platform/commonUI/general/res/sass/controls/_time-conductor.scss
View File

@ -14,10 +14,14 @@
$r2H: nth($ueTimeControlH,2);
$r3H: nth($ueTimeControlH,3);
// Glyphs Todo: replace with refactored CSS approach when that is merged into master
$glyphIconFixed: '\e604';
$glyphIconRealtime: '\43';
$glyphIconLatest: '\44';
border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
min-width: $minW;
font-size: 0.8rem;
position: relative;
>.l-row-elem {
@ -30,20 +34,30 @@
}
}
.l-time-conductor-inputs-holder,
.l-time-conductor-ticks {
font-size: 0.8rem;
}
.l-time-conductor-inputs-holder {
$inputW: 200px;
$inputW: 180px;
$ticksBlockerFadeW: 25px;
$iconCalendarW: 16px;
$wBgColor: $colorBodyBg;
//$wBgColor: green;
$wBgW: $inputW + $interiorMargin + $iconCalendarW;
height: $r1H;
z-index: 1;
.l-time-range-input-w {
// Wraps a datetime text input field
position: absolute;
width: $inputW + $ticksBlockerFadeW;
width: $wBgW + $ticksBlockerFadeW;
&.start-date {
@include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
@include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
}
&.end-date {
@include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
@include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
right: 0;
text-align: right;
}
@ -51,8 +65,6 @@
width: $inputW;
}
.icon-calendar {
position: absolute;
margin-left: -16px;
margin-top: 4px;
}
}
@ -61,8 +73,8 @@
.l-time-conductor-ticks {
$c: $colorTick;
height: $r1H;
margin-top: 0 !important;
mct-conductor-axis {
@include transform(translateY(3px));
display: block;
position: relative;
width: 100%;
@ -72,10 +84,12 @@
position: relative;
width: 100%;
svg {
stroke: $c;
text-rendering: geometricPrecision;
color: transparent;
fill: $c !important; // Todo: figure out why this isn't working
width: 100%; height: 100%;
> g {
font-size: 0.8em;
font-size: 0.9em;
}
path {display: none;}
line {stroke: $c;}
@ -86,13 +100,46 @@
background: rgba($colorTick, 0.3);
height: $r2H;
}
.l-time-domain-selector {
position: absolute;
right: 0px;
top: $interiorMargin;
.mode-selector .s-menu-btn {
&:before {
@extend .ui-symbol;
margin-right: $interiorMarginSm;
content: $glyphIconFixed;
}
}
// Realtime, latest modes
&.realtime-mode,
&.latest-mode {
.l-time-conductor-inputs-holder {
.l-time-range-input-w {
input:not(:hover) {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.icon-calendar {
display: none;
}
&.end-date {
display: none;
}
}
}
.l-data-visualization {
background: rgba($colorTimeCondKey, 0.5) !important
}
.mode-selector .s-menu-btn {
@include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma));
}
}
&.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
&.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
}
.s-time-range-val {
border-radius: $controlCr;
background-color: $colorInputBg;

3
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -208,3 +208,6 @@ $colorAboutLink: #84b3ff;
// Loading
$colorLoadingFg: $colorAlt1;
$colorLoadingBg: rgba($colorBodyFg, 0.2);
// Time Conductor
$colorTimeCondKey: #1d7a96;

6
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -52,7 +52,7 @@ $colorGridLines: rgba(#000, 0.05);
$colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
$colorTick: rgba(black, 0.2);
$colorTick: pullForward($colorBodyBg, 30%);
// Menu colors
$colorMenuBg: pushBack($colorBodyBg, 10%);
@ -185,6 +185,7 @@ $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
// Splitter
$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
$splitterHandleD: 2px;
$splitterDSm: 16px; // Smaller splitter, used inside elements like a Timeline view
$colorSplitterBg: pullForward($colorBodyBg, 10%);
$splitterShdw: none;
$splitterEndCr: none;
@ -207,3 +208,6 @@ $colorAboutLink: #84b3ff;
// Loading
$colorLoadingFg: $colorAlt1;
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
// Time Conductor
$colorTimeCondKey: #0092b3;