ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-22 20:38:23 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Frontend] Time Conductor v2 styling

Browse Source 
Fixes #933
Changed desktop and mobile RT UI to display
end datetime and hide start;
WIP: mobile styling for main UI of TC;
This commit is contained in:
Charles Hacskaylo 2016-07-20 11:43:40 -07:00
parent 2124fe01e1
commit ff1678435e
2 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
platform/features/conductor-v2/res/sass/time-conductor.scss
View File

@ -152,7 +152,7 @@ $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;
}
@ -165,6 +165,8 @@ $ueTimeConductorH: (25px, 6px, 20px);
$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
@ -195,7 +197,7 @@ $ueTimeConductorH: (25px, 6px, 20px);
}
}
.l-time-conductor-ticks {
.l-time-conductor-inputs-and-ticks {
$c: $colorTick;
height: $r1H;
mct-conductor-axis {
@ -286,15 +288,20 @@ $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: $colorTimeCondKeyBg;
margin-right: $interiorMargin;
text-align: right;
}
}
}
}
@ -346,64 +353,62 @@ $ueTimeConductorH: (25px, 6px, 20px);
/******************************************************************** MOBILE */
@include phoneandtablet {
.l-time-conductor {
min-width: 0;
.l-time-range-slider-holder,
.l-time-conductor-ticks {
display: none;
}
}
}
//@include phoneandtablet {}
@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;
}
}
.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;
}
}
}
}
min-width: 0;
.l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; }
//TODO: mode menu smaller, hide right side
}
}
@include phonePortrait {
.l-time-conductor {
.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 {
.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%;
}
input[type="text"] {
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;
}
}
}
}
// Realtime, latest modes
&.realtime-mode,
&.latest-mode {
// TODO: hide all of start-w
.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;
}
}

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

@ -9,8 +9,8 @@
<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 l-flex-row 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">
@ -28,6 +28,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,20 +42,6 @@
</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">
<mct-control key="'datetime-field'"
@ -69,6 +56,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">