mirror of
https://github.com/nasa/openmct.git
synced 2025-02-01 00:45:41 +00:00
[Frontend] Refactor TOI element
Fixes #933 Fixes #1193 WIP; TOI as mct-include; layout uses flex-box; preparing to move TOI sass into conductor-v2 directory;
This commit is contained in:
Charles Hacskaylo
parent
42acf9255e
commit
1a534301c5
@ -23,8 +23,7 @@
|
||||
.l-toi-holder,
|
||||
.l-toi-holder:after,
|
||||
.l-toi-holder:before,
|
||||
.l-toi,
|
||||
.l-toi-val {
|
||||
.l-toi {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
@ -58,21 +57,66 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
// Holds clock icon and resync and unpin buttons
|
||||
@include trans-prop-nice($props: width, $dur: 250ms);
|
||||
border-radius: $controlCr;
|
||||
// Holds buttons and val. Acts as a blocking element.
|
||||
@extend .l-flex-row;
|
||||
@include transform(translateY(-50%));
|
||||
background: blue; // $toiColorBlocker;
|
||||
align-items: center;
|
||||
box-sizing: content-box;
|
||||
height: $toiH;
|
||||
left: $toiPadLR * -1;
|
||||
line-height: $toiH;
|
||||
overflow: hidden;
|
||||
padding: $toiPadLR $toiPadLR;
|
||||
font-size: $toiH;
|
||||
width: $toiH;
|
||||
white-space: nowrap;
|
||||
top: 50%;
|
||||
padding: $toiPadLR $toiPadLR $toiPadLR 0;
|
||||
z-index: 1;
|
||||
|
||||
.l-toi-buttons {
|
||||
@extend .flex-elem;
|
||||
@include trans-prop-nice($props: width, $dur: 250ms);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
font-size: $toiH;
|
||||
height: 100%;
|
||||
line-height: $toiH;
|
||||
padding: $toiPadLR $toiPadLR;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: $toiH;
|
||||
|
||||
&:hover {
|
||||
// Expand and display controls; clock icon changes to resync
|
||||
background-color: $toiColorBg;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
//z-index: 2;
|
||||
|
||||
.icon-button {
|
||||
color: rgba($toiColorCtrlFg, 0.5);
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
color: $toiColorCtrlFg;
|
||||
}
|
||||
&.t-button-unpin:hover {
|
||||
color: $toiColorBgAlert;
|
||||
}
|
||||
}
|
||||
|
||||
.t-button-resync:before {
|
||||
content: $glyph-icon-resync;
|
||||
}
|
||||
|
||||
& + .l-toi-val {
|
||||
// Dim the value to emphasize the controls
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Holds clock icon and resync and unpin buttons
|
||||
//left: $toiPadLR * -1;
|
||||
|
||||
.icon-button {
|
||||
color: $toiColorBg;
|
||||
}
|
||||
@ -85,34 +129,6 @@
|
||||
@extend .icon-x-in-circle;
|
||||
float: right;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
&:hover {
|
||||
// Expand and display controls; clock icon changes to resync
|
||||
background-color: $toiColorBg;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
z-index: 2;
|
||||
|
||||
.icon-button {
|
||||
color: rgba($toiColorCtrlFg, 0.5);
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
color: $toiColorCtrlFg;
|
||||
}
|
||||
&.t-button-unpin:hover {
|
||||
color: $toiColorBgAlert;
|
||||
}
|
||||
}
|
||||
|
||||
.t-button-resync:before {
|
||||
content: $glyph-icon-resync;
|
||||
}
|
||||
|
||||
& + .l-toi-val {
|
||||
// Dim the value to emphasize the controls
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,6 +139,7 @@
|
||||
&.show-val {
|
||||
.l-toi-val {
|
||||
$tbP: 1px;
|
||||
@extend .flex-elem;
|
||||
@include trans-prop-nice($props: opacity, $dur: 150ms);
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
@ -132,9 +149,9 @@
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiH;
|
||||
right: $toiH + $interiorMarginSm;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
//right: $toiH + $interiorMarginSm;
|
||||
//top: 50%;
|
||||
//@include transform(translateY(-50%));
|
||||
line-height: $toiH;
|
||||
padding: $tbP $p;
|
||||
white-space: nowrap;
|
||||
@ -210,20 +227,45 @@ table {
|
||||
|
||||
.l-toi,
|
||||
.l-toi-val {
|
||||
@include transform(translateY(100%));
|
||||
//@include transform(translateY(100%));
|
||||
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
bottom: $toiPadLR - 1;
|
||||
z-index: 2;
|
||||
//bottom: $toiPadLR - 1;
|
||||
//z-index: 2;
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
//top: auto;
|
||||
//bottom: 0;
|
||||
//z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TOI in Time Conductor
|
||||
.l-time-conductor {
|
||||
.l-toi-holder {
|
||||
$linesVOffset: 2px;
|
||||
&:before,
|
||||
&:after {
|
||||
// Vertical lines
|
||||
border-left-style: solid;
|
||||
//height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform(translate(-50%, $linesVOffset * -1));
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform(translate(-50%, $linesVOffset));
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -110,7 +110,7 @@ $toiColorFg: #000;
|
||||
$toiColorCtrlFg: #fff;
|
||||
$toiColorBgAlert: #cf2a12; // $colorFormInvalid;
|
||||
$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
$toiPadLR: 5px;
|
||||
$toiPadLR: 4px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
|
||||
@ -31,6 +31,7 @@ define([
|
||||
"text!./res/templates/time-conductor.html",
|
||||
"text!./res/templates/mode-selector/mode-selector.html",
|
||||
"text!./res/templates/mode-selector/mode-menu.html",
|
||||
"text!./res/templates/time-of-interest.html",
|
||||
"legacyRegistry"
|
||||
], function (
|
||||
TimeConductorViewService,
|
||||
@ -43,6 +44,7 @@ define([
|
||||
timeConductorTemplate,
|
||||
modeSelectorTemplate,
|
||||
modeMenuTemplate,
|
||||
timeOfInterest,
|
||||
legacyRegistry
|
||||
) {
|
||||
|
||||
@ -127,6 +129,10 @@ define([
|
||||
{
|
||||
"key": "mode-selector",
|
||||
"template": modeSelectorTemplate
|
||||
},
|
||||
{
|
||||
"key": "time-of-interest",
|
||||
"template": timeOfInterest
|
||||
}
|
||||
],
|
||||
"representations": [
|
||||
|
||||
@ -258,40 +258,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Time of Interest control
|
||||
.l-toi-holder {
|
||||
$linesVOffset: 2px;
|
||||
&:before,
|
||||
&:after {
|
||||
// Vertical lines
|
||||
border-left-style: solid;
|
||||
left: 50%;
|
||||
height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
|
||||
width: 1px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform(translate(-50%, $linesVOffset * -1));
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform(translate(-50%, $linesVOffset));
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
//height: $r2H;
|
||||
//line-height: $r2H;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
@include transform-origin(left center);
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-conductor-controls {
|
||||
align-items: center;
|
||||
margin-top: $interiorMargin;
|
||||
|
||||
@ -100,18 +100,7 @@
|
||||
ng-click="toi.click($event)">
|
||||
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
||||
<div class="l-data-visualization">
|
||||
<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
|
||||
<div class="l-toi-holder show-val"
|
||||
ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 20 }"
|
||||
ng-style="{'left': toi.left + '%'}">
|
||||
<div class="l-toi">
|
||||
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
|
||||
ng-click="toi.dismiss()"></a>
|
||||
<a class="t-button-resync icon-button" title="Re-sync Time of Interest"
|
||||
ng-click="toi.resync()"></a>
|
||||
</div>
|
||||
<span class="l-toi-val">{{toi.toiText}}</span>
|
||||
</div>
|
||||
<mct-include key="'time-of-interest'"></mct-include>
|
||||
</div>
|
||||
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
|
||||
<div class="l-toi-holder show-val hidden"
|
||||
ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 20 }"
|
||||
ng-style="{'left': toi.left + '%'}">
|
||||
<div class="l-toi">
|
||||
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
|
||||
ng-click="toi.dismiss()"></a>
|
||||
<a class="t-button-resync icon-button" title="Re-sync Time of Interest"
|
||||
ng-click="toi.resync()"></a>
|
||||
</div>
|
||||
<span class="l-toi-val">{{toi.toiText}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
|
||||
<div class="l-toi-holder show-val"
|
||||
ng-class="{ 'pinned': true, 'val-to-right': toi.left < 20 }"
|
||||
ng-style="{'left': 20 + '%'}">
|
||||
<div class="l-toi">
|
||||
<span class="l-toi-buttons">
|
||||
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
|
||||
ng-click="toi.dismiss()"></a>
|
||||
<a class="t-button-resync icon-button" title="Re-sync Time of Interest"
|
||||
ng-click="toi.resync()"></a>
|
||||
</span>
|
||||
<span class="l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,18 +71,7 @@
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
<!-- TOI element. val-to-right should be true when 'left' is < 150px -->
|
||||
<div class="l-toi-holder show-val"
|
||||
ng-class="{ pinned: false, 'val-to-right': true }"
|
||||
style="left: 20%">
|
||||
<span class="l-toi">
|
||||
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
|
||||
ng-click="toi.dismiss()"></a>
|
||||
<a class="t-button-resync icon-button" title="Re-sync Time of Interest"
|
||||
ng-click="toi.resync()"></a>
|
||||
</span>
|
||||
<span class="l-toi-val">21:31:30</span>
|
||||
</div>
|
||||
<mct-include key="'time-of-interest'"></mct-include>
|
||||
|
||||
<div class="gl-plot-coords"
|
||||
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user