mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 06:03:08 +00:00
[Frontend] Adding resync and dedicated unpin buttons
Fixes #933 Fixes #1193 VERY WIP!
This commit is contained in:
Charles Hacskaylo
parent
3f0eb0b7cb
commit
42acf9255e
@ -36,7 +36,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $toiW;
|
||||
width: $toiH;
|
||||
&:not(.pinned) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@ -61,18 +61,57 @@
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
// Holds clock icon and unpin button
|
||||
font-size: $toiW;
|
||||
height: $toiW;
|
||||
width: $toiW;
|
||||
.t-button-unpin {
|
||||
// Holds clock icon and resync and unpin buttons
|
||||
@include trans-prop-nice($props: width, $dur: 250ms);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
height: $toiH;
|
||||
left: $toiPadLR * -1;
|
||||
line-height: $toiH;
|
||||
overflow: hidden;
|
||||
padding: $toiPadLR $toiPadLR;
|
||||
font-size: $toiH;
|
||||
width: $toiH;
|
||||
white-space: nowrap;
|
||||
.icon-button {
|
||||
color: $toiColorBg;
|
||||
@extend .icon-clock;
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $toiColorBgAlert;
|
||||
content: $glyph-icon-x-in-circle;
|
||||
}
|
||||
.t-button-resync {
|
||||
@extend .icon-clock;
|
||||
&:hover { color: $toiColorCtrlFg; }
|
||||
}
|
||||
.t-button-unpin {
|
||||
@include trans-prop-nice($props: opacity, $dur: 150ms);
|
||||
@extend .icon-x-in-circle;
|
||||
float: right;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
&:hover {
|
||||
// Expand and display controls; clock icon changes to resync
|
||||
background-color: $toiColorBg;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
z-index: 2;
|
||||
|
||||
.icon-button {
|
||||
color: rgba($toiColorCtrlFg, 0.5);
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
color: $toiColorCtrlFg;
|
||||
}
|
||||
&.t-button-unpin:hover {
|
||||
color: $toiColorBgAlert;
|
||||
}
|
||||
}
|
||||
|
||||
.t-button-resync:before {
|
||||
content: $glyph-icon-resync;
|
||||
}
|
||||
|
||||
& + .l-toi-val {
|
||||
// Dim the value to emphasize the controls
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -84,6 +123,7 @@
|
||||
&.show-val {
|
||||
.l-toi-val {
|
||||
$tbP: 1px;
|
||||
@include trans-prop-nice($props: opacity, $dur: 150ms);
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
@ -91,19 +131,22 @@
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiW;
|
||||
right: $toiW + $interiorMarginSm;
|
||||
height: $toiH;
|
||||
right: $toiH + $interiorMarginSm;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
line-height: $toiW;
|
||||
line-height: $toiH;
|
||||
padding: $tbP $p;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
//opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.val-to-right {
|
||||
.l-toi-val {
|
||||
right: auto;
|
||||
left: $toiW + $interiorMarginSm;
|
||||
left: $toiH + $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -138,8 +181,8 @@ table {
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
background: $toiColorBlocker;
|
||||
height: $toiW + $interiorMargin;
|
||||
width: $toiW + $interiorMargin;
|
||||
height: $toiH + $interiorMargin;
|
||||
width: $toiH + $interiorMargin;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@ -164,13 +207,22 @@ table {
|
||||
.l-toi-holder {
|
||||
bottom: nth($plotDisplayArea, 3) - $interiorMargin;
|
||||
z-index: 3;
|
||||
&:after {
|
||||
display: none;
|
||||
|
||||
.l-toi,
|
||||
.l-toi-val {
|
||||
@include transform(translateY(100%));
|
||||
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
@include transform(translateY(100%));
|
||||
bottom: $toiPadLR - 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
// Holds the plot area and the X-axis only
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: nth($plotDisplayArea, 2) + $toiW / 2;
|
||||
right: nth($plotDisplayArea, 2) + $toiH / 2;
|
||||
bottom: 0;
|
||||
left: nth($plotDisplayArea, 4);
|
||||
|
||||
|
||||
@ -107,8 +107,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
$toiColorBg: #6b93c6;
|
||||
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
|
||||
$toiColorFg: #000;
|
||||
$toiColorBgAlert: #cf644a; // $colorFormInvalid;
|
||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
$toiColorCtrlFg: #fff;
|
||||
$toiColorBgAlert: #cf2a12; // $colorFormInvalid;
|
||||
$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
$toiPadLR: 5px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
|
||||
@ -107,8 +107,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
$toiColorBg: #6b93c6;
|
||||
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
|
||||
$toiColorFg: #fff;
|
||||
$toiColorCtrlFg: #fff;
|
||||
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
|
||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
$toiPadLR: 2px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #fff;
|
||||
|
||||
@ -215,6 +215,7 @@
|
||||
}
|
||||
.l-data-visualization-holder {
|
||||
height: $r2H;
|
||||
z-index: 2; // Must lift above ticks and inputs
|
||||
|
||||
.l-page-button,
|
||||
.l-data-visualization {
|
||||
@ -283,8 +284,11 @@
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
//height: $r2H;
|
||||
//line-height: $r2H;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
@include transform-origin(left center);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -105,10 +105,12 @@
|
||||
ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 20 }"
|
||||
ng-style="{'left': toi.left + '%'}">
|
||||
<div class="l-toi">
|
||||
<a class="t-button-unpin icon-button"
|
||||
<a class="t-button-unpin icon-button" title="Unset Time of Interest"
|
||||
ng-click="toi.dismiss()"></a>
|
||||
<span class="l-toi-val">{{toi.toiText}}</span>
|
||||
<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>
|
||||
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
|
||||
|
||||
@ -74,13 +74,14 @@
|
||||
<!-- TOI element. val-to-right should be true when 'left' is < 150px -->
|
||||
<div class="l-toi-holder show-val"
|
||||
ng-class="{ pinned: false, 'val-to-right': true }"
|
||||
style="left: 0%">
|
||||
style="left: 20%">
|
||||
<span class="l-toi">
|
||||
<a class="t-button-unpin icon-button"
|
||||
title="Unset Time of Interest"
|
||||
ng-click="dummyUnpin()"></a>
|
||||
<span class="l-toi-val">21:31:30</span>
|
||||
<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>
|
||||
</span>
|
||||
<span class="l-toi-val">21:31:30</span>
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-coords"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user