ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 21:53:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for Time Conductor v2

Browse Source 
Fixes #993
In-progress; mode menu names and
descriptors modified, markup cleaned up
This commit is contained in:
Charles Hacskaylo 2016-07-08 17:11:43 -07:00
parent cf83040c4b
commit 0a0bc55f5f
4 changed files with 13 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@ -42,17 +42,14 @@
&.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: $inputW;
}
.icon-calendar {
position: absolute;
margin-left: -16px;
@ -70,7 +67,6 @@
position: relative;
width: 100%;
}
.l-axis-holder {
height: $r1H;
position: relative;
@ -78,36 +74,23 @@
svg {
stroke: $c;
width: 100%; height: 100%;
> g {
font-size: 0.8em;
}
path {display: none;}
line {stroke: $c;}
}
}
}
.l-data-visualization {
background: rgba($colorTick, 0.3);
height: $r2H;
}
.l-time-domain-selector {
position: absolute;
right: 0px;
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 {

16
platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html
View File

@ -26,14 +26,14 @@
<a
ng-mouseover="representation.activeMetadata = {
glyph: '\ue604',
name: 'Fixed Time-Span',
description: 'Display data that falls between two fixed dates'
name: 'Fixed Timespan Mode',
description: 'Query and explore data that falls between two fixed dates.'
}"
ng-mouseleave="representation.activeMetadata = undefined">
<span class="ui-symbol icon type-icon">
&#xe604;
</span>
Fixed Time-span
Fixed Timespan Mode
</a>
</li>
<li ng-click="representation.mode='realtime'">
@ -41,27 +41,27 @@
ng-mouseover="representation.activeMetadata = {
glyph: '\u0043',
name: 'Real-time Mode',
description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
description: 'Monitor real-time streaming data as it comes in. The Time Conductor will automatically advance itself based on a UTC clock.'
}"
ng-mouseleave="representation.activeMetadata = undefined">
<span class="ui-symbol icon type-icon">
&#x43;
</span>
Real-time
Real-time Mode
</a>
</li>
<li ng-click="representation.mode='latest'">
<a
ng-mouseover="representation.activeMetadata = {
glyph: '\u0044',
name: 'Latest Available Data',
description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
name: 'Latest Available Data Mode',
description: 'Monitor real-time streaming data as it comes in. The Time Conductor will only advance when data becomes available.'
}"
ng-mouseleave="representation.activeMetadata = undefined">
<span class="ui-symbol icon type-icon">
&#x44;
</span>
Latest Available Data
Latest Available Data Mode
</a>
</li>
</ul>

2
platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html
View File

@ -38,7 +38,7 @@
<span ng-controller="ClickAwayController as modeController">
<div class="s-menu-btn"
ng-click="modeController.toggle()">
<span class="title-label">Fixed Time Span</span>
<span class="title-label">Historical Data Mode</span>
</div>
<div class="menu super-menu mini mode-selector-menu"
ng-show="modeController.isActive()">

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

@ -1,9 +1,7 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div class="l-time-conductor follow-mode"
ng-controller="TimeConductorController as tcController" class="l-flex-col">
<!-- Holds date selectors and ticks -->
<!-- Holds ticks -->
<!-- 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)">