mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 21:53:08 +00:00
Merge branch 'open1193' of https://github.com/nasa/openmctweb into open1193
This commit is contained in:
Henry
commit
6bea6b3bc2
@ -363,14 +363,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin webkitProp($name, $val) {
|
||||
#{$name}: #{$val};
|
||||
-webkit-#{$name}: #{$val};
|
||||
}
|
||||
|
||||
@mixin webkitVal($name, $val) {
|
||||
#{$name}: #{$val};
|
||||
#{$name}: -webkit-#{$val};
|
||||
@mixin cursorGrab() {
|
||||
cursor: grab;
|
||||
cursor: -webkit-grab;
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin verticalCenter {
|
||||
|
||||
@ -345,6 +345,9 @@
|
||||
.mode-selector .s-menu-button:before {
|
||||
content: $i;
|
||||
}
|
||||
.l-axis-holder {
|
||||
@include cursorGrab();
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime mode
|
||||
|
||||
@ -66,20 +66,19 @@
|
||||
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;
|
||||
|
||||
.l-toi-buttons {
|
||||
@include trans-prop-nice($props: width, $dur: 250ms);
|
||||
@include trans-prop-nice($props: (width, padding), $dur: 250ms);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
font-size: $toiH;
|
||||
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;
|
||||
}
|
||||
@ -141,11 +140,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TOI is showing value as well
|
||||
.show-val .l-toi-holder {
|
||||
.l-toi {
|
||||
.l-toi-buttons {
|
||||
order: 1;
|
||||
&:hover {
|
||||
margin-left: $interiorMarginSm;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
.l-toi-val {
|
||||
@ -159,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -196,18 +198,24 @@ table {
|
||||
z-index: 1;
|
||||
td, .td {
|
||||
.l-toi-holder {
|
||||
//@include test();
|
||||
//width: 100%;
|
||||
//z-index: 5;
|
||||
left: 50% !important;
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
.l-toi {
|
||||
background: $toiColorBlocker;
|
||||
background: rgba($toiColorBlocker, 0.9);
|
||||
border-radius: 20%;
|
||||
height: auto;
|
||||
padding: $toiPad;
|
||||
@include transform(translate(-50%, -50%));
|
||||
left: 50%; right: auto; top: 0;
|
||||
.l-toi-buttons {
|
||||
padding: 1px;
|
||||
&:hover {
|
||||
padding: $toiPad;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -216,57 +224,6 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// Old approach
|
||||
/*.tabular,
|
||||
table {
|
||||
tbody, .tbody {
|
||||
tr, .tr {
|
||||
&.l-toi.pinned {
|
||||
border-top: 1px dashed $toiColorBg;
|
||||
td, .td {
|
||||
&:first-child {
|
||||
&:before,
|
||||
&:after {
|
||||
@include transform(translate(-50%, -50%));
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
&:before {
|
||||
@extend .icon-clock;
|
||||
color: $toiColorBg;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
background: $toiColorBlocker;
|
||||
height: $toiH + $interiorMargin;
|
||||
width: $toiH + $interiorMargin;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td, .td {
|
||||
&:first-child:before {
|
||||
color: $toiColorBgAlert;
|
||||
content: $glyph-icon-x-in-circle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// TOI in plots
|
||||
.gl-plot {
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -1,15 +1,4 @@
|
||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||
<style>
|
||||
.fixed-mode .l-axis-holder {
|
||||
cursor: grab;
|
||||
cursor: -webkit-grab;
|
||||
}
|
||||
|
||||
.fixed-mode .l-axis-holder:active {
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
</style>
|
||||
<div ng-controller="TimeConductorController as tcController"
|
||||
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
|
||||
ng-class="{'status-panning': panning}">
|
||||
|
||||
@ -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>
|
||||
@ -164,7 +164,7 @@ $ueTimeConductorH: (33px, 18px, 20px);
|
||||
margin-left: 0;
|
||||
}
|
||||
.l-time-range-tick-label {
|
||||
@include webkitProp(transform, translateX(-50%));
|
||||
@include transform(translateX(-50%));
|
||||
color: $colorPlotLabelFg;
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user