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 9d5eca0c9fe..1311acbc6fc 100644 --- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss +++ b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss @@ -22,15 +22,43 @@ .l-toi-holder { @include trans-prop-nice($props: opacity, $dur: 200ms); - &:not(.active) { - opacity: 0; // Hide by default, only show when user hovers over container that implements this element + &:not(.pinned) { + opacity: 0; + } + &.pinned { + opacity: 1; } .l-toi { - + position: absolute; + &.block { + $d: $toiW; + background-color: $toiColorBg; + border-radius: $controlCr; + color: $toiColorFg; + width: $d; + height: $d; + line-height: $d; + text-align: center; + &:hover { + background-color: $colorAlert !important; + color: #fff !important; + } + } + &:hover { + cursor: pointer !important; + &:before { + // Icon, change to close box + content: $glyph-icon-x-in-circle !important; + } + } } - .l-toi-val { - color: $toiColorFg; - + &:hover { + $c: $toiColorBgHov; + cursor: ew-resize; + .l-toi.block { + background-color: $c !important; + color: $toiColorFgHov; + } } } @@ -62,10 +90,10 @@ table { } &.l-toi.pinned { td { - border-top: 1px solid $toiColorBgPinned; + border-top: 1px solid $toiColorBg; &:first-child:before { @include toiIcon(); - color: $toiColorBgPinned; + color: $toiColorFg; } } &:hover { @@ -82,20 +110,13 @@ table { // TOI in plots .gl-plot { .gl-plot-wrapper-display-area-and-x-axis { - &:hover { - .l-toi-holder.hover { - opacity: 1; - } - } .l-toi-holder { - $toiColorBgPinned: rgba($toiColorBgPinned, 0.4); - pointer-events: none; + //@include test(); + @include transform(translateX(-50%)); position: absolute; top: 0; - bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned - min-width: 50px; - max-width: 150px; - width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line + bottom: nth($plotDisplayArea, 3); + width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line &:before { // Vertical line border-left: 1px dashed $toiColorBg; @@ -107,44 +128,15 @@ table { bottom: 0; width: 1px; } - .l-toi-val { - background-color: $toiColorBg; - box-sizing: border-box; - padding: $interiorMarginSm $interiorMarginSm; - position: absolute; - text-align: center; - width: 100%; - bottom: -2px; - border-radius: $controlCr; - .val { - @include reverseEllipsis(); - } - .t-unpin-button { - margin-left: $interiorMarginSm; - pointer-events: auto; - } + .l-toi { + @extend .icon-clock; + @include transform(translateY(100%)); + bottom: 0; } - - &.pinned { + &:hover { + background-color: rgba($toiColorBgHov, 0.1); &:before { - border-left-color: $toiColorBgPinned; - border-left-style: solid; - } - .l-toi-val { - background-color: $toiColorBgPinned; - border-radius: 0; - border-top-left-radius: $controlCr; - border-top-right-radius: $controlCr; - bottom: 0px; - } - } - - &:not(.pinned) { - .l-toi-val { - @include transform(translateY(100%)); // Position of element when TOI is visible but not pinned - } - .t-unpin-button { - display: none; + border-left-color: $toiColorBgHov !important; } } z-index: 3; diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index bd3e2b22c77..b5274dae56b 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -48,10 +48,9 @@ .gl-plot-wrapper-display-area-and-x-axis { // Holds the plot area and the X-axis only - //@include test(blue, 0.1); position: absolute; top: nth($plotDisplayArea, 1); - right: nth($plotDisplayArea, 2); + right: nth($plotDisplayArea, 2) + $toiW / 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 7ae71c994ee..1a2c45fb9f8 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader; $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Time of Interest -$toiColorBg: #666; -$toiColorBgHov: #999; -$toiColorFg: #fff; -$toiColorBgPinned: $colorKey; -$toiColorFgPinned: #fff; +$toiColorBg: $colorBtnMajorBg; +$toiColorBgHov: $colorBtnMajorBgHov; +$toiColorFg: #ccc; +$toiColorFgHov: #fff; +$toiColorBgActive: lighten($colorKey, 10%); +$toiColorFgActive: $toiColorFgHov; +$toiW: 18px; // 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 d3707e2526d..0528e9384d0 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Time of Interest -$toiColorBg: #666; -$toiColorBgHov: #333; -$toiColorFg: #fff; -$toiColorBgPinned: $colorKey; -$toiColorFgPinned: #fff; +$toiColorBg: $colorKey; +$toiColorBgHov: lighten($colorKey, 10%); +$toiColorFg: #ccc; +$toiColorFgHov: #fff; +$toiColorBgActive: lighten($colorKey, 20%); +$toiColorFgActive: $toiColorFgHov; +$toiW: 18px; // 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 6e0e24a3f41..5dca282f23e 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 @@ -273,11 +273,11 @@ .l-toi-holder { $c: $colorTimeCondTOIBg; $cHov: $toiColorBgHov; - $cPinned: rgba($toiColorBgPinned, 0.8); - $cPinnedHov: $toiColorBgPinned; + //$cPinned: rgba($toiColorBgPinned, 0.8); + //$cPinnedHov: $toiColorBgPinned; $linesVOffset: 2px; @include transform(translateX(-50%)); - color: $c; + //color: $c; top: 0px; bottom: 0px; width: $timeCondTOIIconD; @@ -288,7 +288,7 @@ &:after { // Vertical lines content: ''; - background-color: $c; + //background-color: $c; left: 50%; height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; width: 1px; @@ -340,7 +340,7 @@ } } - &.pinned { + /* &.pinned { //opacity: 1; z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button. &.active { @@ -369,7 +369,7 @@ content: $glyph-icon-x-in-circle; } } - } + }*/ } .l-time-conductor-controls { 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 275cdb7226b..84f669b7a89 100644 --- a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html @@ -100,20 +100,12 @@
-
-
-
2016-09-15 21:31:30.000Z
-
-
-
+
+
2016-09-15 21:31:30.000Z
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index 912ea2afb8f..84df83850f1 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -78,22 +78,11 @@
-
+
-
- Z000.04:45:00 71-90-6102 - -
-
-
- -
- Z000.04:45:00 71-90-6102 - -
+