[Frontend] TOI sass and markup sanding

Fixes 
Fixes 
Color tweaks; Cleanups, commented
 code removal, etc.; tightened up
 tabular padding and font sizes;
This commit is contained in:
Charles Hacskaylo 2016-10-04 18:12:01 -07:00
parent 0ed0a48a8c
commit 47a0aba601
8 changed files with 71 additions and 50 deletions
platform
commonUI
general/res/sass
themes
espresso/res/sass
snow/res/sass
features
conductor-v2/conductor/res/templates
plot/res/templates
table/res/templates

View File

@ -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;

View File

@ -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;
} }
} }

View File

@ -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 {

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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',
}"> }">