mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
[Frontend] Small refactor for mct-include
Fixes #933 Fixes #1193 Markup and CSS tweaked to support using mct-include as the main container for the TOI element; TC, plots and tables all updated.
This commit is contained in:
Charles Hacskaylo
parent
dadca62955
commit
86b51f6cde
@ -20,14 +20,14 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.l-toi-holder,
|
||||
mct-include.l-toi-holder,
|
||||
.l-toi-holder:after,
|
||||
.l-toi-holder:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.l-toi-holder {
|
||||
mct-include.l-toi-holder {
|
||||
$blockerFadeW: $toiBlockerFadeW;
|
||||
@include transform(translateX(-50%));
|
||||
color: $toiColorBg;
|
||||
@ -36,12 +36,11 @@
|
||||
bottom: 0;
|
||||
width: $toiH;
|
||||
&:not(.pinned) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:before,
|
||||
@ -138,61 +137,62 @@
|
||||
.l-toi-val {
|
||||
display: none; // Hide by default; see .show-val below
|
||||
}
|
||||
}
|
||||
|
||||
// TOI is showing value as well
|
||||
.show-val .l-toi-holder {
|
||||
.l-toi {
|
||||
.l-toi-buttons {
|
||||
order: 1;
|
||||
&:hover {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
.l-toi-val {
|
||||
@include trans-prop-nice($props: opacity, $dur: 150ms);
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
color: $toiColorFg;
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiH;
|
||||
line-height: $toiH;
|
||||
order: 2;
|
||||
padding: 1px 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.val-to-left {
|
||||
// TOI is showing value as well
|
||||
&.show-val {
|
||||
.l-toi {
|
||||
left: auto;
|
||||
right: $toiPad * -2;
|
||||
|
||||
.l-toi-buttons {
|
||||
order: 2;
|
||||
order: 1;
|
||||
&:hover {
|
||||
.t-button-resync { order: 2; }
|
||||
.t-button-unpin { order: 1; }
|
||||
margin-left: $interiorMarginSm;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
order: 1;
|
||||
@include trans-prop-nice($props: opacity, $dur: 150ms);
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
color: $toiColorFg;
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiH;
|
||||
line-height: $toiH;
|
||||
order: 2;
|
||||
padding: 1px 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.val-to-left {
|
||||
.l-toi {
|
||||
left: auto;
|
||||
right: $toiPad * -2;
|
||||
|
||||
.l-toi-buttons {
|
||||
order: 2;
|
||||
&:hover {
|
||||
.t-button-resync { order: 2; }
|
||||
.t-button-unpin { order: 1; }
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TOI in tables
|
||||
.tabular,
|
||||
table {
|
||||
tbody, .tbody {
|
||||
tr, .tr {
|
||||
&.l-toi-tablerow.pinned {
|
||||
&.l-toi-tablerow {
|
||||
border-top: 1px dashed $toiColorBg;
|
||||
z-index: 1;
|
||||
td, .td {
|
||||
|
||||
@ -89,9 +89,10 @@
|
||||
ng-click="toi.click($event)">
|
||||
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
||||
<div class="l-data-visualization">
|
||||
<div style="position: relative; height: 100%" ng-style="{'left': toi.left + '%'}">
|
||||
<mct-include key="'time-of-interest'" class="show-val"></mct-include>
|
||||
</div>
|
||||
<mct-include key="'time-of-interest'"
|
||||
class="l-toi-holder show-val"
|
||||
ng-class="{ pinned: pinned, 'val-to-left': toi.left > 80 }"
|
||||
ng-style="{'left': toi.left + '%'}"></mct-include>
|
||||
</div>
|
||||
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<div class="l-toi-holder"
|
||||
ng-controller="TimeOfInterestController as toi"
|
||||
ng-class="{ 'pinned': pinned, 'val-to-left': toi.left > 80 }">
|
||||
<div class="abs angular-controller"
|
||||
ng-controller="TimeOfInterestController as toi">
|
||||
<div class="l-flex-row l-toi">
|
||||
<span class="flex-elem l-flex-row l-toi-buttons">
|
||||
<a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"
|
||||
|
||||
@ -77,10 +77,11 @@
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
<div class="toiPositioner"
|
||||
ng-if="toiPerc" ng-style="{'left': toiPerc + '%'}">
|
||||
<mct-include key="'time-of-interest'" class="show-val"></mct-include>
|
||||
</div>
|
||||
<mct-include key="'time-of-interest'"
|
||||
class="l-toi-holder show-val"
|
||||
ng-if="toiPerc"
|
||||
ng-class="{ 'val-to-left': toiPerc > 80 }"
|
||||
ng-style="{'left': toiPerc + '%'}"></mct-include>
|
||||
|
||||
<div class="gl-plot-coords"
|
||||
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
||||
|
||||
@ -52,9 +52,10 @@
|
||||
<tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
|
||||
ng-if="visibleRow.rowIndex === toiRowIndex"
|
||||
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
||||
class="l-toi-tablerow pinned">
|
||||
class="l-toi-tablerow">
|
||||
<td colspan="999">
|
||||
<mct-include key="'time-of-interest'"></mct-include>
|
||||
<mct-include key="'time-of-interest'"
|
||||
class="l-toi-holder pinned"></mct-include>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user