mirror of
https://github.com/nasa/openmct.git
synced 2025-03-18 18:15:29 +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:
parent
dadca62955
commit
86b51f6cde
@ -20,14 +20,14 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
.l-toi-holder,
|
mct-include.l-toi-holder,
|
||||||
.l-toi-holder:after,
|
.l-toi-holder:after,
|
||||||
.l-toi-holder:before {
|
.l-toi-holder:before {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-toi-holder {
|
mct-include.l-toi-holder {
|
||||||
$blockerFadeW: $toiBlockerFadeW;
|
$blockerFadeW: $toiBlockerFadeW;
|
||||||
@include transform(translateX(-50%));
|
@include transform(translateX(-50%));
|
||||||
color: $toiColorBg;
|
color: $toiColorBg;
|
||||||
@ -36,12 +36,11 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: $toiH;
|
width: $toiH;
|
||||||
&:not(.pinned) {
|
&:not(.pinned) {
|
||||||
opacity: 0;
|
display: none;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pinned {
|
&.pinned {
|
||||||
opacity: 1;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
@ -138,61 +137,62 @@
|
|||||||
.l-toi-val {
|
.l-toi-val {
|
||||||
display: none; // Hide by default; see .show-val below
|
display: none; // Hide by default; see .show-val below
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// TOI is showing value as well
|
// TOI is showing value as well
|
||||||
.show-val .l-toi-holder {
|
&.show-val {
|
||||||
.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 {
|
|
||||||
.l-toi {
|
.l-toi {
|
||||||
left: auto;
|
|
||||||
right: $toiPad * -2;
|
|
||||||
|
|
||||||
.l-toi-buttons {
|
.l-toi-buttons {
|
||||||
order: 2;
|
order: 1;
|
||||||
&:hover {
|
&:hover {
|
||||||
.t-button-resync { order: 2; }
|
margin-right: $interiorMarginSm;
|
||||||
.t-button-unpin { order: 1; }
|
|
||||||
margin-left: $interiorMarginSm;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-toi-val {
|
.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
|
// TOI in tables
|
||||||
.tabular,
|
.tabular,
|
||||||
table {
|
table {
|
||||||
tbody, .tbody {
|
tbody, .tbody {
|
||||||
tr, .tr {
|
tr, .tr {
|
||||||
&.l-toi-tablerow.pinned {
|
&.l-toi-tablerow {
|
||||||
border-top: 1px dashed $toiColorBg;
|
border-top: 1px dashed $toiColorBg;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
td, .td {
|
td, .td {
|
||||||
|
@ -89,9 +89,10 @@
|
|||||||
ng-click="toi.click($event)">
|
ng-click="toi.click($event)">
|
||||||
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
||||||
<div class="l-data-visualization">
|
<div class="l-data-visualization">
|
||||||
<div style="position: relative; height: 100%" ng-style="{'left': toi.left + '%'}">
|
<mct-include key="'time-of-interest'"
|
||||||
<mct-include key="'time-of-interest'" class="show-val"></mct-include>
|
class="l-toi-holder show-val"
|
||||||
</div>
|
ng-class="{ pinned: pinned, 'val-to-left': toi.left > 80 }"
|
||||||
|
ng-style="{'left': toi.left + '%'}"></mct-include>
|
||||||
</div>
|
</div>
|
||||||
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
|
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
<div class="l-toi-holder"
|
<div class="abs angular-controller"
|
||||||
ng-controller="TimeOfInterestController as toi"
|
ng-controller="TimeOfInterestController as toi">
|
||||||
ng-class="{ 'pinned': pinned, 'val-to-left': toi.left > 80 }">
|
|
||||||
<div class="l-flex-row l-toi">
|
<div class="l-flex-row l-toi">
|
||||||
<span class="flex-elem l-flex-row l-toi-buttons">
|
<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"
|
<a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"
|
||||||
|
@ -77,10 +77,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||||
<div class="toiPositioner"
|
<mct-include key="'time-of-interest'"
|
||||||
ng-if="toiPerc" ng-style="{'left': toiPerc + '%'}">
|
class="l-toi-holder show-val"
|
||||||
<mct-include key="'time-of-interest'" class="show-val"></mct-include>
|
ng-if="toiPerc"
|
||||||
</div>
|
ng-class="{ 'val-to-left': toiPerc > 80 }"
|
||||||
|
ng-style="{'left': toiPerc + '%'}"></mct-include>
|
||||||
|
|
||||||
<div class="gl-plot-coords"
|
<div class="gl-plot-coords"
|
||||||
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
||||||
|
@ -52,9 +52,10 @@
|
|||||||
<tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
|
<tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
|
||||||
ng-if="visibleRow.rowIndex === toiRowIndex"
|
ng-if="visibleRow.rowIndex === toiRowIndex"
|
||||||
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
||||||
class="l-toi-tablerow pinned">
|
class="l-toi-tablerow">
|
||||||
<td colspan="999">
|
<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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr ng-repeat-end
|
<tr ng-repeat-end
|
||||||
|
Loading…
x
Reference in New Issue
Block a user