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

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

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

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

@ -29,8 +29,19 @@
box-sizing: border-box;
width: 100%;
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;
}
}
@ -40,29 +51,36 @@
}
.l-time-conductor-inputs-holder {
$inputW: 180px;
$ticksBlockerFadeW: 25px;
$trInputW: 180px;
$hmInputW: 80px;
$ticksBlockerFadeW: 50px;
$iconCalendarW: 16px;
$wBgColor: $colorBodyBg;
//$wBgColor: green;
$wBgW: $inputW + $interiorMargin + $iconCalendarW;
height: $r1H;
z-index: 1;
.l-time-range-input-w {
.l-time-range-w {
// Wraps a datetime text input field
height: 100%;
position: absolute;
width: $wBgW + $ticksBlockerFadeW;
&.start-date {
@include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
&.start-w {
@include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
padding-right: $ticksBlockerFadeW;
}
&.end-date {
@include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
&.end-w {
@include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
padding-left: $ticksBlockerFadeW;
right: 0;
text-align: right;
}
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 {
margin-top: 4px;
@ -74,7 +92,7 @@
$c: $colorTick;
height: $r1H;
mct-conductor-axis {
@include transform(translateY(3px));
//@include transform(translateY(1px));
display: block;
position: relative;
width: 100%;
@ -85,13 +103,20 @@
width: 100%;
svg {
text-rendering: geometricPrecision;
width: 100%; height: 100%;
width: 100%;
height: 100%;
> g {
font-size: 0.9em;
}
path {display: none;}
line {stroke: $c;}
text { fill: $c; }
path {
display: none;
}
line {
stroke: $c;
}
text {
fill: $c;
}
}
}
}
@ -100,12 +125,8 @@
height: $r2H;
}
.mode-selector .s-menu-btn {
&:before {
@extend .ui-symbol;
margin-right: $interiorMarginSm;
content: $glyphIconFixed;
}
.l-time-conductor-controls {
margin-top: $interiorMargin;
}
// Realtime, latest modes
@ -113,10 +134,19 @@
&.latest-mode {
.l-time-conductor-inputs-holder {
.l-time-range-input-w {
input:not(:hover) {
input[type="text"]:not(.error) {
background: transparent;
box-shadow: none;
border-radius: 0;
padding-left: 0;
padding-right: 0;
&:hover {
@include nice-input();
padding: $inputTextP;
}
}
&.start-date {
pointer-events: none;
}
.icon-calendar {
display: none;
@ -128,15 +158,36 @@
}
.l-data-visualization {
background: rgba($colorTimeCondKey, 0.5) !important
background: rgba($colorTimeCondKeyBg, 0.5) !important
}
.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 {
@ -178,7 +229,9 @@
margin-right: 0;
}
.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);
// 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);
// Time Conductor
$colorTimeCondKey: #0092b3;
$colorTimeCondKeyBg: #0092b3;
$colorTimeCondKeyFg: #fff;

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

@ -1,15 +1,11 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<style>
.start-delta {
left: 180px;
}
</style>
<div ng-controller="TimeConductorController as tcController"
class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
<!-- Holds inputs and ticks -->
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
<form class="abs l-time-conductor-inputs-holder"
ng-submit="tcController.updateBoundsFromForm(formModel)">
<span class="l-time-range-w start-w">
<span class="l-time-range-input-w start-date">
<mct-control key="'datetime-field'"
structure="{
@ -20,11 +16,12 @@
ng-mouseup="tcController.changing['start'] = true"
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
field="'start'"
class="time-range-start">
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w start-delta"
<span class="l-time-range-input-w time-delta start-delta"
ng-class="{'hide':(modeModel.selected === 'fixed')}">
-
<mct-control key="'datetime-field'"
structure="{
format: 'duration',
@ -34,12 +31,17 @@
ng-mouseup="tcController.changing['startDelta'] = true"
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
field="'startDelta'"
class="time-delta-start">
class="hrs-min-input">
</mct-control>
</span>
<span class="l-time-range-input-w end-delta"
</span>
<span class="l-time-range-w end-w">
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(modeModel.selected === 'fixed')}">
<mct-control key="'time-field'"
+
<mct-control key="'datetime-field'"
structure="{
format: 'duration',
validate: tcController.validateEndDelta
@ -48,7 +50,7 @@
ng-mouseup="tcController.changing['endDelta'] = true"
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
field="'endDelta'"
class="time-delta-end">
class="hrs-min-input">
</mct-control>
</span>
<span class="l-time-range-input-w end-date"
@ -62,9 +64,11 @@
ng-mouseup="tcController.changing['end'] = true"
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
field="'end'"
class="time-range-end">
class="time-range-input">
</mct-control>
</span>
</span>
<input type="submit" class="hidden">
</form>
<mct-conductor-axis></mct-conductor-axis>
@ -74,7 +78,7 @@
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
<!-- 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
key="'mode-selector'"
mct-object="domainObject"