mirror of
https://github.com/nasa/openmct.git
synced 2024-12-30 01:48:51 +00:00
[Frontend] Styling for TOI element
Fixes #933 Fixes #1193 Tabular styling for TOI;
This commit is contained in:
Charles Hacskaylo
parent
1650aae518
commit
0ed0a48a8c
@ -20,21 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
/*
|
||||
Plots
|
||||
-toi-holder:before vertical line
|
||||
-toi: glyphs
|
||||
|
||||
Tables
|
||||
tr: border color
|
||||
td:before: glyphs
|
||||
|
||||
TC
|
||||
-toi-holder:before, after: vertical lines
|
||||
-toi: glyphs
|
||||
|
||||
*/
|
||||
.l-toi-holder,
|
||||
.l-toi-holder:after,
|
||||
.l-toi-holder:before,
|
||||
@ -44,7 +29,6 @@ TC
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.l-toi-holder {
|
||||
$p: 3px;
|
||||
@include transform(translateX(-50%));
|
||||
@ -52,14 +36,16 @@ TC
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
width: $toiW;
|
||||
&:not(.pinned) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
// Vertical lines. TC uses both; plot only uses :before
|
||||
@ -73,6 +59,7 @@ TC
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
// Holds clock icon an unpin button
|
||||
font-size: $toiW;
|
||||
@ -91,12 +78,13 @@ TC
|
||||
|
||||
.l-toi-val {
|
||||
$tbP: 1px;
|
||||
background-color: $toiColorBg; //rgba($toiColorBg, 0.8);
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
color: $toiColorFg;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiW;
|
||||
right: $toiW + $interiorMarginSm;
|
||||
top: 50%;
|
||||
@ -120,38 +108,28 @@ table {
|
||||
tbody, .tbody {
|
||||
tr, .tr {
|
||||
&.l-toi.pinned {
|
||||
td {
|
||||
border-top: 1px dashed $toiColorBg;
|
||||
td, .td {
|
||||
&:first-child:before {
|
||||
@extend .ui-symbol;
|
||||
@extend .icon-clock;
|
||||
@include transform(translate(-50%, -50%));
|
||||
content: $glyph-icon-clock;
|
||||
color: $toiColorBg;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-shadow: 0 1px 15px black;
|
||||
left: 50%;
|
||||
bottom: auto;
|
||||
text-shadow: 0 1px 15px black;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: $toiColorBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-bottom-edge {
|
||||
td {
|
||||
border-bottom: 1px dashed $toiColorBg;
|
||||
//border-top: 1px solid transparent;
|
||||
&:first-child:before {
|
||||
@include transform(translate(-50%, 50%));
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td:first-child:before {
|
||||
content: $glyph-icon-x-in-circle;
|
||||
cursor: pointer;
|
||||
td, .td {
|
||||
&:first-child:before {
|
||||
content: $glyph-icon-x-in-circle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -164,6 +142,7 @@ table {
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
.l-toi-holder {
|
||||
bottom: nth($plotDisplayArea, 3) - $interiorMargin;
|
||||
z-index: 3;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
@ -172,8 +151,6 @@ table {
|
||||
@include transform(translateY(100%));
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -58,6 +58,7 @@ table {
|
||||
}*/
|
||||
}
|
||||
tr, .tr {
|
||||
border-top: 1px solid $colorTabBorder;
|
||||
display: table-row;
|
||||
&:first-child .td {
|
||||
border-top: none;
|
||||
@ -99,7 +100,6 @@ table {
|
||||
}
|
||||
}
|
||||
td, .td {
|
||||
border-top: 1px solid $colorTabBorder;
|
||||
min-width: 20px;
|
||||
color: $colorTelemFresh;
|
||||
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||
|
||||
@ -104,9 +104,9 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Time of Interest
|
||||
$toiColorBg: #6b93c6; //$colorBtnMajorBg;
|
||||
$toiColorBg: #6b93c6;
|
||||
$toiColorFg: #000;
|
||||
$toiW: 12px;
|
||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
|
||||
@ -106,7 +106,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
// Time of Interest
|
||||
$toiColorBg: #6b93c6;
|
||||
$toiColorFg: #fff;
|
||||
$toiW: 12px;
|
||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #fff;
|
||||
|
||||
@ -244,9 +244,6 @@
|
||||
left: nth($timeCondAxisLROffset, 1);
|
||||
right: nth($timeCondAxisLROffset, 2);
|
||||
&:hover {
|
||||
// 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.hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
|
||||
ng-class="{ 'l-toi active pinned': false }"
|
||||
ng-class="{ 'l-toi pinned': false }"
|
||||
ng-style="{
|
||||
top: visibleRow.offsetY + 'px',
|
||||
}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user