mirror of
https://github.com/nasa/openmct.git
synced 2024-12-25 07:41:06 +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:
parent
0ed0a48a8c
commit
47a0aba601
platform
commonUI
general/res/sass
themes
features
conductor-v2/conductor/res/templates
plot/res/templates
table/res/templates
@ -75,7 +75,7 @@ $treeContextTriggerW: 20px;
|
|||||||
/*************** Tabular */
|
/*************** Tabular */
|
||||||
$tabularHeaderH: 22px;
|
$tabularHeaderH: 22px;
|
||||||
$tabularTdPadLR: $itemPadLR;
|
$tabularTdPadLR: $itemPadLR;
|
||||||
$tabularTdPadTB: 3px;
|
$tabularTdPadTB: 2px;
|
||||||
/*************** Imagery */
|
/*************** Imagery */
|
||||||
$imageMainControlBarH: 25px;
|
$imageMainControlBarH: 25px;
|
||||||
$imageThumbsD: 120px;
|
$imageThumbsD: 120px;
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-toi {
|
.l-toi {
|
||||||
// Holds clock icon an unpin button
|
// Holds clock icon and unpin button
|
||||||
font-size: $toiW;
|
font-size: $toiW;
|
||||||
height: $toiW;
|
height: $toiW;
|
||||||
width: $toiW;
|
width: $toiW;
|
||||||
@ -70,6 +70,7 @@
|
|||||||
@extend .icon-clock;
|
@extend .icon-clock;
|
||||||
&:hover {
|
&:hover {
|
||||||
&:before {
|
&:before {
|
||||||
|
color: $toiColorBgAlert;
|
||||||
content: $glyph-icon-x-in-circle;
|
content: $glyph-icon-x-in-circle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -77,27 +78,33 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-toi-val {
|
.l-toi-val {
|
||||||
$tbP: 1px;
|
display: none; // Hide by default; see .show-val below
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.val-to-right {
|
&.show-val {
|
||||||
.l-toi-val {
|
.l-toi-val {
|
||||||
right: auto;
|
$tbP: 1px;
|
||||||
left: $toiW + $interiorMarginSm;
|
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 {
|
&.l-toi.pinned {
|
||||||
border-top: 1px dashed $toiColorBg;
|
border-top: 1px dashed $toiColorBg;
|
||||||
td, .td {
|
td, .td {
|
||||||
&:first-child:before {
|
&:first-child {
|
||||||
@extend .icon-clock;
|
&:before,
|
||||||
@include transform(translate(-50%, -50%));
|
&:after {
|
||||||
color: $toiColorBg;
|
@include transform(translate(-50%, -50%));
|
||||||
cursor: pointer;
|
display: block;
|
||||||
display: block;
|
position: absolute;
|
||||||
position: absolute;
|
left: 50%;
|
||||||
left: 50%;
|
bottom: auto;
|
||||||
bottom: auto;
|
top: 0;
|
||||||
text-shadow: 0 1px 15px black;
|
|
||||||
top: 0;
|
}
|
||||||
z-index: 2;
|
&: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 {
|
&:hover {
|
||||||
td, .td {
|
td, .td {
|
||||||
&:first-child:before {
|
&:first-child:before {
|
||||||
|
color: $toiColorBgAlert;
|
||||||
content: $glyph-icon-x-in-circle !important;
|
content: $glyph-icon-x-in-circle !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -51,11 +51,6 @@ table {
|
|||||||
|
|
||||||
tbody, .tbody {
|
tbody, .tbody {
|
||||||
display: table-row-group;
|
display: table-row-group;
|
||||||
/* tr, .tr {
|
|
||||||
&:hover {
|
|
||||||
background: rgba($colorTabBodyFg, 0.1);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
}
|
}
|
||||||
tr, .tr {
|
tr, .tr {
|
||||||
border-top: 1px solid $colorTabBorder;
|
border-top: 1px solid $colorTabBorder;
|
||||||
@ -72,11 +67,12 @@ table {
|
|||||||
}
|
}
|
||||||
th, .th, td, .td {
|
th, .th, td, .td {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
|
font-size: 0.7rem;
|
||||||
}
|
}
|
||||||
th, .th {
|
th, .th {
|
||||||
border-left: 1px solid $colorTabHeaderBorder;
|
border-left: 1px solid $colorTabHeaderBorder;
|
||||||
color: $colorTabHeaderFg;
|
color: $colorTabHeaderFg;
|
||||||
padding: $tabularTdPadLR $tabularTdPadLR;
|
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
|
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
@ -105,7 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
|||||||
|
|
||||||
// Time of Interest
|
// Time of Interest
|
||||||
$toiColorBg: #6b93c6;
|
$toiColorBg: #6b93c6;
|
||||||
|
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
|
||||||
$toiColorFg: #000;
|
$toiColorFg: #000;
|
||||||
|
$toiColorBgAlert: #cf644a; // $colorFormInvalid;
|
||||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
$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
|
// Status colors, mainly used for messaging and item ancillary symbols
|
||||||
|
@ -105,7 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
|||||||
|
|
||||||
// Time of Interest
|
// Time of Interest
|
||||||
$toiColorBg: #6b93c6;
|
$toiColorBg: #6b93c6;
|
||||||
|
$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
|
||||||
$toiColorFg: #fff;
|
$toiColorFg: #fff;
|
||||||
|
$toiColorBgAlert: #a7292a; // $colorFormInvalid;
|
||||||
$toiW: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
$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
|
// 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">
|
<div class="l-data-visualization-holder l-row-elem flex-elem">
|
||||||
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
<a class="l-page-button s-icon-button icon-pointer-left"></a>
|
||||||
<div class="l-data-visualization">
|
<div class="l-data-visualization">
|
||||||
<!-- Note:
|
<!-- TOI element. val-to-right should be true when 'left' is < 150px -->
|
||||||
- val-to-right should be applied when l-toi-holder left < 160px
|
<div class="l-toi-holder show-val"
|
||||||
-->
|
ng-class="{ 'pinned': false, 'val-to-right': false }"
|
||||||
<div class="l-toi-holder"
|
|
||||||
ng-class="{ 'pinned': true, 'val-to-right': false }"
|
|
||||||
ng-click="this.pinned = false"
|
|
||||||
style="left: 70%">
|
style="left: 70%">
|
||||||
<div class="l-toi">
|
<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>
|
<span class="l-toi-val">21:31:30</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,15 +75,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 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. val-to-right should be true when 'left' is < 150px -->
|
||||||
<div class="l-toi-holder show-val"
|
<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%">
|
style="left: 0%">
|
||||||
<!-- Need text val at bottom, plus vertical line -->
|
|
||||||
<span class="l-toi">
|
<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 class="l-toi-val">21:31:30</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,6 +51,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
|
<tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
|
||||||
ng-class="{ 'l-toi pinned': false }"
|
ng-class="{ 'l-toi pinned': false }"
|
||||||
|
ng-click="dummyUnpin()"
|
||||||
ng-style="{
|
ng-style="{
|
||||||
top: visibleRow.offsetY + 'px',
|
top: visibleRow.offsetY + 'px',
|
||||||
}">
|
}">
|
||||||
|
Loading…
Reference in New Issue
Block a user