ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-19 08:36:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for TOI element

Browse Source 
Fixes #933
Fixes #1193
WIP: Tabular styling for TOI;
TODO: make bottom border work
This commit is contained in:
Charles Hacskaylo 2016-10-03 15:56:56 -07:00
parent d3bf6c5857
commit 1650aae518
5 changed files with 24 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,39 +115,39 @@ TC
}
// TOI in tables
@mixin toiIcon() {
@extend .ui-symbol;
@include transform(translate(-50%, -50%));
content: $glyph-icon-clock;
display: block;
position: absolute;
text-shadow: 0 1px 15px black;
left: 50%;
top: 0;
z-index: 2;
}
.tabular,
table {
tbody, .tbody {
tr, .tr {
&:hover {
&.l-toi.pinned {
td {
border-top: 1px dashed $toiColorBg;
&:first-child:before {
@include toiIcon();
color: $toiColorFg;
@extend .ui-symbol;
@include transform(translate(-50%, -50%));
content: $glyph-icon-clock;
display: block;
position: absolute;
text-shadow: 0 1px 15px black;
left: 50%;
top: 0;
z-index: 2;
color: $toiColorBg;
}
}
}
&.l-toi.pinned {
td {
border-top: 1px solid $toiColorBg;
&:first-child:before {
@include toiIcon();
color: $toiColorFg;
&.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;

6
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -104,12 +104,8 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Time of Interest
$toiColorBg: $colorBtnMajorBg;
$toiColorBgHov: $colorBtnMajorBgHov;
$toiColorBg: #6b93c6; //$colorBtnMajorBg;
$toiColorFg: #000;
$toiColorFgHov: #fff;
$toiColorBgActive: lighten($colorKey, 10%);
$toiColorFgActive: $toiColorFgHov;
$toiW: 12px;
// Status colors, mainly used for messaging and item ancillary symbols

6
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -104,12 +104,8 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Time of Interest
$toiColorBg: $colorKey;
$toiColorBgHov: lighten($colorKey, 10%);
$toiColorBg: #6b93c6;
$toiColorFg: #fff;
$toiColorFgHov: #fff;
$toiColorBgActive: lighten($colorKey, 20%);
$toiColorFgActive: $toiColorFgHov;
$toiW: 12px;
// Status colors, mainly used for messaging and item ancillary symbols

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

@ -263,8 +263,6 @@
// Time of Interest control
.l-toi-holder {
$c: $colorTimeCondTOIBg;
$cHov: $toiColorBgHov;
$linesVOffset: 2px;
&:before,
&:after {
@ -291,20 +289,6 @@
.l-toi {
top: 50%;
@include transform(translateY(-50%));
//$d: $timeCondTOIIconD;
//@include transform(translate(-50%, -50%));
//font-size: $d;
//line-height: $d;
//left: 50%;
//top: 50%;
//height: $d;
//width: $d;
//z-index: 1;
}
.l-toi-val {
//@include transform(translateY(-51%));
//top: 50%;
}
}
@ -314,13 +298,11 @@
.l-time-conductor-zoom-w {
@include justify-content(flex-end);
.time-conductor-zoom {
//display: none; // TEMP per request from Andrew 8/1/16
height: $r3H;
min-width: 100px;
width: 20%;
}
.time-conductor-zoom-current-range {
//display: none; // TEMP per request from Andrew 8/1/16
color: $colorTick;
}
}

1
platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss
View File

@ -36,5 +36,4 @@ $colorTimeCondKeyBg: #4e70dc;
$colorTimeCondKeyFg: #fff;
$colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
$colorTimeCondTOIBg: lighten($toiColorBg, 20%);
@import "time-conductor-base";