[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 2016-10-17 17:19:50 -07:00
parent dadca62955
commit 86b51f6cde
5 changed files with 57 additions and 55 deletions

View File

@ -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,10 +137,9 @@
.l-toi-val {
display: none; // Hide by default; see .show-val below
}
}
// TOI is showing value as well
.show-val .l-toi-holder {
&.show-val {
.l-toi {
.l-toi-buttons {
order: 1;
@ -186,13 +184,15 @@
}
}
}
}
// 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 {

View File

@ -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>

View File

@ -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"

View File

@ -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()">

View File

@ -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