mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 21:53:08 +00:00
Merge branch 'open933-frontend-b' into open933
This commit is contained in:
Henry
commit
19fd63b850
Binary file not shown.
@ -101,5 +101,6 @@
|
||||
<glyph unicode="" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
|
||||
<glyph unicode="" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
|
||||
<glyph unicode="" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
|
||||
<glyph unicode="" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
|
||||
<glyph unicode="" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
Binary file not shown.
@ -30,6 +30,7 @@
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
&.type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
}
|
||||
|
||||
3
platform/features/conductor-v2/res/sass/_constants.scss
Normal file
3
platform/features/conductor-v2/res/sass/_constants.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$ueTimeConductorH: (25px, 15px, 20px);
|
||||
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
|
||||
$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
|
||||
@ -20,7 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@import "bourbon";
|
||||
|
||||
@import "../../../../commonUI/general/res/sass/constants";
|
||||
@import "../../../../commonUI/general/res/sass/mixins";
|
||||
@import "../../../../commonUI/general/res/sass/mobile/constants";
|
||||
@ -28,8 +27,7 @@
|
||||
@import "../../../../commonUI/themes/espresso/res/sass/constants";
|
||||
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
|
||||
@import "../../../../commonUI/general/res/sass/icons";
|
||||
|
||||
$ueTimeConductorH: (25px, 6px, 20px);
|
||||
@import "constants";
|
||||
|
||||
@mixin toiLineHovEffects() {
|
||||
&:before,
|
||||
@ -47,40 +45,27 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
|
||||
.time-conductor-icon {
|
||||
$c: $colorObjHdrIc;
|
||||
$d: 20px;
|
||||
background: $c;
|
||||
border-radius: 4px;
|
||||
$d: 18px;
|
||||
height: $d !important;
|
||||
width: $d;
|
||||
position: relative;
|
||||
|
||||
// Icon shape: brackets
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
background: $colorBodyBg;
|
||||
position: absolute;
|
||||
}
|
||||
&:before {
|
||||
$in: 7px;
|
||||
left: $in;
|
||||
top: 0;
|
||||
right: $in;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
&:after {
|
||||
$in: 4px;
|
||||
left: $in;
|
||||
top: $in;
|
||||
right: $in;
|
||||
bottom: $in;
|
||||
@extend .ui-symbol;
|
||||
color: $c;
|
||||
content: '\e624';
|
||||
font-size: $d;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Clock hands
|
||||
div[class*="hand"] {
|
||||
$handW: 2px;
|
||||
$handH: 8px;
|
||||
$handH: $d * 0.4; //8px;
|
||||
@include transform(translate(-50%, -50%));
|
||||
@include animation-iteration-count(infinite);
|
||||
@include animation-timing-function(linear);
|
||||
@ -152,42 +137,54 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
}
|
||||
|
||||
.l-time-conductor-inputs-holder,
|
||||
.l-time-conductor-ticks,
|
||||
.l-time-conductor-inputs-and-ticks,
|
||||
.l-time-conductor-zoom-w {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.l-time-conductor-inputs-holder {
|
||||
$trInputW: 180px;
|
||||
$hmInputW: 60px;
|
||||
$ticksBlockerFadeW: 50px;
|
||||
$iconCalendarW: 16px;
|
||||
$wBgColor: $colorBodyBg;
|
||||
|
||||
height: $r1H;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
.l-time-range-w {
|
||||
// Wraps a datetime text input field
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.start-w {
|
||||
@include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
|
||||
padding-right: $ticksBlockerFadeW;
|
||||
.title:before {
|
||||
content: 'Start';
|
||||
}
|
||||
}
|
||||
&.end-w {
|
||||
@include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
|
||||
padding-left: $ticksBlockerFadeW;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
.title:before {
|
||||
content: 'End';
|
||||
}
|
||||
}
|
||||
input[type="text"] {
|
||||
@include trans-prop-nice(padding, 250ms);
|
||||
}
|
||||
.time-range-input input {
|
||||
width: $trInputW;
|
||||
.time-range-input input[type="text"] {
|
||||
width: $timeCondInputTimeSysDefW;
|
||||
}
|
||||
.hrs-min-input input {
|
||||
width: $hmInputW;
|
||||
.hrs-min-input input[type="text"] {
|
||||
width: $timeCondInputDeltaDefW;
|
||||
}
|
||||
.icon-calendar {
|
||||
margin-top: 4px;
|
||||
@ -195,7 +192,7 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-conductor-ticks {
|
||||
.l-time-conductor-inputs-and-ticks {
|
||||
$c: $colorTick;
|
||||
height: $r1H;
|
||||
mct-conductor-axis {
|
||||
@ -248,22 +245,13 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
color: $colorTick;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// Fixed
|
||||
&.fixed-mode {
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
&.hand-little {
|
||||
@include transform(rotate(120deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime, latest modes
|
||||
// Real-time, latest modes
|
||||
&.realtime-mode,
|
||||
&.latest-mode {
|
||||
.time-conductor-icon {
|
||||
background: $colorTimeCondKeyBg;
|
||||
&:before { color: $colorTimeCondKeyBg; }
|
||||
div[class*="hand"] {
|
||||
@include animation-name(clock-hands);
|
||||
&:before {
|
||||
@ -286,71 +274,94 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
padding: $inputTextP;
|
||||
}
|
||||
}
|
||||
&.start-date {
|
||||
pointer-events: none;
|
||||
}
|
||||
.icon-calendar {
|
||||
display: none;
|
||||
}
|
||||
&.end-date {
|
||||
&.start-date {
|
||||
display: none;
|
||||
}
|
||||
&.end-date {
|
||||
pointer-events: none;
|
||||
input[type="text"] {
|
||||
color: pullForward($colorTimeCondKeyBg, 5%);
|
||||
margin-right: $interiorMargin;
|
||||
tab-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
|
||||
&.latest-mode .time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands-sticky);
|
||||
&.hand-big { @include animation-duration(5s); }
|
||||
&.hand-little { @include animation-duration(60s); }
|
||||
}
|
||||
|
||||
.l-data-visualization {
|
||||
background: $colorTimeCondDataVisRtBg !important
|
||||
}
|
||||
|
||||
.mode-selector .s-menu-btn {
|
||||
@include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed mode
|
||||
&.fixed-mode {
|
||||
$i: $glyphIconFixed;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
&.hand-little {
|
||||
@include transform(rotate(120deg));
|
||||
}
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime mode
|
||||
&.realtime-mode {
|
||||
$i: $glyphIconRealtime;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands);
|
||||
}
|
||||
.time-delta:before {
|
||||
content: $i;
|
||||
}
|
||||
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
|
||||
content: 'Now';
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// LAD mode
|
||||
&.latest-mode {
|
||||
$i: $glyphIconLatest;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands-sticky);
|
||||
&.hand-big {
|
||||
@include animation-duration(5s);
|
||||
}
|
||||
&.hand-little {
|
||||
@include animation-duration(60s);
|
||||
}
|
||||
}
|
||||
.time-delta:before {
|
||||
content: $i;
|
||||
}
|
||||
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
|
||||
content: 'LAD';
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-time-range-val {
|
||||
border-radius: $controlCr;
|
||||
background-color: $colorInputBg;
|
||||
padding: 1px 1px 0 $interiorMargin;
|
||||
}
|
||||
|
||||
/******************************************************************** MOBILE */
|
||||
|
||||
@include phoneandtablet {
|
||||
.l-time-conductor {
|
||||
min-width: 0;
|
||||
.l-time-range-slider-holder,
|
||||
.l-time-conductor-ticks {
|
||||
.l-time-conductor-holder { min-width: 0 !important; }
|
||||
.super-menu.mini {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
.pane.menu-item-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -358,52 +369,76 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
|
||||
@include phone {
|
||||
.l-time-conductor {
|
||||
.l-time-conductor-inputs-holder {
|
||||
&.l-flex-row,
|
||||
.l-flex-row {
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
.l-time-range-inputs-elem {
|
||||
&.type-icon {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
min-width: 0;
|
||||
.l-time-conductor-inputs-and-ticks {
|
||||
.l-time-conductor-inputs-holder {
|
||||
@include flex-direction(column);
|
||||
.l-time-range-input-w:not(:first-child) {
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
margin-right: 0;
|
||||
}
|
||||
.l-time-range-inputs-elem {
|
||||
&.lbl {
|
||||
display: none;
|
||||
}
|
||||
.l-time-range-w {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
mct-conductor-axis {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
.l-time-conductor {
|
||||
.l-time-conductor-inputs-holder {
|
||||
.l-data-visualization,
|
||||
.l-time-conductor-zoom-w,
|
||||
.time-delta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.l-time-conductor-inputs-and-ticks {
|
||||
height: auto !important;
|
||||
.l-time-conductor-inputs-holder {
|
||||
@include flex(1 1 auto);
|
||||
padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
|
||||
.flex-elem {
|
||||
@include flex(1 1 auto);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: auto !important;
|
||||
|
||||
.l-time-range-w {
|
||||
background-image: none !important;
|
||||
display: block;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed mode
|
||||
&.fixed-mode {
|
||||
.l-time-conductor-inputs-and-ticks {
|
||||
.l-time-range-w {
|
||||
.title {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Real-time, latest modes
|
||||
&.realtime-mode,
|
||||
&.latest-mode {
|
||||
.l-time-conductor-inputs-and-ticks {
|
||||
.l-time-range-w {
|
||||
&.start-w {
|
||||
display: none;
|
||||
}
|
||||
&.end-w {
|
||||
margin-top: 0;
|
||||
.end-date input[type="text"] {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.l-time-domain-selector {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,11 +9,12 @@
|
||||
|
||||
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
|
||||
<!-- 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"
|
||||
<div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
|
||||
<form class="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">
|
||||
<span class="title"></span>
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: timeSystemModel.format,
|
||||
@ -28,6 +29,7 @@
|
||||
</span>
|
||||
<span class="l-time-range-input-w time-delta start-delta"
|
||||
ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
|
||||
-
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
@ -41,22 +43,9 @@
|
||||
</span>
|
||||
</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.metadata.key === 'fixed')}">
|
||||
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validation.validateEndDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-blur="tcController.updateDeltasFromForm(formModel)"
|
||||
field="'endDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<span class="title"></span>
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: timeSystemModel.format,
|
||||
@ -69,6 +58,20 @@
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w time-delta end-delta"
|
||||
ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
|
||||
+
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validation.validateEndDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-blur="tcController.updateDeltasFromForm(formModel)"
|
||||
field="'endDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<input type="submit" class="hidden">
|
||||
@ -77,7 +80,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Holds data availability, time of interest -->
|
||||
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
|
||||
<div class="l-data-visualization l-row-elem flex-elem"></div>
|
||||
|
||||
<!-- Holds time system and session selectors, and zoom control -->
|
||||
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
|
||||
|
||||
@ -259,7 +259,8 @@ $ueTimeConductorH: (33px, 18px, 20px);
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.t-inputs-w {
|
||||
.t-inputs-w,
|
||||
.l-time-range-inputs-elem {
|
||||
@include flex-direction(column);
|
||||
.l-time-range-input-w:not(:first-child) {
|
||||
&:not(:first-child) {
|
||||
@ -278,7 +279,8 @@ $ueTimeConductorH: (33px, 18px, 20px);
|
||||
@include phonePortrait {
|
||||
.l-time-controller {
|
||||
.l-time-range-inputs-holder {
|
||||
.t-inputs-w {
|
||||
.t-inputs-w,
|
||||
.l-time-range-inputs-elem {
|
||||
@include flex(1 1 auto);
|
||||
padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
|
||||
.flex-elem {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user