ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-01 15:10:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for Time Conductor v2

Browse Source 
Fixes #933
In-progress: fixed SVG text color, field
styling for fixed vs. real-time, markup cleanup
This commit is contained in:
Charles Hacskaylo 2016-07-13 13:14:32 -07:00
parent 5238aa2731
commit 06af84c161
6 changed files with 183 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/general/res/sass/_constants.scss
View File

@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
$uePaneMiniTabCollapsedW: 11px; $uePaneMiniTabCollapsedW: 11px;
$ueEditLeftPaneW: 75%; $ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px; $treeSearchInputBarH: 25px;
$ueTimeControlH: (21px, 18px, 20px); $ueTimeControlH: (25px, 18px, 20px);
/*************** Panes */ /*************** Panes */
$ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMinW: 150px;
$ueBrowseLeftPaneTreeMaxW: 35%; $ueBrowseLeftPaneTreeMaxW: 35%;
@ -108,6 +108,7 @@ $bubbleMaxW: 300px;
$reqSymbolW: 15px; $reqSymbolW: 15px;
$reqSymbolM: $interiorMargin * 2; $reqSymbolM: $interiorMargin * 2;
$reqSymbolFontSize: 0.7em; $reqSymbolFontSize: 0.7em;
$inputTextP: 3px 5px;
/*************** Wait Spinner Defaults */ /*************** Wait Spinner Defaults */
$waitSpinnerD: 32px; $waitSpinnerD: 32px;
$waitSpinnerTreeD: 20px; $waitSpinnerTreeD: 20px;

2
platform/commonUI/general/res/sass/_global.scss
View File

@ -66,7 +66,7 @@ input, textarea {
input[type="text"], input[type="text"],
input[type="search"] { input[type="search"] {
vertical-align: baseline; vertical-align: baseline;
padding: 3px 5px; padding: $inputTextP;
} }
h1, h2, h3 { h1, h2, h3 {

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

@ -1,18 +1,18 @@
@mixin toiLineHovEffects() { @mixin toiLineHovEffects() {
&:before, &:before,
&:after { &:after {
background-color: $timeControllerToiLineColorHov; background-color: $timeControllerToiLineColorHov;
} }
} }
.l-time-conductor { .l-time-conductor {
$minW: 500px; $minW: 500px;
$knobHOffset: 0px; $knobHOffset: 0px;
$rangeValPad: $interiorMargin; $rangeValPad: $interiorMargin;
$rangeValOffset: $sliderKnobW + $interiorMargin; $rangeValOffset: $sliderKnobW + $interiorMargin;
$r1H: nth($ueTimeControlH,1); $r1H: nth($ueTimeControlH, 1);
$r2H: nth($ueTimeControlH,2); $r2H: nth($ueTimeControlH, 2);
$r3H: nth($ueTimeControlH,3); $r3H: nth($ueTimeControlH, 3);
// Glyphs Todo: replace with refactored CSS approach when that is merged into master // Glyphs Todo: replace with refactored CSS approach when that is merged into master
$glyphIconFixed: '\e604'; $glyphIconFixed: '\e604';
@ -24,57 +24,75 @@
min-width: $minW; min-width: $minW;
position: relative; position: relative;
>.l-row-elem { > .l-row-elem {
// First order row elements // First order row elements
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
position: relative; position: relative;
&:not(:first-child) { }
margin-top: $interiorMargin;
.mode-selector .s-menu-btn,
.time-delta {
&:before {
@extend .ui-symbol;
margin-right: $interiorMarginSm;
} }
} }
.time-delta {
&:before {
color: $colorTimeCondKeyBg;
}
}
.l-time-conductor-inputs-holder, .l-time-conductor-inputs-holder,
.l-time-conductor-ticks { .l-time-conductor-ticks {
font-size: 0.8rem; font-size: 0.8rem;
} }
.l-time-conductor-inputs-holder { .l-time-conductor-inputs-holder {
$inputW: 180px; $trInputW: 180px;
$ticksBlockerFadeW: 25px; $hmInputW: 80px;
$ticksBlockerFadeW: 50px;
$iconCalendarW: 16px; $iconCalendarW: 16px;
$wBgColor: $colorBodyBg; $wBgColor: $colorBodyBg;
//$wBgColor: green;
$wBgW: $inputW + $interiorMargin + $iconCalendarW;
height: $r1H; height: $r1H;
z-index: 1; z-index: 1;
.l-time-range-input-w { .l-time-range-w {
// Wraps a datetime text input field // Wraps a datetime text input field
height: 100%;
position: absolute; position: absolute;
width: $wBgW + $ticksBlockerFadeW; &.start-w {
&.start-date { @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
@include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%)); padding-right: $ticksBlockerFadeW;
} }
&.end-date { &.end-w {
@include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%)); @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
padding-left: $ticksBlockerFadeW;
right: 0; right: 0;
text-align: right; text-align: right;
} }
input[type="text"] { input[type="text"] {
width: $inputW; @include trans-prop-nice(padding, 250ms);
}
.time-range-input input {
width: $trInputW;
}
.hrs-min-input input {
width: $hmInputW;
} }
.icon-calendar { .icon-calendar {
margin-top: 4px; margin-top: 4px;
} }
} }
} }
.l-time-conductor-ticks { .l-time-conductor-ticks {
$c: $colorTick; $c: $colorTick;
height: $r1H; height: $r1H;
mct-conductor-axis { mct-conductor-axis {
@include transform(translateY(3px)); //@include transform(translateY(1px));
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
@ -85,27 +103,30 @@
width: 100%; width: 100%;
svg { svg {
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
width: 100%; height: 100%; width: 100%;
height: 100%;
> g { > g {
font-size: 0.9em; font-size: 0.9em;
} }
path {display: none;} path {
line {stroke: $c;} display: none;
text { fill: $c; } }
line {
stroke: $c;
}
text {
fill: $c;
}
} }
} }
} }
.l-data-visualization { .l-data-visualization {
background: rgba($colorTick, 0.3); background: rgba($colorTick, 0.3);
height: $r2H; height: $r2H;
} }
.mode-selector .s-menu-btn { .l-time-conductor-controls {
&:before { margin-top: $interiorMargin;
@extend .ui-symbol;
margin-right: $interiorMarginSm;
content: $glyphIconFixed;
}
} }
// Realtime, latest modes // Realtime, latest modes
@ -113,10 +134,19 @@
&.latest-mode { &.latest-mode {
.l-time-conductor-inputs-holder { .l-time-conductor-inputs-holder {
.l-time-range-input-w { .l-time-range-input-w {
input:not(:hover) { input[type="text"]:not(.error) {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
padding-left: 0;
padding-right: 0;
&:hover {
@include nice-input();
padding: $inputTextP;
}
}
&.start-date {
pointer-events: none;
} }
.icon-calendar { .icon-calendar {
display: none; display: none;
@ -128,21 +158,42 @@
} }
.l-data-visualization { .l-data-visualization {
background: rgba($colorTimeCondKey, 0.5) !important background: rgba($colorTimeCondKeyBg, 0.5) !important
} }
.mode-selector .s-menu-btn { .mode-selector .s-menu-btn {
@include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma)); @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
}
}
&.fixed-mode {
$i: $glyphIconFixed;
.mode-selector .s-menu-btn:before {
content: $i;
}
}
&.realtime-mode {
$i: $glyphIconRealtime;
.time-delta:before {
content: $i;
}
.mode-selector .s-menu-btn:before {
content: $i;
}
}
&.latest-mode {
$i: $glyphIconLatest;
.time-delta:before {
content: $i;
}
.mode-selector .s-menu-btn:before {
content: $i;
} }
} }
&.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
&.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
} }
.s-time-range-val { .s-time-range-val {
border-radius: $controlCr; border-radius: $controlCr;
background-color: $colorInputBg; background-color: $colorInputBg;
padding: 1px 1px 0 $interiorMargin; padding: 1px 1px 0 $interiorMargin;
} }
/******************************************************************** MOBILE */ /******************************************************************** MOBILE */
@ -178,7 +229,9 @@
margin-right: 0; margin-right: 0;
} }
.l-time-range-inputs-elem { .l-time-range-inputs-elem {
&.lbl { display: none; } &.lbl {
display: none;
}
} }
} }
} }

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

@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
$colorLoadingBg: rgba($colorBodyFg, 0.2); $colorLoadingBg: rgba($colorBodyFg, 0.2);
// Time Conductor // Time Conductor
$colorTimeCondKey: #1d7a96; $colorTimeCondKeyBg: #1d7a96;
$colorTimeCondKeyFg: #fff;

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

@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
$colorLoadingBg: rgba($colorLoadingFg, 0.1); $colorLoadingBg: rgba($colorLoadingFg, 0.1);
// Time Conductor // Time Conductor
$colorTimeCondKey: #0092b3; $colorTimeCondKeyBg: #0092b3;
$colorTimeCondKeyFg: #fff;

136
platform/features/conductor-v2/res/templates/time-conductor.html
View File

@ -1,71 +1,75 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode --> <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<style>
.start-delta {
left: 180px;
}
</style>
<div ng-controller="TimeConductorController as tcController" <div ng-controller="TimeConductorController as tcController"
class="l-time-conductor l-flex-col {{modeModel.selected}}-mode"> class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
<!-- Holds inputs and ticks --> <!-- Holds inputs and ticks -->
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin"> <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
<form class="abs l-time-conductor-inputs-holder" <form class="abs l-time-conductor-inputs-holder"
ng-submit="tcController.updateBoundsFromForm(formModel)"> ng-submit="tcController.updateBoundsFromForm(formModel)">
<span class="l-time-range-input-w start-date"> <span class="l-time-range-w start-w">
<mct-control key="'datetime-field'" <span class="l-time-range-input-w start-date">
structure="{ <mct-control key="'datetime-field'"
format: 'utc', structure="{
validate: tcController.validateStart format: 'utc',
}" validate: tcController.validateStart
ng-model="formModel" }"
ng-mouseup="tcController.changing['start'] = true" ng-model="formModel"
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)" ng-mouseup="tcController.changing['start'] = true"
field="'start'" ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
class="time-range-start"> field="'start'"
</mct-control> class="time-range-input">
</span> </mct-control>
<span class="l-time-range-input-w start-delta" </span>
ng-class="{'hide':(modeModel.selected === 'fixed')}"> <span class="l-time-range-input-w time-delta start-delta"
<mct-control key="'datetime-field'" ng-class="{'hide':(modeModel.selected === 'fixed')}">
structure="{ -
format: 'duration', <mct-control key="'datetime-field'"
validate: tcController.validateStartDelta structure="{
}" format: 'duration',
ng-model="formModel" validate: tcController.validateStartDelta
ng-mouseup="tcController.changing['startDelta'] = true" }"
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)" ng-model="formModel"
field="'startDelta'" ng-mouseup="tcController.changing['startDelta'] = true"
class="time-delta-start"> ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
</mct-control> field="'startDelta'"
</span> class="hrs-min-input">
<span class="l-time-range-input-w end-delta" </mct-control>
ng-class="{'hide':(modeModel.selected === 'fixed')}"> </span>
<mct-control key="'time-field'" </span>
structure="{
format: 'duration',
validate: tcController.validateEndDelta <span class="l-time-range-w end-w">
}" <span class="l-time-range-input-w time-delta end-delta"
ng-model="formModel" ng-class="{'hide':(modeModel.selected === 'fixed')}">
ng-mouseup="tcController.changing['endDelta'] = true" +
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)" <mct-control key="'datetime-field'"
field="'endDelta'" structure="{
class="time-delta-end"> format: 'duration',
</mct-control> validate: tcController.validateEndDelta
</span> }"
<span class="l-time-range-input-w end-date" ng-model="formModel"
ng-controller="ToggleController as t2"> ng-mouseup="tcController.changing['endDelta'] = true"
<mct-control key="'datetime-field'" ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
structure="{ field="'endDelta'"
format: 'utc', class="hrs-min-input">
validate: tcController.validateEnd </mct-control>
}" </span>
ng-model="formModel" <span class="l-time-range-input-w end-date"
ng-mouseup="tcController.changing['end'] = true" ng-controller="ToggleController as t2">
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)" <mct-control key="'datetime-field'"
field="'end'" structure="{
class="time-range-end"> format: 'utc',
</mct-control> validate: tcController.validateEnd
</span> }"
<input type="submit" class="hidden"> ng-model="formModel"
ng-mouseup="tcController.changing['end'] = true"
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
field="'end'"
class="time-range-input">
</mct-control>
</span>
</span>
<input type="submit" class="hidden">
</form> </form>
<mct-conductor-axis></mct-conductor-axis> <mct-conductor-axis></mct-conductor-axis>
</div> </div>
@ -74,7 +78,7 @@
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div> <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
<!-- Holds time system and session selectors, and zoom control --> <!-- Holds time system and session selectors, and zoom control -->
<div class="l-time-system-zoom l-row-elem l-flex-row flex-elem"> <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
<mct-representation <mct-representation
key="'mode-selector'" key="'mode-selector'"
mct-object="domainObject" mct-object="domainObject"
@ -82,10 +86,10 @@
class="holder flex-elem menus-up mode-selector"> class="holder flex-elem menus-up mode-selector">
</mct-representation> </mct-representation>
<mct-control <mct-control
key="'menu-button'" key="'menu-button'"
class="holder flex-elem menus-up time-system" class="holder flex-elem menus-up time-system"
ng-model="conductorModel.timeSystem" ng-model="conductorModel.timeSystem"
structure="{ structure="{
text: 'UTC', text: 'UTC',
options: [ options: [
{name: 'UTC', key:'utc', glyph:'\u0043'}, {name: 'UTC', key:'utc', glyph:'\u0043'},