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

[Frontend] Styling for TOI element

Browse Source 
Fixes #933
Fixes #1193
WIP: Markup and CSS for plots and TC near complete;
TODO: revised styling in tabular views;
This commit is contained in:
Charles Hacskaylo 2016-10-03 15:15:56 -07:00
parent 5cd0c8a4fa
commit d3bf6c5857
6 changed files with 56 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,14 +38,15 @@ TC
.l-toi-holder, .l-toi-holder,
.l-toi-holder:after, .l-toi-holder:after,
.l-toi-holder:before, .l-toi-holder:before,
.l-toi { .l-toi,
.l-toi-val {
display: block; display: block;
position: absolute; position: absolute;
} }
.l-toi-holder { .l-toi-holder {
@include trans-prop-nice($props: opacity, $dur: 200ms); $p: 3px;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
color: $toiColorBg; color: $toiColorBg;
position: absolute; position: absolute;
@ -70,42 +71,45 @@ TC
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 1px; width: 2px;
} }
.l-toi { .l-toi {
@extend .icon-clock; // Holds clock icon an unpin button
@extend .l-flex-row; font-size: $toiW;
text-align: center; height: $toiW;
//width: $toiW; width: $toiW;
&:before { .t-button-unpin {
// Clock icon color: $toiColorBg;
@extend .flex-elem; @extend .icon-clock;
margin-right: $interiorMarginSm; &:hover {
order: 1; &:before {
} content: $glyph-icon-x-in-circle;
&:hover { }
cursor: pointer !important;
&:before {
// Icon, change to close box
color: $colorAlert;
content: $glyph-icon-x-in-circle !important;
} }
} }
} }
.l-toi-val { .l-toi-val {
//@extend .flex-elem; $tbP: 1px;
//@extend .grows; background-color: $toiColorBg; //rgba($toiColorBg, 0.8);
border-radius: $controlCr;
box-sizing: content-box;
display: inline-block;
color: $toiColorFg;
font-size: 0.7rem; font-size: 0.7rem;
height: $toiW;
right: $toiW + $interiorMarginSm;
top: 50%;
@include transform(translateY(-50%));
line-height: $toiW;
padding: $tbP $p;
white-space: nowrap; white-space: nowrap;
//right: $toiW + $interiorMargin;
} }
&.val-to-right { &.val-to-right {
.l-toi-val { .l-toi-val {
order: 2; right: auto;
//right: auto; left: $toiW + $interiorMarginSm;
//left: $toiW + $interiorMarginSm;
} }
} }
} }
@ -159,19 +163,16 @@ table {
.gl-plot { .gl-plot {
.gl-plot-wrapper-display-area-and-x-axis { .gl-plot-wrapper-display-area-and-x-axis {
.l-toi-holder { .l-toi-holder {
//@include test(); bottom: nth($plotDisplayArea, 3) - $interiorMargin;
bottom: nth($plotDisplayArea, 3);
&:after { &:after {
display: none; display: none;
} }
.l-toi { .l-toi {
@include test();
@include transform(translateY(100%)); @include transform(translateY(100%));
bottom: 0; bottom: 0;
} }
//&:hover {
// background-color: rgba($toiColorBgHov, 0.1);
//}
z-index: 3; z-index: 3;
} }
} }

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

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

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

@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Time of Interest // Time of Interest
$toiColorBg: $colorKey; $toiColorBg: $colorKey;
$toiColorBgHov: lighten($colorKey, 10%); $toiColorBgHov: lighten($colorKey, 10%);
$toiColorFg: #ccc; $toiColorFg: #fff;
$toiColorFgHov: #fff; $toiColorFgHov: #fff;
$toiColorBgActive: lighten($colorKey, 20%); $toiColorBgActive: lighten($colorKey, 20%);
$toiColorFgActive: $toiColorFgHov; $toiColorFgActive: $toiColorFgHov;
$toiW: 18px; $toiW: 12px;
// Status colors, mainly used for messaging and item ancillary symbols // Status colors, mainly used for messaging and item ancillary symbols
$colorStatusFg: #fff; $colorStatusFg: #fff;

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

@ -289,20 +289,22 @@
} }
.l-toi { .l-toi {
$d: $timeCondTOIIconD;
@include transform(translate(-50%, -50%));
font-size: $d;
line-height: $d;
left: 50%;
top: 50%; top: 50%;
height: $d; @include transform(translateY(-50%));
width: $d; //$d: $timeCondTOIIconD;
z-index: 1; //@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 { .l-toi-val {
@include transform(translateY(-51%)); //@include transform(translateY(-51%));
top: 50%; //top: 50%;
} }
} }

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

@ -106,7 +106,8 @@
ng-click="this.pinned = false" ng-click="this.pinned = false"
style="left: 70%"> style="left: 70%">
<div class="l-toi"> <div class="l-toi">
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div> <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
<span class="l-toi-val">21:31:30</span>
</div> </div>
</div> </div>
</div> </div>

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

@ -78,13 +78,14 @@
<!-- new wrapper inserted here --> <!-- new wrapper inserted here -->
<div class="gl-plot-wrapper-display-area-and-x-axis"> <div class="gl-plot-wrapper-display-area-and-x-axis">
<!-- TOI element --> <!-- TOI element -->
<div class="l-toi-holder show-val val-to-right" <div class="l-toi-holder show-val"
ng-class="{ pinned: true }" ng-class="{ pinned: true, 'val-to-right': true }"
style="left: 0%"> style="left: 0%">
<!-- Need text val at bottom, plus vertical line --> <!-- Need text val at bottom, plus vertical line -->
<div class="l-toi l-flex-row"> <span class="l-toi">
<span class="l-toi-val flex-elem">Z884.92:25:32 52-90-6102</span> <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
</div> <span class="l-toi-val">21:31:30</span>
</span>
</div> </div>
<div class="gl-plot-coords" <div class="gl-plot-coords"