From 0ed0a48a8c5c7665df9164bee2eb3dad1b28992f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 4 Oct 2016 15:49:18 -0700 Subject: [PATCH 1/2] [Frontend] Styling for TOI element Fixes #933 Fixes #1193 Tabular styling for TOI; --- .../res/sass/controls/_time-of-interest.scss | 57 ++++++------------- .../general/res/sass/lists/_tabular.scss | 2 +- .../themes/espresso/res/sass/_constants.scss | 4 +- .../themes/snow/res/sass/_constants.scss | 2 +- .../res/sass/_time-conductor-base.scss | 3 - .../table/res/templates/mct-table.html | 2 +- 6 files changed, 22 insertions(+), 48 deletions(-) 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 f341788eda6..fa8d6197257 100644 --- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss +++ b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss @@ -20,21 +20,6 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ - -/* -Plots --toi-holder:before vertical line --toi: glyphs - -Tables -tr: border color -td:before: glyphs - -TC --toi-holder:before, after: vertical lines --toi: glyphs - -*/ .l-toi-holder, .l-toi-holder:after, .l-toi-holder:before, @@ -44,7 +29,6 @@ TC position: absolute; } - .l-toi-holder { $p: 3px; @include transform(translateX(-50%)); @@ -52,14 +36,16 @@ TC position: absolute; top: 0; bottom: 0; - width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line + width: $toiW; &:not(.pinned) { opacity: 0; pointer-events: none; } + &.pinned { opacity: 1; } + &:before, &:after { // Vertical lines. TC uses both; plot only uses :before @@ -73,6 +59,7 @@ TC bottom: 0; width: 2px; } + .l-toi { // Holds clock icon an unpin button font-size: $toiW; @@ -91,12 +78,13 @@ TC .l-toi-val { $tbP: 1px; - background-color: $toiColorBg; //rgba($toiColorBg, 0.8); + 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%; @@ -120,40 +108,30 @@ table { tbody, .tbody { tr, .tr { &.l-toi.pinned { - td { - border-top: 1px dashed $toiColorBg; + border-top: 1px dashed $toiColorBg; + td, .td { &:first-child:before { - @extend .ui-symbol; + @extend .icon-clock; @include transform(translate(-50%, -50%)); - content: $glyph-icon-clock; + color: $toiColorBg; + cursor: pointer; display: block; position: absolute; - text-shadow: 0 1px 15px black; left: 50%; + bottom: auto; + text-shadow: 0 1px 15px black; top: 0; z-index: 2; - color: $toiColorBg; } } - &.highlight-bottom-edge { - td { - border-bottom: 1px dashed $toiColorBg; - //border-top: 1px solid transparent; + &:hover { + td, .td { &:first-child:before { - @include transform(translate(-50%, 50%)); - top: auto; - bottom: 0; + content: $glyph-icon-x-in-circle !important; } } } - - &:hover { - td:first-child:before { - content: $glyph-icon-x-in-circle; - cursor: pointer; - } - } } } } @@ -164,6 +142,7 @@ table { .gl-plot-wrapper-display-area-and-x-axis { .l-toi-holder { bottom: nth($plotDisplayArea, 3) - $interiorMargin; + z-index: 3; &:after { display: none; } @@ -172,8 +151,6 @@ table { @include transform(translateY(100%)); bottom: 0; } - - z-index: 3; } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss index 1377744fbf4..c197c3d840d 100644 --- a/platform/commonUI/general/res/sass/lists/_tabular.scss +++ b/platform/commonUI/general/res/sass/lists/_tabular.scss @@ -58,6 +58,7 @@ table { }*/ } tr, .tr { + border-top: 1px solid $colorTabBorder; display: table-row; &:first-child .td { border-top: none; @@ -99,7 +100,6 @@ table { } } td, .td { - border-top: 1px solid $colorTabBorder; min-width: 20px; color: $colorTelemFresh; padding: $tabularTdPadTB $tabularTdPadLR; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 2319a96a2ce..29981651b2c 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -104,9 +104,9 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader; $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Time of Interest -$toiColorBg: #6b93c6; //$colorBtnMajorBg; +$toiColorBg: #6b93c6; $toiColorFg: #000; -$toiW: 12px; +$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 $colorStatusFg: #ccc; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 1ba115b5635..ec36ee03857 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -106,7 +106,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Time of Interest $toiColorBg: #6b93c6; $toiColorFg: #fff; -$toiW: 12px; +$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 $colorStatusFg: #fff; diff --git a/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss b/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss index 801aba63534..ec54e6a61ee 100644 --- a/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss +++ b/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss @@ -244,9 +244,6 @@ left: nth($timeCondAxisLROffset, 1); right: nth($timeCondAxisLROffset, 2); &:hover { - // Hide the cursor, because the TOI element essentially "becomes" the cursor - // when the user is hovering over the visualization area. - cursor: none; .l-toi-holder.hover { opacity: 1; } diff --git a/platform/features/table/res/templates/mct-table.html b/platform/features/table/res/templates/mct-table.html index e3f3b1c009d..e769645edd7 100644 --- a/platform/features/table/res/templates/mct-table.html +++ b/platform/features/table/res/templates/mct-table.html @@ -50,7 +50,7 @@ From 47a0aba601ed86636265d793fdd43a6d87006629 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 4 Oct 2016 18:12:01 -0700 Subject: [PATCH 2/2] [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 @@