From 47a0aba601ed86636265d793fdd43a6d87006629 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 4 Oct 2016 18:12:01 -0700 Subject: [PATCH] [Frontend] TOI sass and markup sanding Fixes #933 Fixes #1193 Color tweaks; Cleanups, commented code removal, etc.; tightened up tabular padding and font sizes; --- .../commonUI/general/res/sass/_constants.scss | 2 +- .../res/sass/controls/_time-of-interest.scss | 83 ++++++++++++------- .../general/res/sass/lists/_tabular.scss | 8 +- .../themes/espresso/res/sass/_constants.scss | 2 + .../themes/snow/res/sass/_constants.scss | 2 + .../res/templates/time-conductor.html | 13 ++- .../features/plot/res/templates/plot.html | 10 +-- .../table/res/templates/mct-table.html | 1 + 8 files changed, 71 insertions(+), 50 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 1d62164284d..c2a61f10480 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -75,7 +75,7 @@ $treeContextTriggerW: 20px; /*************** Tabular */ $tabularHeaderH: 22px; $tabularTdPadLR: $itemPadLR; -$tabularTdPadTB: 3px; +$tabularTdPadTB: 2px; /*************** Imagery */ $imageMainControlBarH: 25px; $imageThumbsD: 120px; diff --git a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss index fa8d6197257..9cf36e83323 100644 --- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss +++ b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss @@ -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; } } diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss index c197c3d840d..91be1c8d752 100644 --- a/platform/commonUI/general/res/sass/lists/_tabular.scss +++ b/platform/commonUI/general/res/sass/lists/_tabular.scss @@ -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 { diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 29981651b2c..da9829756e0 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -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 diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index ec36ee03857..71c72967bc4 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -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 diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html index 2d75fb72135..c8a42fabc1c 100644 --- a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html @@ -98,15 +98,14 @@
- -
+
- + 21:31:30
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index d6d9a2d50ab..e0dd954d18d 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -75,15 +75,15 @@
-
- +
- - + 21:31:30
diff --git a/platform/features/table/res/templates/mct-table.html b/platform/features/table/res/templates/mct-table.html index e769645edd7..1a9fbbd9d92 100644 --- a/platform/features/table/res/templates/mct-table.html +++ b/platform/features/table/res/templates/mct-table.html @@ -51,6 +51,7 @@