[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. * 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 {

View File

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

View File

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

View File

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

View File

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