From d3bf6c5857493e5de30219c835f214b247fb4338 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 3 Oct 2016 15:15:56 -0700 Subject: [PATCH] [Frontend] Styling for TOI element Fixes #933 Fixes #1193 WIP: Markup and CSS for plots and TC near complete; TODO: revised styling in tabular views; --- .../res/sass/controls/_time-of-interest.scss | 63 ++++++++++--------- .../themes/espresso/res/sass/_constants.scss | 4 +- .../themes/snow/res/sass/_constants.scss | 4 +- .../res/sass/_time-conductor-base.scss | 22 ++++--- .../res/templates/time-conductor.html | 3 +- .../features/plot/res/templates/plot.html | 11 ++-- 6 files changed, 56 insertions(+), 51 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 f13cf41d18..dc744d1296 100644 --- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss +++ b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss @@ -38,14 +38,15 @@ TC .l-toi-holder, .l-toi-holder:after, .l-toi-holder:before, -.l-toi { +.l-toi, +.l-toi-val { display: block; position: absolute; } .l-toi-holder { - @include trans-prop-nice($props: opacity, $dur: 200ms); + $p: 3px; @include transform(translateX(-50%)); color: $toiColorBg; position: absolute; @@ -70,42 +71,45 @@ TC position: absolute; top: 0; bottom: 0; - width: 1px; + width: 2px; } .l-toi { - @extend .icon-clock; - @extend .l-flex-row; - text-align: center; - //width: $toiW; - &:before { - // Clock icon - @extend .flex-elem; - margin-right: $interiorMarginSm; - order: 1; - } - &:hover { - cursor: pointer !important; - &:before { - // Icon, change to close box - color: $colorAlert; - content: $glyph-icon-x-in-circle !important; + // Holds clock icon an unpin button + font-size: $toiW; + height: $toiW; + width: $toiW; + .t-button-unpin { + color: $toiColorBg; + @extend .icon-clock; + &:hover { + &:before { + content: $glyph-icon-x-in-circle; + } } } } .l-toi-val { - //@extend .flex-elem; - //@extend .grows; + $tbP: 1px; + background-color: $toiColorBg; //rgba($toiColorBg, 0.8); + border-radius: $controlCr; + box-sizing: content-box; + display: inline-block; + color: $toiColorFg; font-size: 0.7rem; + height: $toiW; + right: $toiW + $interiorMarginSm; + top: 50%; + @include transform(translateY(-50%)); + line-height: $toiW; + padding: $tbP $p; white-space: nowrap; - //right: $toiW + $interiorMargin; } &.val-to-right { .l-toi-val { - order: 2; - //right: auto; - //left: $toiW + $interiorMarginSm; + right: auto; + left: $toiW + $interiorMarginSm; } } } @@ -159,19 +163,16 @@ table { .gl-plot { .gl-plot-wrapper-display-area-and-x-axis { .l-toi-holder { - //@include test(); - bottom: nth($plotDisplayArea, 3); + bottom: nth($plotDisplayArea, 3) - $interiorMargin; &:after { display: none; } + .l-toi { - @include test(); @include transform(translateY(100%)); bottom: 0; } - //&:hover { - // background-color: rgba($toiColorBgHov, 0.1); - //} + z-index: 3; } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index e38e1343eb..bc795f9d0b 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Time of Interest $toiColorBg: $colorBtnMajorBg; $toiColorBgHov: $colorBtnMajorBgHov; -$toiColorFg: #ccc; +$toiColorFg: #000; $toiColorFgHov: #fff; $toiColorBgActive: lighten($colorKey, 10%); $toiColorFgActive: $toiColorFgHov; -$toiW: 16px; +$toiW: 12px; // 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 0528e9384d..bdaa001601 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Time of Interest $toiColorBg: $colorKey; $toiColorBgHov: lighten($colorKey, 10%); -$toiColorFg: #ccc; +$toiColorFg: #fff; $toiColorFgHov: #fff; $toiColorBgActive: lighten($colorKey, 20%); $toiColorFgActive: $toiColorFgHov; -$toiW: 18px; +$toiW: 12px; // 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 722adbdb8c..f718026b4c 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 @@ -289,20 +289,22 @@ } .l-toi { - $d: $timeCondTOIIconD; - @include transform(translate(-50%, -50%)); - font-size: $d; - line-height: $d; - left: 50%; top: 50%; - height: $d; - width: $d; - z-index: 1; + @include transform(translateY(-50%)); + //$d: $timeCondTOIIconD; + //@include transform(translate(-50%, -50%)); + //font-size: $d; + //line-height: $d; + //left: 50%; + //top: 50%; + //height: $d; + //width: $d; + //z-index: 1; } .l-toi-val { - @include transform(translateY(-51%)); - top: 50%; + //@include transform(translateY(-51%)); + //top: 50%; } } 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 2a385bf3ed..2d75fb7213 100644 --- a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html @@ -106,7 +106,8 @@ ng-click="this.pinned = false" style="left: 70%">
-
2016-09-15 21:31:30.000Z
+ + 21:31:30
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index 417bb31ab9..d6d9a2d50a 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -78,13 +78,14 @@
-
-
- Z884.92:25:32 52-90-6102 -
+ + + 21:31:30 +