[Frontend] Styling for TOI element

Fixes #933
Fixes #1193
Finalized TOI in plots, table and TC
This commit is contained in:
Charles Hacskaylo 2016-09-23 11:07:06 -07:00
parent 0cf4c92555
commit bb2ae2f8d1
5 changed files with 8 additions and 8 deletions

View File

@ -83,7 +83,7 @@ table {
.gl-plot {
.gl-plot-wrapper-display-area-and-x-axis {
&:hover {
.l-toi-holder:not(.active) {
.l-toi-holder.hover {
opacity: 1;
}
}

View File

@ -247,10 +247,10 @@
// Hide the cursor, because the TOI element essentially "becomes" the cursor
// when the user is hovering over the visualization area.
cursor: none;
.l-toi-holder {
.l-toi-holder.hover {
opacity: 1;
}
.l-toi-holder.pinned {
.l-toi-holder.pinned.active {
opacity: 0.4;
.l-toi-val {
pointer-events: none;
@ -341,7 +341,7 @@
}
&.pinned {
opacity: 1;
//opacity: 1;
z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
&.active {
opacity: 1;

View File

@ -103,15 +103,14 @@
- The pinned TOI must precede the non-pinned version in markup,
so that we can hide the non-pinned TOI when hovering over the pinned one.
-->
<div class="l-toi-holder horz pinned"
ng-show="true"
<div class="l-toi-holder pinned"
ng-class="{ 'active': false, 'val-to-right': true }"
ng-click="this.active = false"
style="left: 5%">
<div class="l-toi s-toi"></div>
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
</div>
<div class="l-toi-holder horz"
<div class="l-toi-holder hover"
ng-class="{ 'val-to-right': false }"
style="left: 75%">
<div class="l-toi s-toi"></div>

View File

@ -87,7 +87,7 @@
<a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
</div>
</div>
<div class="l-toi-holder"
<div class="l-toi-holder hover"
style="left: 20%">
<!-- Need text val at bottom, plus vertical line -->
<div class="l-toi-val l-flex-row">

View File

@ -50,6 +50,7 @@
</thead>
<tbody>
<tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
ng-class="{ 'l-toi active pinned': false }"
ng-style="{
top: visibleRow.offsetY + 'px',
}">