mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
[Frontend] TOI sass and markup sanding
Fixes #933 Fixes #1193 Color tweaks; Cleanups, commented code removal, etc.; tightened up tabular padding and font sizes;
This commit is contained in:
Charles Hacskaylo
parent
0ed0a48a8c
commit
47a0aba601
@ -75,7 +75,7 @@ $treeContextTriggerW: 20px;
|
||||
/*************** Tabular */
|
||||
$tabularHeaderH: 22px;
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
$tabularTdPadTB: 3px;
|
||||
$tabularTdPadTB: 2px;
|
||||
/*************** Imagery */
|
||||
$imageMainControlBarH: 25px;
|
||||
$imageThumbsD: 120px;
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
// Holds clock icon an unpin button
|
||||
// Holds clock icon and unpin button
|
||||
font-size: $toiW;
|
||||
height: $toiW;
|
||||
width: $toiW;
|
||||
@ -70,6 +70,7 @@
|
||||
@extend .icon-clock;
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $toiColorBgAlert;
|
||||
content: $glyph-icon-x-in-circle;
|
||||
}
|
||||
}
|
||||
@ -77,27 +78,33 @@
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
$tbP: 1px;
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
color: $toiColorFg;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiW;
|
||||
right: $toiW + $interiorMarginSm;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
line-height: $toiW;
|
||||
padding: $tbP $p;
|
||||
white-space: nowrap;
|
||||
display: none; // Hide by default; see .show-val below
|
||||
}
|
||||
|
||||
&.val-to-right {
|
||||
&.show-val {
|
||||
.l-toi-val {
|
||||
right: auto;
|
||||
left: $toiW + $interiorMarginSm;
|
||||
$tbP: 1px;
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
color: $toiColorFg;
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
height: $toiW;
|
||||
right: $toiW + $interiorMarginSm;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
line-height: $toiW;
|
||||
padding: $tbP $p;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.val-to-right {
|
||||
.l-toi-val {
|
||||
right: auto;
|
||||
left: $toiW + $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -110,24 +117,38 @@ table {
|
||||
&.l-toi.pinned {
|
||||
border-top: 1px dashed $toiColorBg;
|
||||
td, .td {
|
||||
&:first-child:before {
|
||||
@extend .icon-clock;
|
||||
@include transform(translate(-50%, -50%));
|
||||
color: $toiColorBg;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: auto;
|
||||
text-shadow: 0 1px 15px black;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
&: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: $toiW + $interiorMargin;
|
||||
width: $toiW + $interiorMargin;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td, .td {
|
||||
&:first-child:before {
|
||||
color: $toiColorBgAlert;
|
||||
content: $glyph-icon-x-in-circle !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,11 +51,6 @@ table {
|
||||
|
||||
tbody, .tbody {
|
||||
display: table-row-group;
|
||||
/* tr, .tr {
|
||||
&:hover {
|
||||
background: rgba($colorTabBodyFg, 0.1);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
tr, .tr {
|
||||
border-top: 1px solid $colorTabBorder;
|
||||
@ -72,11 +67,12 @@ table {
|
||||
}
|
||||
th, .th, td, .td {
|
||||
display: table-cell;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
th, .th {
|
||||
border-left: 1px solid $colorTabHeaderBorder;
|
||||
color: $colorTabHeaderFg;
|
||||
padding: $tabularTdPadLR $tabularTdPadLR;
|
||||
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
|
||||
&:first-child {
|
||||
|
||||
@ -105,7 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Time of Interest
|
||||
$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
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
|
||||
@ -105,7 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Time of Interest
|
||||
$toiColorBg: #6b93c6;
|
||||
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
|
||||
$toiColorFg: #fff;
|
||||
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
|
||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
|
||||
@ -98,15 +98,14 @@
|
||||
<div class="l-data-visualization-holder l-row-elem flex-elem">
|
||||
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
||||
<div class="l-data-visualization">
|
||||
<!-- Note:
|
||||
- val-to-right should be applied when l-toi-holder left < 160px
|
||||
-->
|
||||
<div class="l-toi-holder"
|
||||
ng-class="{ 'pinned': true, 'val-to-right': false }"
|
||||
ng-click="this.pinned = false"
|
||||
<!-- 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': false }"
|
||||
style="left: 70%">
|
||||
<div class="l-toi">
|
||||
<a class="t-button-unpin icon-button" ng-click="unpin()"></a>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -75,15 +75,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- new wrapper inserted here -->
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
<!-- TOI element -->
|
||||
<!-- TOI element. val-to-right should be true when 'left' is < 150px -->
|
||||
<div class="l-toi-holder show-val"
|
||||
ng-class="{ pinned: true, 'val-to-right': true }"
|
||||
ng-class="{ pinned: false, 'val-to-right': true }"
|
||||
style="left: 0%">
|
||||
<!-- Need text val at bottom, plus vertical line -->
|
||||
<span class="l-toi">
|
||||
<a class="t-button-unpin icon-button" ng-click="unpin()"></a>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
<tbody>
|
||||
<tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
|
||||
ng-class="{ 'l-toi pinned': false }"
|
||||
ng-click="dummyUnpin()"
|
||||
ng-style="{
|
||||
top: visibleRow.offsetY + 'px',
|
||||
}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user