From 1a534301c5d43b4929809d433e912f6982e99595 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 13 Oct 2016 11:42:10 -0700 Subject: [PATCH] [Frontend] Refactor TOI element Fixes #933 Fixes #1193 WIP; TOI as mct-include; layout uses flex-box; preparing to move TOI sass into conductor-v2 directory; --- .../res/sass/controls/_time-of-interest.scss | 138 ++++++++++++------ .../themes/espresso/res/sass/_constants.scss | 2 +- .../features/conductor-v2/conductor/bundle.js | 6 + .../res/sass/_time-conductor-base.scss | 34 ----- .../res/templates/time-conductor.html | 13 +- .../res/templates/time-of-interest.html | 27 ++++ .../features/plot/res/templates/plot.html | 13 +- 7 files changed, 126 insertions(+), 107 deletions(-) create mode 100644 platform/features/conductor-v2/conductor/res/templates/time-of-interest.html 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 b27ea34e10..dcb9ce28f5 100644 --- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss +++ b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss @@ -23,8 +23,7 @@ .l-toi-holder, .l-toi-holder:after, .l-toi-holder:before, -.l-toi, -.l-toi-val { +.l-toi { display: block; position: absolute; } @@ -58,21 +57,66 @@ top: 0; bottom: 0; width: 2px; + z-index: 2; } .l-toi { - // Holds clock icon and resync and unpin buttons - @include trans-prop-nice($props: width, $dur: 250ms); - border-radius: $controlCr; + // Holds buttons and val. Acts as a blocking element. + @extend .l-flex-row; + @include transform(translateY(-50%)); + background: blue; // $toiColorBlocker; + align-items: center; box-sizing: content-box; height: $toiH; left: $toiPadLR * -1; - line-height: $toiH; - overflow: hidden; - padding: $toiPadLR $toiPadLR; - font-size: $toiH; - width: $toiH; - white-space: nowrap; + top: 50%; + padding: $toiPadLR $toiPadLR $toiPadLR 0; + 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; + overflow: hidden; + white-space: nowrap; + width: $toiH; + + &:hover { + // Expand and display controls; clock icon changes to resync + background-color: $toiColorBg; + cursor: pointer; + width: 30px; + //z-index: 2; + + .icon-button { + color: rgba($toiColorCtrlFg, 0.5); + opacity: 1; + &:hover { + color: $toiColorCtrlFg; + } + &.t-button-unpin:hover { + color: $toiColorBgAlert; + } + } + + .t-button-resync:before { + content: $glyph-icon-resync; + } + + & + .l-toi-val { + // Dim the value to emphasize the controls + opacity: 0.5; + } + } + } + // Holds clock icon and resync and unpin buttons + //left: $toiPadLR * -1; + .icon-button { color: $toiColorBg; } @@ -85,34 +129,6 @@ @extend .icon-x-in-circle; float: right; opacity: 0; - - } - &:hover { - // Expand and display controls; clock icon changes to resync - background-color: $toiColorBg; - cursor: pointer; - width: 30px; - z-index: 2; - - .icon-button { - color: rgba($toiColorCtrlFg, 0.5); - opacity: 1; - &:hover { - color: $toiColorCtrlFg; - } - &.t-button-unpin:hover { - color: $toiColorBgAlert; - } - } - - .t-button-resync:before { - content: $glyph-icon-resync; - } - - & + .l-toi-val { - // Dim the value to emphasize the controls - opacity: 0.5; - } } } @@ -123,6 +139,7 @@ &.show-val { .l-toi-val { $tbP: 1px; + @extend .flex-elem; @include trans-prop-nice($props: opacity, $dur: 150ms); background-color: $toiColorBg; border-radius: $controlCr; @@ -132,9 +149,9 @@ font-size: 0.7rem; font-weight: 400; height: $toiH; - right: $toiH + $interiorMarginSm; - top: 50%; - @include transform(translateY(-50%)); + //right: $toiH + $interiorMarginSm; + //top: 50%; + //@include transform(translateY(-50%)); line-height: $toiH; padding: $tbP $p; white-space: nowrap; @@ -210,20 +227,45 @@ table { .l-toi, .l-toi-val { - @include transform(translateY(100%)); + //@include transform(translateY(100%)); } .l-toi { - bottom: $toiPadLR - 1; - z-index: 2; + //bottom: $toiPadLR - 1; + //z-index: 2; } .l-toi-val { - top: auto; - bottom: 0; - z-index: 1; + //top: auto; + //bottom: 0; + //z-index: 1; } } } +} + +// TOI in Time Conductor +.l-time-conductor { + .l-toi-holder { + $linesVOffset: 2px; + &:before, + &:after { + // Vertical lines + border-left-style: solid; + //height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; + } + + &:before { + @include transform(translate(-50%, $linesVOffset * -1)); + top: 0px; + bottom: auto; + } + + &:after { + @include transform(translate(-50%, $linesVOffset)); + top: auto; + bottom: 0px; + } + } } \ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 5e561883d1..5ff8db6126 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -110,7 +110,7 @@ $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: 5px; +$toiPadLR: 4px; // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #ccc; diff --git a/platform/features/conductor-v2/conductor/bundle.js b/platform/features/conductor-v2/conductor/bundle.js index 916153aca1..ff94ca0f9b 100644 --- a/platform/features/conductor-v2/conductor/bundle.js +++ b/platform/features/conductor-v2/conductor/bundle.js @@ -31,6 +31,7 @@ define([ "text!./res/templates/time-conductor.html", "text!./res/templates/mode-selector/mode-selector.html", "text!./res/templates/mode-selector/mode-menu.html", + "text!./res/templates/time-of-interest.html", "legacyRegistry" ], function ( TimeConductorViewService, @@ -43,6 +44,7 @@ define([ timeConductorTemplate, modeSelectorTemplate, modeMenuTemplate, + timeOfInterest, legacyRegistry ) { @@ -127,6 +129,10 @@ define([ { "key": "mode-selector", "template": modeSelectorTemplate + }, + { + "key": "time-of-interest", + "template": timeOfInterest } ], "representations": [ 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 90321f2cc6..f426a437cd 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 @@ -258,40 +258,6 @@ } } - // Time of Interest control - .l-toi-holder { - $linesVOffset: 2px; - &:before, - &:after { - // Vertical lines - border-left-style: solid; - left: 50%; - height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; - width: 1px; - z-index: 0; - } - - &:before { - @include transform(translate(-50%, $linesVOffset * -1)); - top: 0px; - bottom: auto; - } - - &:after { - @include transform(translate(-50%, $linesVOffset)); - top: auto; - bottom: 0px; - } - - .l-toi { - //height: $r2H; - //line-height: $r2H; - top: 50%; - @include transform(translateY(-50%)); - @include transform-origin(left center); - } - } - .l-time-conductor-controls { align-items: center; margin-top: $interiorMargin; 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 fb1359579a..b45dd089be 100644 --- a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html @@ -100,18 +100,7 @@ ng-click="toi.click($event)">
- -
-
- - -
- {{toi.toiText}} -
+
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 new file mode 100644 index 0000000000..18e897b504 --- /dev/null +++ b/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html @@ -0,0 +1,27 @@ + + + + +
+
+ + + + + {{toi.toiText}}2016-09-16 21:30:30 +
+
\ No newline at end of file diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index 12d2f66654..42f97a5972 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -71,18 +71,7 @@
- -
- - - - - 21:31:30 -
+