mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 06:03:08 +00:00
[Frontend] Styling for Time Conductor v2
Fixes #993 In-progress; class renaming continued, cleanups in markup file, in-page styles ported to scss
This commit is contained in:
Charles Hacskaylo
parent
58ed500ecf
commit
32f7bc86af
@ -121,17 +121,18 @@
|
||||
.l-flex-row {
|
||||
@include flex-direction(row);
|
||||
&.flex-elem { @include flex(1 1 auto); }
|
||||
.flex-elem {
|
||||
> .flex-elem {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
min-width: 0;
|
||||
&.holder:not(:last-child) { margin-right: $interiorMargin; }
|
||||
}
|
||||
.flex-container { @include flex-direction(row); }
|
||||
}
|
||||
|
||||
.l-flex-col {
|
||||
@include flex-direction(column);
|
||||
.flex-elem {
|
||||
> .flex-elem {
|
||||
min-height: 0;
|
||||
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
|
||||
$uePaneMiniTabCollapsedW: 11px;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
$ueTimeControlH: (33px, 18px, 20px);
|
||||
$ueTimeControlH: (21px, 18px, 20px);
|
||||
/*************** Panes */
|
||||
$ueBrowseLeftPaneTreeMinW: 150px;
|
||||
$ueBrowseLeftPaneTreeMaxW: 35%;
|
||||
|
||||
@ -5,188 +5,88 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-controller {
|
||||
.l-time-conductor {
|
||||
$minW: 500px;
|
||||
$knobHOffset: 0px;
|
||||
$knobM: ($sliderKnobW + $knobHOffset) * -1;
|
||||
$rangeValPad: $interiorMargin;
|
||||
$rangeValOffset: $sliderKnobW + $interiorMargin;
|
||||
$timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
|
||||
$r1H: nth($ueTimeControlH,1); // Not currently used
|
||||
$r1H: nth($ueTimeControlH,1);
|
||||
$r2H: nth($ueTimeControlH,2);
|
||||
$r3H: nth($ueTimeControlH,3);
|
||||
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
padding-top: $interiorMargin;
|
||||
min-width: $minW;
|
||||
font-size: 0.8rem;
|
||||
position: relative;
|
||||
|
||||
.l-time-range-inputs-holder,
|
||||
.l-time-range-slider-holder,
|
||||
.l-time-range-ticks-holder
|
||||
{
|
||||
>.l-row-elem {
|
||||
// First order row elements
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
.l-time-range-slider,
|
||||
.l-time-range-ticks {
|
||||
@include absPosDefault(0, visible);
|
||||
left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
|
||||
}
|
||||
|
||||
.l-time-range-inputs-holder {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
padding-top: $interiorMargin;
|
||||
&.l-flex-row,
|
||||
.l-flex-row {
|
||||
@include align-items(center);
|
||||
.flex-elem {
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
.type-icon {
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.l-time-range-input-w,
|
||||
.l-time-range-inputs-elem {
|
||||
margin-right: $interiorMargin;
|
||||
.lbl {
|
||||
color: $colorPlotLabelFg;
|
||||
}
|
||||
.ui-symbol.icon {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.l-time-conductor-inputs-holder {
|
||||
$inputW: 200px;
|
||||
$ticksBlockerFadeW: 25px;
|
||||
height: $r1H;
|
||||
z-index: 1;
|
||||
.l-time-range-input-w {
|
||||
// Wraps a datetime text input field
|
||||
position: relative;
|
||||
position: absolute;
|
||||
width: $inputW + $ticksBlockerFadeW;
|
||||
&.start-date {
|
||||
@include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
|
||||
}
|
||||
|
||||
&.end-date {
|
||||
@include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 200px;
|
||||
&.picker-icon {
|
||||
padding-right: 20px;
|
||||
}
|
||||
width: $inputW;
|
||||
}
|
||||
|
||||
.icon-calendar {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
margin-left: -16px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-range-slider-holder {
|
||||
height: $r2H;
|
||||
.range-holder {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none;
|
||||
.range {
|
||||
.toi-line {
|
||||
$myC: $timeControllerToiLineColor;
|
||||
$myW: 8px;
|
||||
@include transform(translateX(50%));
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0px; left: auto;
|
||||
width: $myW;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
&:before {
|
||||
// Vert line
|
||||
background-color: $myC;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
&:hover .toi-line {
|
||||
@include toiLineHovEffects;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:active) {
|
||||
.knob,
|
||||
.range {
|
||||
@include transition-property(left, right);
|
||||
@include transition-duration(500ms);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-range-ticks-holder {
|
||||
height: $r3H;
|
||||
.l-time-range-ticks {
|
||||
border-top: 1px solid $colorTick;
|
||||
.tick {
|
||||
background-color: $colorTick;
|
||||
border:none;
|
||||
height: 5px;
|
||||
width: 1px;
|
||||
margin-left: -1px;
|
||||
position: absolute;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.l-time-range-tick-label {
|
||||
@include webkitProp(transform, translateX(-50%));
|
||||
color: $colorPlotLabelFg;
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.knob {
|
||||
z-index: 2;
|
||||
&:before {
|
||||
$mTB: 2px;
|
||||
$grippyW: 3px;
|
||||
$mLR: ($sliderKnobW - $grippyW)/2;
|
||||
@include bgStripes($c: pullForward($sliderColorKnob, 20%), $a: 1, $bgsize: 4px, $angle: 0deg);
|
||||
content: '';
|
||||
.l-time-conductor-ticks {
|
||||
$c: $colorTick;
|
||||
height: $r1H;
|
||||
margin-top: 0 !important;
|
||||
mct-conductor-axis {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: $mTB; right: $mLR; bottom: $mTB; left: $mLR;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.range-value {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
|
||||
.l-axis-holder {
|
||||
height: $r1H;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
svg {
|
||||
stroke: $c;
|
||||
width: 100%; height: 100%;
|
||||
path {display: none;}
|
||||
line {stroke: $c;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-data-visualization {
|
||||
background: rgba($colorTick, 0.3);
|
||||
height: $r2H;
|
||||
line-height: $r2H;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover {
|
||||
.range-value {
|
||||
color: $sliderColorKnobHov;
|
||||
}
|
||||
}
|
||||
&.knob-l {
|
||||
margin-left: $knobM;
|
||||
.range-value {
|
||||
text-align: right;
|
||||
right: $rangeValOffset;
|
||||
}
|
||||
}
|
||||
&.knob-r {
|
||||
margin-right: $knobM;
|
||||
.range-value {
|
||||
left: $rangeValOffset;
|
||||
}
|
||||
&:hover + .range-holder .range .toi-line {
|
||||
@include toiLineHovEffects;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-domain-selector {
|
||||
@ -195,6 +95,19 @@
|
||||
top: $interiorMargin;
|
||||
}
|
||||
|
||||
/* .super-menu.mode-selector-menu {
|
||||
height: 200px; width: 400px;
|
||||
.menu-item-description {
|
||||
.desc-area.icon {
|
||||
@include test();
|
||||
$h: 50px;
|
||||
//font-size: 3em;
|
||||
//height: $h;
|
||||
//line-height: $h;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
}
|
||||
|
||||
.s-time-range-val {
|
||||
@ -206,18 +119,18 @@
|
||||
/******************************************************************** MOBILE */
|
||||
|
||||
@include phoneandtablet {
|
||||
.l-time-controller {
|
||||
.l-time-conductor {
|
||||
min-width: 0;
|
||||
.l-time-range-slider-holder,
|
||||
.l-time-range-ticks-holder {
|
||||
.l-time-conductor-ticks {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
.l-time-controller {
|
||||
.l-time-range-inputs-holder {
|
||||
.l-time-conductor {
|
||||
.l-time-conductor-inputs-holder {
|
||||
&.l-flex-row,
|
||||
.l-flex-row {
|
||||
@include align-items(flex-start);
|
||||
@ -227,7 +140,7 @@
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.t-inputs-w {
|
||||
.l-time-conductor-inputs-holder {
|
||||
@include flex-direction(column);
|
||||
.l-time-range-input-w:not(:first-child) {
|
||||
&:not(:first-child) {
|
||||
@ -244,9 +157,9 @@
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
.l-time-controller {
|
||||
.l-time-range-inputs-holder {
|
||||
.t-inputs-w {
|
||||
.l-time-conductor {
|
||||
.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 {
|
||||
|
||||
@ -20,10 +20,10 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
|
||||
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
||||
<form class="l-time-conductor-inputs-holder l-flex-row flex-elem"
|
||||
ng-submit="trCtrl.updateBoundsFromForm()">
|
||||
<span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">C</span>
|
||||
<span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
|
||||
<span class="l-time-range-inputs-elem l-flex-row flex-elem">
|
||||
<span class="l-time-range-input-w flex-elem">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
@ -86,7 +86,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-time-range-ticks-holder flex-elem">
|
||||
<div class="l-time-conductor-ticks flex-elem">
|
||||
<div class="l-time-range-ticks">
|
||||
<div
|
||||
ng-repeat="tick in ticks track by $index"
|
||||
|
||||
@ -52,7 +52,7 @@ $colorGridLines: rgba(#fff, 0.05);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
|
||||
$colorTick: rgba(white, 0.2);
|
||||
$colorTick: pullForward($colorBodyBg, 20%);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
||||
|
||||
@ -1,40 +1,13 @@
|
||||
<style>
|
||||
.time-system .menu{
|
||||
bottom: 10px;
|
||||
}
|
||||
.l-data-availability {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #3b3b3b
|
||||
}
|
||||
|
||||
.l-time-range-inputs-elem {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.l-time-range-inputs-elem.l-flex-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.l-axis-holder {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.l-axis-holder svg, .l-axis-holder svg path,
|
||||
.l-axis-holder svg line {
|
||||
stroke: #A0A0A0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||
<div class="follow-mode"
|
||||
<div class="l-time-conductor follow-mode"
|
||||
ng-controller="TimeConductorController as tcController" class="l-flex-col">
|
||||
<!-- Holds date selectors and ticks -->
|
||||
<div class="l-conductor-dates">
|
||||
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
||||
|
||||
<!-- Holds 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-inputs-elem t-inputs-w l-flex-row flex-elem">
|
||||
<span class="l-time-range-input-w flex-elem start-date">
|
||||
<span class="l-time-range-input-w start-date">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
@ -46,7 +19,7 @@
|
||||
class="time-range-start">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w flex-elem end-date"
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
@ -59,33 +32,31 @@
|
||||
class="time-range-end">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
<input type="submit" class="hidden">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="l-conductor-ticks">
|
||||
<mct-conductor-axis></mct-conductor-axis>
|
||||
</div>
|
||||
|
||||
<!-- Holds data availability, time of interest -->
|
||||
<div class="l-data-availability"></div>
|
||||
<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">
|
||||
<div class="l-time-system-zoom l-row-elem l-flex-row flex-elem">
|
||||
<mct-representation
|
||||
key="'mode-selector'"
|
||||
mct-object="domainObject"
|
||||
class="holder flex-elem">
|
||||
class="holder flex-elem menus-up mode-selector">
|
||||
</mct-representation>
|
||||
<mct-control
|
||||
key="'menu-button'"
|
||||
class="time-system"
|
||||
class="holder flex-elem menus-up time-system"
|
||||
ng-model="conductorModel.timeSystem"
|
||||
structure="{
|
||||
text: 'utc',
|
||||
text: 'UTC',
|
||||
options: [
|
||||
{name: 'utc', key:'utc', glyph:'\u0043'},
|
||||
{name: 'scet', key:'scet', glyph:'\u0043'},
|
||||
{name: 'sclk', key:'sclk', glyph:'\u0043'}
|
||||
{name: 'UTC', key:'utc', glyph:'\u0043'},
|
||||
{name: 'SCET', key:'scet', glyph:'\u0043'},
|
||||
{name: 'SCLK', key:'sclk', glyph:'\u0043'}
|
||||
]}">
|
||||
</mct-control>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user