ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 01:42:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] TOI finalizing

Browse Source 
Fixes #933
Fixes #1193
HTML template cleaned up; checked in snow theme,
theme colors tweaked; padding finalized; now uses
val-to-left instead of -to-right;
This commit is contained in:
Charles Hacskaylo 2016-10-14 11:03:23 -07:00
parent 271c788f20
commit 07a4e26317
4 changed files with 23 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss
View File

@ -66,7 +66,7 @@
align-items: center;
box-sizing: content-box;
height: $toiH;
right: $toiPad * -2;
left: $toiPad * -2;
@include transform(translateY(-50%)); top: 50%;
padding: $toiPad;
z-index: 1;
@ -79,7 +79,6 @@
height: 100%;
line-height: $toiH;
padding: $toiPad;
order: 2;
overflow: hidden;
white-space: nowrap;
justify-content: space-between;
@ -100,13 +99,13 @@
}
.t-button-resync {
order: 2;
order: 1;
&:before {
content: $glyph-icon-resync;
}
}
.t-button-unpin {
order: 1;
order: 2;
&:hover {
color: $toiColorBgAlert;
}
@ -146,8 +145,9 @@
.show-val .l-toi-holder {
.l-toi {
.l-toi-buttons {
order: 1;
&:hover {
margin-left: $interiorMarginSm;
margin-right: $interiorMarginSm;
}
}
.l-toi-val {
@ -161,28 +161,28 @@
font-weight: 400;
height: $toiH;
line-height: $toiH;
order: 1;
order: 2;
padding: 1px 3px;
white-space: nowrap;
}
}
&.val-to-right {
&.val-to-left {
.l-toi {
right: auto;
left: $toiPad * -2;
left: auto;
right: $toiPad * -2;
.l-toi-buttons {
order: 1;
order: 2;
&:hover {
.t-button-resync { order: 1; }
.t-button-unpin { order: 2; }
margin-right: $interiorMarginSm;
.t-button-resync { order: 2; }
.t-button-unpin { order: 1; }
margin-left: $interiorMarginSm;
}
}
.l-toi-val {
order: 2;
order: 1;
}
}
}
@ -198,6 +198,7 @@ table {
z-index: 1;
td, .td {
.l-toi-holder {
left: 50% !important;
&:before,
&:after {
display: none;

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

@ -39,10 +39,10 @@ $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
// Time of Interest
$toiColorBg: #6b93c6;
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
$toiColorFg: #000;
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
$toiColorFg: #000; // Used by value display
$toiColorCtrlFg: #fff;
$toiColorBgAlert: #cf2a12;
$toiColorBgAlert: #cf2a12; // Used by unpin button on hover
$colorTimeCondTOIBg: darken($toiColorBg, 20%);
$colorTimeCondTOIBgHov: $toiColorBg;

6
platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss
View File

@ -39,10 +39,10 @@ $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
// Time of Interest
$toiColorBg: #6b93c6;
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
$toiColorFg: #fff;
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
$toiColorFg: #fff; // Used by value display
$toiColorCtrlFg: #fff;
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
$toiColorBgAlert: #ff9540; // Used by unpin button on hover
$colorTimeCondTOIBg: darken($toiColorBg, 20%);
$colorTimeCondTOIBgHov: $toiColorBg;

18
platform/features/conductor-v2/conductor/res/templates/time-of-interest.html
View File

@ -1,20 +1,6 @@
<!--
<div class="l-toi-holder"
ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 80 }"
ng-class="{ 'pinned': toi.pinned, 'val-to-left': toi.left > 80 }"
ng-style="{'left': toi.left + '%'}">
<div class="l-toi">
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
ng-click="toi.dismiss()"></a>
<a class="t-button-resync icon-button" title="Re-sync Time of Interest"
ng-click="toi.resync()"></a>
</div>
<span class="l-toi-val">{{toi.toiText}}</span>
</div>
-->
<div class="l-toi-holder"
ng-class="{ 'pinned': true, 'val-to-right': true }"
ng-style="{'left': 50 + '%'}">
<div class="l-flex-row l-toi">
<span class="flex-elem l-flex-row l-toi-buttons">
<a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"
@ -22,6 +8,6 @@
<a class="flex-elem t-button-unpin icon-button" title="Unset Time of Interest"
ng-click="toi.dismiss()"></a>
</span>
<span class="flex-elem l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
<span class="flex-elem l-toi-val">{{toi.toiText}}</span>
</div>
</div>