From b392633bc63ac507e5aff1ad24dd2bb928e6484f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 20 Jul 2016 15:48:22 -0700 Subject: [PATCH] [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)"> + +