From 6042e4ad581e07f007091cc198be3672e10e6f92 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 13 Oct 2016 13:46:27 -0700 Subject: [PATCH] [Frontend] Styling for TOI element Fixes #933 Fixes #1193 WIP: plots and TC done, moving on to tables; moved sass into conductor-v2; moved constants; --- platform/commonUI/general/res/sass/_main.scss | 1 - .../general/res/sass/plots/_plots-main.scss | 2 +- .../themes/espresso/res/sass/_constants.scss | 9 -- .../themes/snow/res/sass/_constants.scss | 9 -- .../conductor/res/sass/_constants.scss | 8 +- .../res/sass/_time-conductor-base.scss | 1 - .../res/sass}/_time-of-interest.scss | 122 ++++++++++-------- .../res/sass/time-conductor-espresso.scss | 13 +- .../res/sass/time-conductor-snow.scss | 11 +- .../res/templates/time-of-interest.html | 16 +-- 10 files changed, 105 insertions(+), 87 deletions(-) rename platform/{commonUI/general/res/sass/controls => features/conductor-v2/conductor/res/sass}/_time-of-interest.scss (73%) diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index cd511445cae..3ecb2304ab8 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -42,7 +42,6 @@ @import "controls/lists"; @import "controls/menus"; @import "controls/messages"; -@import "controls/time-of-interest"; @import "mobile/controls/menus"; /********************************* FORMS */ diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 0485ab736a5..ee5498fc407 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -50,7 +50,7 @@ // Holds the plot area and the X-axis only position: absolute; top: nth($plotDisplayArea, 1); - right: nth($plotDisplayArea, 2) + $toiH / 2; + right: nth($plotDisplayArea, 2); bottom: 0; left: nth($plotDisplayArea, 4); diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 5ff8db6126a..1a55cf93445 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -103,15 +103,6 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%); $colorInspectorSectionHeaderBg: $colorFormSectionHeader; $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); -// Time of Interest -$toiColorBg: #6b93c6; -$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon -$toiColorFg: #000; -$toiColorCtrlFg: #fff; -$toiColorBgAlert: #cf2a12; // $colorFormInvalid; -$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line -$toiPadLR: 4px; - // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #ccc; $colorStatusDefault: #ccc; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 5b2e9508673..ff83acbdf0b 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -103,15 +103,6 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); -// Time of Interest -$toiColorBg: #6b93c6; -$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon -$toiColorFg: #fff; -$toiColorCtrlFg: #fff; -$toiColorBgAlert: #a7292a; // $colorFormInvalid; -$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line -$toiPadLR: 2px; - // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #fff; $colorStatusDefault: #ccc; diff --git a/platform/features/conductor-v2/conductor/res/sass/_constants.scss b/platform/features/conductor-v2/conductor/res/sass/_constants.scss index 9c29313e97a..693576db5c2 100644 --- a/platform/features/conductor-v2/conductor/res/sass/_constants.scss +++ b/platform/features/conductor-v2/conductor/res/sass/_constants.scss @@ -2,6 +2,10 @@ $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, $ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs $timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00 -$timeCondAxisLROffset: (6px, 6px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px $timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator -$timeCondTOIValOffset: 0px; \ No newline at end of file +$timeCondTOIValOffset: 0px; +$ticksBlockerFadeW: 50px; +$toiBlockerFadeW: 10px; +$toiH: 12px; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line +$toiPad: 4px; +$timeCondAxisLROffset: (($toiH / 2) + $toiPad, ($toiH / 2) + $toiPad); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px \ No newline at end of file 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 f426a437cd9..93664e5a5f0 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 @@ -125,7 +125,6 @@ } .l-time-conductor-inputs-holder { - $ticksBlockerFadeW: 50px; $iconCalendarW: 16px; $wBgColor: $colorBodyBg; diff --git a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss b/platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss similarity index 73% rename from platform/commonUI/general/res/sass/controls/_time-of-interest.scss rename to platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss index dcb9ce28f5b..99fd9f61ed9 100644 --- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss +++ b/platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss @@ -22,13 +22,14 @@ .l-toi-holder, .l-toi-holder:after, -.l-toi-holder:before, -.l-toi { +.l-toi-holder:before { display: block; position: absolute; } .l-toi-holder { + $blockerFadeW: $toiBlockerFadeW; + $LROffset: $blockerFadeW + $toiPad; $p: 3px; @include transform(translateX(-50%)); color: $toiColorBg; @@ -62,36 +63,36 @@ .l-toi { // Holds buttons and val. Acts as a blocking element. - @extend .l-flex-row; - @include transform(translateY(-50%)); - background: blue; // $toiColorBlocker; + @include background-image(linear-gradient(90deg, transparent, $toiColorBlocker 10%, $toiColorBlocker 90%, transparent 100%)); + position: absolute; align-items: center; box-sizing: content-box; height: $toiH; - left: $toiPadLR * -1; - top: 50%; - padding: $toiPadLR $toiPadLR $toiPadLR 0; + right: $LROffset * -1; + @include transform(translateY(-50%)); top: 50%; + padding: $toiPad $blockerFadeW $toiPad $LROffset; z-index: 1; .l-toi-buttons { - @extend .flex-elem; @include trans-prop-nice($props: width, $dur: 250ms); border-radius: $controlCr; box-sizing: content-box; font-size: $toiH; height: 100%; line-height: $toiH; - padding: $toiPadLR $toiPadLR; + padding: $toiPad $toiPad; + order: 2; overflow: hidden; white-space: nowrap; + justify-content: space-between; width: $toiH; &:hover { // Expand and display controls; clock icon changes to resync background-color: $toiColorBg; cursor: pointer; + margin-left: $interiorMarginSm; width: 30px; - //z-index: 2; .icon-button { color: rgba($toiColorCtrlFg, 0.5); @@ -99,13 +100,19 @@ &:hover { color: $toiColorCtrlFg; } - &.t-button-unpin:hover { - color: $toiColorBgAlert; - } } - .t-button-resync:before { - content: $glyph-icon-resync; + .t-button-resync { + order: 2; + &:before { + content: $glyph-icon-resync; + } + } + .t-button-unpin { + order: 1; + &:hover { + color: $toiColorBgAlert; + } } & + .l-toi-val { @@ -114,16 +121,16 @@ } } } - // Holds clock icon and resync and unpin buttons - //left: $toiPadLR * -1; .icon-button { color: $toiColorBg; } + .t-button-resync { @extend .icon-clock; &:hover { color: $toiColorCtrlFg; } } + .t-button-unpin { @include trans-prop-nice($props: opacity, $dur: 150ms); @extend .icon-x-in-circle; @@ -137,33 +144,43 @@ } &.show-val { - .l-toi-val { - $tbP: 1px; - @extend .flex-elem; - @include trans-prop-nice($props: opacity, $dur: 150ms); - background-color: $toiColorBg; - border-radius: $controlCr; - box-sizing: content-box; - color: $toiColorFg; - display: inline-block; - font-size: 0.7rem; - font-weight: 400; - height: $toiH; - //right: $toiH + $interiorMarginSm; - //top: 50%; - //@include transform(translateY(-50%)); - line-height: $toiH; - padding: $tbP $p; - white-space: nowrap; - &:hover { - //opacity: 1; + .l-toi { + .l-toi-val { + $tbP: 1px; + @include trans-prop-nice($props: opacity, $dur: 150ms); + background-color: $toiColorBg; + border-radius: $controlCr; + box-sizing: content-box; + color: $toiColorFg; + display: inline-block; + font-size: 0.7rem; + font-weight: 400; + height: $toiH; + line-height: $toiH; + order: 1; + padding: $tbP $p; + white-space: nowrap; } } + } + + &.val-to-right { + .l-toi { + right: auto; + left: $LROffset * -1; + padding: $toiPad $LROffset $toiPad $blockerFadeW; + + .l-toi-buttons { + order: 1; + &:hover { + .t-button-resync { order: 1; } + .t-button-unpin { order: 2; } + margin-right: $interiorMarginSm; + } + } - &.val-to-right { .l-toi-val { - right: auto; - left: $toiH + $interiorMarginSm; + order: 2; } } } @@ -188,12 +205,14 @@ table { top: 0; } + &:before { @extend .icon-clock; color: $toiColorBg; cursor: pointer; z-index: 3; } + &:after { border-radius: 100%; content: ''; @@ -221,25 +240,20 @@ table { // TOI in plots .gl-plot { .gl-plot-wrapper-display-area-and-x-axis { + right: nth($plotDisplayArea, 2) + ($toiH / 2) + $toiPad; // Make room for TOI element + .l-toi-holder { bottom: nth($plotDisplayArea, 3) - $interiorMargin; z-index: 3; - .l-toi, - .l-toi-val { - //@include transform(translateY(100%)); + .l-toi { + @include transform(translateY(100%)); } .l-toi { - //bottom: $toiPadLR - 1; - //z-index: 2; - } - - .l-toi-val { - //top: auto; - //bottom: 0; - //z-index: 1; + top: auto; + bottom: $toiPad; } } } @@ -253,7 +267,7 @@ table { &:after { // Vertical lines border-left-style: solid; - //height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; + height: ((nth($ueTimeConductorH, 2) - $timeCondTOIIconD)/2) + $linesVOffset; } &:before { @@ -268,4 +282,4 @@ table { bottom: 0px; } } -} \ No newline at end of file +} diff --git a/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss b/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss index ca1712e16dc..7f1da67cc0d 100644 --- a/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss +++ b/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss @@ -36,4 +36,15 @@ $colorTimeCondKeyBg: #4e70dc; $colorTimeCondKeyFg: #fff; $colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%); $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%); -@import "time-conductor-base"; \ No newline at end of file + +// Time of Interest +$toiColorBg: #6b93c6; +$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon +$toiColorFg: #000; +$toiColorCtrlFg: #fff; +$toiColorBgAlert: #cf2a12; +$colorTimeCondTOIBg: darken($toiColorBg, 20%); +$colorTimeCondTOIBgHov: $toiColorBg; + +@import "time-conductor-base"; +@import "time-of-interest"; \ No newline at end of file diff --git a/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss b/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss index 8d54fc5befc..31213965374 100644 --- a/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss +++ b/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss @@ -36,6 +36,15 @@ $colorTimeCondKeyBg: #6178dc; $colorTimeCondKeyFg: #fff; $colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%); $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%); + +// Time of Interest +$toiColorBg: #6b93c6; +$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon +$toiColorFg: #fff; +$toiColorCtrlFg: #fff; +$toiColorBgAlert: #a7292a; // $colorFormInvalid; $colorTimeCondTOIBg: darken($toiColorBg, 20%); $colorTimeCondTOIBgHov: $toiColorBg; -@import "time-conductor-base"; \ No newline at end of file + +@import "time-conductor-base"; +@import "time-of-interest"; \ No newline at end of file diff --git a/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html b/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html index 18e897b504d..47bd8a0f17a 100644 --- a/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html +++ b/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html @@ -13,15 +13,15 @@
-
- - - +
+ + + - {{toi.toiText}}2016-09-16 21:30:30 + {{toi.toiText}}2016-09-16 21:30:30
\ No newline at end of file