From 06af84c161e9cb311aba072717891cd166722b9a Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jul 2016 13:14:32 -0700 Subject: [PATCH] [Frontend] Styling for Time Conductor v2 Fixes #933 In-progress: fixed SVG text color, field styling for fixed vs. real-time, markup cleanup --- .../commonUI/general/res/sass/_constants.scss | 3 +- .../commonUI/general/res/sass/_global.scss | 2 +- .../res/sass/controls/_time-conductor.scss | 159 ++++++++++++------ .../themes/espresso/res/sass/_constants.scss | 3 +- .../themes/snow/res/sass/_constants.scss | 3 +- .../res/templates/time-conductor.html | 136 +++++++-------- 6 files changed, 183 insertions(+), 123 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index b0d746bbb68..8e13b8d2bec 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px; $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; -$ueTimeControlH: (21px, 18px, 20px); +$ueTimeControlH: (25px, 18px, 20px); /*************** Panes */ $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; @@ -108,6 +108,7 @@ $bubbleMaxW: 300px; $reqSymbolW: 15px; $reqSymbolM: $interiorMargin * 2; $reqSymbolFontSize: 0.7em; +$inputTextP: 3px 5px; /*************** Wait Spinner Defaults */ $waitSpinnerD: 32px; $waitSpinnerTreeD: 20px; diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index f03aad1eb9e..573db14b4ba 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -66,7 +66,7 @@ input, textarea { input[type="text"], input[type="search"] { vertical-align: baseline; - padding: 3px 5px; + padding: $inputTextP; } h1, h2, h3 { diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 8ee9b0494de..5f25d1ba3ab 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -1,18 +1,18 @@ @mixin toiLineHovEffects() { - &:before, - &:after { - background-color: $timeControllerToiLineColorHov; - } + &:before, + &:after { + background-color: $timeControllerToiLineColorHov; + } } .l-time-conductor { - $minW: 500px; - $knobHOffset: 0px; - $rangeValPad: $interiorMargin; - $rangeValOffset: $sliderKnobW + $interiorMargin; - $r1H: nth($ueTimeControlH,1); - $r2H: nth($ueTimeControlH,2); - $r3H: nth($ueTimeControlH,3); + $minW: 500px; + $knobHOffset: 0px; + $rangeValPad: $interiorMargin; + $rangeValOffset: $sliderKnobW + $interiorMargin; + $r1H: nth($ueTimeControlH, 1); + $r2H: nth($ueTimeControlH, 2); + $r3H: nth($ueTimeControlH, 3); // Glyphs Todo: replace with refactored CSS approach when that is merged into master $glyphIconFixed: '\e604'; @@ -24,57 +24,75 @@ min-width: $minW; position: relative; - >.l-row-elem { + > .l-row-elem { // First order row elements - box-sizing: border-box; + box-sizing: border-box; width: 100%; position: relative; - &:not(:first-child) { - margin-top: $interiorMargin; + } + + .mode-selector .s-menu-btn, + .time-delta { + &:before { + @extend .ui-symbol; + margin-right: $interiorMarginSm; } - } + } + + .time-delta { + &:before { + color: $colorTimeCondKeyBg; + } + } .l-time-conductor-inputs-holder, .l-time-conductor-ticks { font-size: 0.8rem; } - .l-time-conductor-inputs-holder { - $inputW: 180px; - $ticksBlockerFadeW: 25px; + .l-time-conductor-inputs-holder { + $trInputW: 180px; + $hmInputW: 80px; + $ticksBlockerFadeW: 50px; $iconCalendarW: 16px; $wBgColor: $colorBodyBg; - //$wBgColor: green; - $wBgW: $inputW + $interiorMargin + $iconCalendarW; height: $r1H; z-index: 1; - .l-time-range-input-w { + .l-time-range-w { // Wraps a datetime text input field + height: 100%; position: absolute; - width: $wBgW + $ticksBlockerFadeW; - &.start-date { - @include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%)); + &.start-w { + @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW)); + padding-right: $ticksBlockerFadeW; } - &.end-date { - @include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%)); + &.end-w { + @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW)); + padding-left: $ticksBlockerFadeW; right: 0; text-align: right; } input[type="text"] { - width: $inputW; + @include trans-prop-nice(padding, 250ms); + } + .time-range-input input { + width: $trInputW; + } + .hrs-min-input input { + width: $hmInputW; } .icon-calendar { margin-top: 4px; } } - } + } - .l-time-conductor-ticks { + .l-time-conductor-ticks { $c: $colorTick; - height: $r1H; + height: $r1H; mct-conductor-axis { - @include transform(translateY(3px)); + //@include transform(translateY(1px)); display: block; position: relative; width: 100%; @@ -85,27 +103,30 @@ width: 100%; svg { text-rendering: geometricPrecision; - width: 100%; height: 100%; + width: 100%; + height: 100%; > g { font-size: 0.9em; } - path {display: none;} - line {stroke: $c;} - text { fill: $c; } + path { + display: none; + } + line { + stroke: $c; + } + text { + fill: $c; + } } } - } + } .l-data-visualization { background: rgba($colorTick, 0.3); height: $r2H; } - .mode-selector .s-menu-btn { - &:before { - @extend .ui-symbol; - margin-right: $interiorMarginSm; - content: $glyphIconFixed; - } + .l-time-conductor-controls { + margin-top: $interiorMargin; } // Realtime, latest modes @@ -113,10 +134,19 @@ &.latest-mode { .l-time-conductor-inputs-holder { .l-time-range-input-w { - input:not(:hover) { + input[type="text"]:not(.error) { background: transparent; box-shadow: none; border-radius: 0; + padding-left: 0; + padding-right: 0; + &:hover { + @include nice-input(); + padding: $inputTextP; + } + } + &.start-date { + pointer-events: none; } .icon-calendar { display: none; @@ -128,21 +158,42 @@ } .l-data-visualization { - background: rgba($colorTimeCondKey, 0.5) !important + background: rgba($colorTimeCondKeyBg, 0.5) !important } .mode-selector .s-menu-btn { - @include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma)); + @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg); + } + } + &.fixed-mode { + $i: $glyphIconFixed; + .mode-selector .s-menu-btn:before { + content: $i; + } + } + &.realtime-mode { + $i: $glyphIconRealtime; + .time-delta:before { + content: $i; + } + .mode-selector .s-menu-btn:before { + content: $i; + } + } + &.latest-mode { + $i: $glyphIconLatest; + .time-delta:before { + content: $i; + } + .mode-selector .s-menu-btn:before { + content: $i; } } - - &.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; } - &.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; } } .s-time-range-val { - border-radius: $controlCr; - background-color: $colorInputBg; - padding: 1px 1px 0 $interiorMargin; + border-radius: $controlCr; + background-color: $colorInputBg; + padding: 1px 1px 0 $interiorMargin; } /******************************************************************** MOBILE */ @@ -178,7 +229,9 @@ margin-right: 0; } .l-time-range-inputs-elem { - &.lbl { display: none; } + &.lbl { + display: none; + } } } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 82eb282bea5..53322823013 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1; $colorLoadingBg: rgba($colorBodyFg, 0.2); // Time Conductor -$colorTimeCondKey: #1d7a96; \ No newline at end of file +$colorTimeCondKeyBg: #1d7a96; +$colorTimeCondKeyFg: #fff; \ No newline at end of file diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 8d08a897dad..5416e91e584 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1; $colorLoadingBg: rgba($colorLoadingFg, 0.1); // Time Conductor -$colorTimeCondKey: #0092b3; +$colorTimeCondKeyBg: #0092b3; +$colorTimeCondKeyFg: #fff; diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index b140c0fda1e..081b9812200 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -1,71 +1,75 @@ -
- - - - - - - - - - - - - - - - - + + + + + + + - + + + + + + + + + + + + + + + + + + + +
@@ -74,7 +78,7 @@
-
+