From f641edbce712d8a5cbdc31d4a00b7669e557cd5b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 19 Jul 2016 18:33:24 -0700 Subject: [PATCH 1/5] [Frontend] Renew support for Time Conductor v1 Fixes #933 Time Conductors v1 and v2 now build and load their own isolated CSS files. All previous styling for TCv1 should be re-enabled. Note that Conductor v2 mobile is not complete yet. --- .../commonUI/general/res/sass/_constants.scss | 1 - platform/commonUI/general/res/sass/_main.scss | 1 - .../templates/controls/time-controller.html | 4 +- platform/features/conductor-v2/bundle.js | 5 + .../res/sass/time-conductor.scss} | 41 ++- platform/features/conductor/bundle.js | 5 + .../conductor/res/sass/time-conductor.scss | 298 ++++++++++++++++++ 7 files changed, 347 insertions(+), 8 deletions(-) rename platform/{commonUI/general/res/sass/controls/_time-conductor.scss => features/conductor-v2/res/sass/time-conductor.scss} (84%) create mode 100644 platform/features/conductor/res/sass/time-conductor.scss diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 3946d4f7067..8b537bbbad0 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -48,7 +48,6 @@ $uePaneMiniTabW: 10px; $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; -$ueTimeControlH: (25px, 6px, 20px); /*************** Panes */ $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index e0005788680..c3484033355 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -41,7 +41,6 @@ @import "controls/lists"; @import "controls/menus"; @import "controls/messages"; -@import "controls/time-conductor"; @import "mobile/controls/menus"; /********************************* FORMS */ diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index ed532029b2a..98c5de38e82 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -20,7 +20,7 @@ at runtime from the About dialog for additional information. -->
-
C @@ -86,7 +86,7 @@
-
+
Date: Wed, 20 Jul 2016 10:18:42 -0700 Subject: [PATCH 2/5] [Frontend] Renew support for Time Conductor v1 Fixes #933 Minor fixes to TCv1 for mobile --- platform/features/conductor/res/sass/time-conductor.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/platform/features/conductor/res/sass/time-conductor.scss b/platform/features/conductor/res/sass/time-conductor.scss index da14f4f0699..bc50b42da51 100644 --- a/platform/features/conductor/res/sass/time-conductor.scss +++ b/platform/features/conductor/res/sass/time-conductor.scss @@ -259,7 +259,8 @@ $ueTimeConductorH: (33px, 18px, 20px); margin-top: 3px; } } - .t-inputs-w { + .t-inputs-w, + .l-time-range-inputs-elem { @include flex-direction(column); .l-time-range-input-w:not(:first-child) { &:not(:first-child) { @@ -278,7 +279,8 @@ $ueTimeConductorH: (33px, 18px, 20px); @include phonePortrait { .l-time-controller { .l-time-range-inputs-holder { - .t-inputs-w { + .t-inputs-w, + .l-time-range-inputs-elem { @include flex(1 1 auto); padding-top: 25px; // Make room for the ever lovin' Time Domain Selector .flex-elem { From ff1678435eb135c4ef92c7fa9656a679a2c12751 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 20 Jul 2016 11:43:40 -0700 Subject: [PATCH 3/5] [Frontend] Time Conductor v2 styling Fixes #933 Changed desktop and mobile RT UI to display end datetime and hide start; WIP: mobile styling for main UI of TC; --- .../conductor-v2/res/sass/time-conductor.scss | 101 +++++++++--------- .../res/templates/time-conductor.html | 33 +++--- 2 files changed, 70 insertions(+), 64 deletions(-) diff --git a/platform/features/conductor-v2/res/sass/time-conductor.scss b/platform/features/conductor-v2/res/sass/time-conductor.scss index f345919cd6a..69e0e6f2de0 100644 --- a/platform/features/conductor-v2/res/sass/time-conductor.scss +++ b/platform/features/conductor-v2/res/sass/time-conductor.scss @@ -152,7 +152,7 @@ $ueTimeConductorH: (25px, 6px, 20px); } .l-time-conductor-inputs-holder, - .l-time-conductor-ticks, + .l-time-conductor-inputs-and-ticks, .l-time-conductor-zoom-w { font-size: 0.8rem; } @@ -165,6 +165,8 @@ $ueTimeConductorH: (25px, 6px, 20px); $wBgColor: $colorBodyBg; height: $r1H; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; z-index: 1; .l-time-range-w { // Wraps a datetime text input field @@ -195,7 +197,7 @@ $ueTimeConductorH: (25px, 6px, 20px); } } - .l-time-conductor-ticks { + .l-time-conductor-inputs-and-ticks { $c: $colorTick; height: $r1H; mct-conductor-axis { @@ -286,15 +288,20 @@ $ueTimeConductorH: (25px, 6px, 20px); padding: $inputTextP; } } - &.start-date { - pointer-events: none; - } .icon-calendar { display: none; } - &.end-date { + &.start-date { display: none; } + &.end-date { + pointer-events: none; + input[type="text"] { + color: $colorTimeCondKeyBg; + margin-right: $interiorMargin; + text-align: right; + } + } } } @@ -346,64 +353,62 @@ $ueTimeConductorH: (25px, 6px, 20px); /******************************************************************** MOBILE */ -@include phoneandtablet { +//@include phoneandtablet {} + +@include phone { .l-time-conductor { min-width: 0; - .l-time-range-slider-holder, - .l-time-conductor-ticks { - display: none; - } + .l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; } + //TODO: mode menu smaller, hide right side } } -@include phone { +@include phonePortrait { .l-time-conductor { - .l-time-conductor-inputs-holder { - &.l-flex-row, - .l-flex-row { - @include align-items(flex-start); - } - .l-time-range-inputs-elem { - &.type-icon { - margin-top: 3px; - } - } + .l-data-visualization, + .l-time-conductor-zoom-w, + .time-delta { + display: none; + } + + .l-time-conductor-inputs-and-ticks { + height: auto !important; .l-time-conductor-inputs-holder { - @include flex-direction(column); - .l-time-range-input-w:not(:first-child) { + position: relative; + height: auto !important; + + .l-time-range-w { + background-image: none !important; + display: block; + height: auto !important; + padding: 0 !important; + position: relative; + text-align: left; &:not(:first-child) { margin-top: $interiorMargin; } - margin-right: 0; - } - .l-time-range-inputs-elem { - &.lbl { - display: none; - } } } } - } -} -@include phonePortrait { - .l-time-conductor { - .l-time-conductor-inputs-holder { - .l-time-conductor-inputs-holder { - @include flex(1 1 auto); - padding-top: 25px; // Make room for the ever lovin' Time Domain Selector - .flex-elem { - @include flex(1 1 auto); - width: 100%; - } - input[type="text"] { - width: 100%; + // Realtime, latest modes + &.realtime-mode, + &.latest-mode { + // TODO: hide all of start-w + .l-time-conductor-inputs-and-ticks { + .l-time-range-w { + &.start-w { + display: none; + } + &.end-w { + margin-top: 0; + .end-date input[type="text"] { + margin: 0; + text-align: left; + } + } } } } } - .l-time-domain-selector { - right: auto; - left: 20px; - } } diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index 74c51971a61..de718efd902 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -9,8 +9,8 @@
-
- + @@ -28,6 +28,7 @@ + - - - - - - + + + + + + From b392633bc63ac507e5aff1ad24dd2bb928e6484f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 20 Jul 2016 15:48:22 -0700 Subject: [PATCH 4/5] [Frontend] Time Conductor v2 styling Fixes #933 WIP: Significant mobile and desktop style tweaks; moved constants into their own include file; --- .../conductor-v2/res/sass/_constants.scss | 3 + .../conductor-v2/res/sass/time-conductor.scss | 117 +++++++++++------- .../res/templates/time-conductor.html | 2 + 3 files changed, 79 insertions(+), 43 deletions(-) create mode 100644 platform/features/conductor-v2/res/sass/_constants.scss diff --git a/platform/features/conductor-v2/res/sass/_constants.scss b/platform/features/conductor-v2/res/sass/_constants.scss new file mode 100644 index 00000000000..ab49e274f4b --- /dev/null +++ b/platform/features/conductor-v2/res/sass/_constants.scss @@ -0,0 +1,3 @@ +$ueTimeConductorH: (25px, 15px, 20px); +$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs +$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00 \ No newline at end of file diff --git a/platform/features/conductor-v2/res/sass/time-conductor.scss b/platform/features/conductor-v2/res/sass/time-conductor.scss index 69e0e6f2de0..df0866e88ef 100644 --- a/platform/features/conductor-v2/res/sass/time-conductor.scss +++ b/platform/features/conductor-v2/res/sass/time-conductor.scss @@ -20,7 +20,6 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ @import "bourbon"; - @import "../../../../commonUI/general/res/sass/constants"; @import "../../../../commonUI/general/res/sass/mixins"; @import "../../../../commonUI/general/res/sass/mobile/constants"; @@ -28,8 +27,7 @@ @import "../../../../commonUI/themes/espresso/res/sass/constants"; @import "../../../../commonUI/themes/espresso/res/sass/mixins"; @import "../../../../commonUI/general/res/sass/icons"; - -$ueTimeConductorH: (25px, 6px, 20px); +@import "constants"; @mixin toiLineHovEffects() { &:before, @@ -158,38 +156,48 @@ $ueTimeConductorH: (25px, 6px, 20px); } .l-time-conductor-inputs-holder { - $trInputW: 180px; - $hmInputW: 60px; $ticksBlockerFadeW: 50px; $iconCalendarW: 16px; $wBgColor: $colorBodyBg; height: $r1H; position: absolute; - top: 0; right: 0; bottom: 0; left: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; z-index: 1; .l-time-range-w { // Wraps a datetime text input field height: 100%; position: absolute; + .title { + display: inline-block; + margin-right: $interiorMarginSm; + } &.start-w { @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW)); padding-right: $ticksBlockerFadeW; + .title:before { + content: 'Start'; + } } &.end-w { @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW)); padding-left: $ticksBlockerFadeW; right: 0; - text-align: right; + .title:before { + content: 'End'; + } } input[type="text"] { @include trans-prop-nice(padding, 250ms); } - .time-range-input input { - width: $trInputW; + .time-range-input input[type="text"] { + width: $timeCondInputTimeSysDefW; } - .hrs-min-input input { - width: $hmInputW; + .hrs-min-input input[type="text"] { + width: $timeCondInputDeltaDefW; } .icon-calendar { margin-top: 4px; @@ -250,18 +258,13 @@ $ueTimeConductorH: (25px, 6px, 20px); color: $colorTick; } } - } - // Fixed - &.fixed-mode { - .time-conductor-icon div[class*="hand"] { - &.hand-little { - @include transform(rotate(120deg)); - } - } + + .l-data-visualization { + background: $colorTimeCondDataVisRtBg !important } - // Realtime, latest modes + // Real-time, latest modes &.realtime-mode, &.latest-mode { .time-conductor-icon { @@ -297,69 +300,92 @@ $ueTimeConductorH: (25px, 6px, 20px); &.end-date { pointer-events: none; input[type="text"] { - color: $colorTimeCondKeyBg; + color: pullForward($colorTimeCondKeyBg, 5%); margin-right: $interiorMargin; - text-align: right; + tab-index: -1; } } } } - &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); } - &.latest-mode .time-conductor-icon div[class*="hand"] { - @include animation-name(clock-hands-sticky); - &.hand-big { @include animation-duration(5s); } - &.hand-little { @include animation-duration(60s); } - } - - .l-data-visualization { - background: $colorTimeCondDataVisRtBg !important - } .mode-selector .s-menu-btn { @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg); } } + + // Fixed mode &.fixed-mode { $i: $glyphIconFixed; + .time-conductor-icon div[class*="hand"] { + &.hand-little { + @include transform(rotate(120deg)); + } + } .mode-selector .s-menu-btn:before { content: $i; } } + + // Realtime mode &.realtime-mode { $i: $glyphIconRealtime; + .time-conductor-icon div[class*="hand"] { + @include animation-name(clock-hands); + } .time-delta:before { content: $i; } + .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before { + content: 'Now'; + } .mode-selector .s-menu-btn:before { content: $i; } } + + // LAD mode &.latest-mode { $i: $glyphIconLatest; + .time-conductor-icon div[class*="hand"] { + @include animation-name(clock-hands-sticky); + &.hand-big { + @include animation-duration(5s); + } + &.hand-little { + @include animation-duration(60s); + } + } .time-delta:before { content: $i; } + .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before { + content: 'LAD'; + } .mode-selector .s-menu-btn:before { content: $i; } } } -.s-time-range-val { - border-radius: $controlCr; - background-color: $colorInputBg; - padding: 1px 1px 0 $interiorMargin; -} - /******************************************************************** MOBILE */ -//@include phoneandtablet {} +@include phoneandtablet { + .l-time-conductor-holder { min-width: 0 !important; } + .super-menu.mini { + width: 200px; + height: 100px; + .pane.menu-item-description { + display: none; + } + } +} @include phone { .l-time-conductor { min-width: 0; - .l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; } - //TODO: mode menu smaller, hide right side + .l-time-conductor-inputs-and-ticks mct-conductor-axis { + display: none; + } } } @@ -387,16 +413,21 @@ $ueTimeConductorH: (25px, 6px, 20px); &:not(:first-child) { margin-top: $interiorMargin; } + .title { + width: 30px; + } } } } - // Realtime, latest modes + // Real-time, latest modes &.realtime-mode, &.latest-mode { - // TODO: hide all of start-w .l-time-conductor-inputs-and-ticks { .l-time-range-w { + .title { + width: 30px; + } &.start-w { display: none; } diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index de718efd902..257e16004de 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -14,6 +14,7 @@ ng-submit="tcController.updateBoundsFromForm(formModel)"> + + + \ No newline at end of file diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf index 9e1521d16b0b4aae8cb9059e3fce054d5838008c..f7e657046be037c8509bd56f31dec7923be37de7 100755 GIT binary patch delta 313 zcmZ3JIU#F;a(yxb1EUNO`=lop7cej|2rw`(WdLc8^qk7Htv9^5fPA31?w^d*#1yX1 z^UVwl201`^vkagB`vDeJAb$yvuac2lQqjc0auLWs0W@zyPJVKt$R18L1_q-Dp!})a z#EJrjB8D;s24fWT<^v4;3TmTo-N)(1z+m_TD1Rb1 zv7&&XkfDr$!RP>xuaK9Rn<{@r>}?!S-~mv>s)GFD5(Z|V6oX06#2x1ul_z&FPG(gA z3NcPrWb)XY!NjXO`J(<}nauu4zvKCBzA|vLfK)SFF3vs)qbE-=FlS8Oe8QlcadNoP R3HA#Nj6kX6&05CK7yQ3y z6x+kVp!)}ex8CsL%1BL2VPG)W0aRlK!d#u_n=^odK(P-%z6uDlA7D|<$StX0U@#P6 zU|^g8!c8137jyEHf$EHw0M(oVVUazYYPpFOKzp@}fdqpB7#A^=C#>9&nl5z{I+FD-(|{KNADP{{t)x%m*0w zL8eVs&{7m-b~pe8{)L5qKSF5#1Iz~|3-F0gKB&J~X6cNL#_{|%Um3VrfVML*T;6)L u5k^mLFfeCK*}TJ`n{l$e(HYSVV*h|rj6j^iP{P0qQU(q|;m!KSCm8|C1z%GD delta 308 zcmcbU^&?ZP+~3WOfsp|SOnxwMgXuL4Op^BO53s0YW9Afr)kVRwf?Z$+8BEWitCG{f_6i z`O3h}0yK|-;c{{INf -
+
@@ -80,7 +80,7 @@
-
+