ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 06:03:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for TOI element

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/controls/_time-of-interest.scss
View File

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

6
platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss
View File

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

5
platform/features/conductor-v2/conductor/res/templates/time-conductor.html
View File

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

2
platform/features/plot/res/templates/plot.html
View File

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

1
platform/features/table/res/templates/mct-table.html
View File

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