From 32f7bc86af17ac8fcba700be1e620e2b43b8cb69 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 8 Jul 2016 16:54:13 -0700 Subject: [PATCH] [Frontend] Styling for Time Conductor v2 Fixes #993 In-progress; class renaming continued, cleanups in markup file, in-page styles ported to scss --- .../general/res/sass/_archetypes.scss | 5 +- .../commonUI/general/res/sass/_constants.scss | 2 +- .../res/sass/controls/_time-controller.scss | 235 ++++++------------ .../templates/controls/time-controller.html | 6 +- .../themes/espresso/res/sass/_constants.scss | 2 +- .../res/templates/time-conductor.html | 109 +++----- 6 files changed, 122 insertions(+), 237 deletions(-) diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index 4abad717ea..d34973bf66 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -121,17 +121,18 @@ .l-flex-row { @include flex-direction(row); &.flex-elem { @include flex(1 1 auto); } - .flex-elem { + > .flex-elem { height: inherit; line-height: inherit; min-width: 0; + &.holder:not(:last-child) { margin-right: $interiorMargin; } } .flex-container { @include flex-direction(row); } } .l-flex-col { @include flex-direction(column); - .flex-elem { + > .flex-elem { min-height: 0; &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; } } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index bdd5120eab..b0d746bbb6 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: (33px, 18px, 20px); +$ueTimeControlH: (21px, 18px, 20px); /*************** Panes */ $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index ba2cf5b3ee..1c13199114 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -5,196 +5,109 @@ } } -.l-time-controller { +.l-time-conductor { $minW: 500px; $knobHOffset: 0px; - $knobM: ($sliderKnobW + $knobHOffset) * -1; $rangeValPad: $interiorMargin; $rangeValOffset: $sliderKnobW + $interiorMargin; - $timeRangeSliderLROffset: 150px + ($sliderKnobW * 2); - $r1H: nth($ueTimeControlH,1); // Not currently used + $r1H: nth($ueTimeControlH,1); $r2H: nth($ueTimeControlH,2); $r3H: nth($ueTimeControlH,3); + border-top: 1px solid $colorInteriorBorder; + padding-top: $interiorMargin; min-width: $minW; font-size: 0.8rem; + position: relative; - .l-time-range-inputs-holder, - .l-time-range-slider-holder, - .l-time-range-ticks-holder - { + >.l-row-elem { + // First order row elements box-sizing: border-box; + width: 100%; position: relative; &:not(:first-child) { margin-top: $interiorMargin; } } - .l-time-range-slider, - .l-time-range-ticks { - @include absPosDefault(0, visible); - left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset; - } - .l-time-range-inputs-holder { - border-top: 1px solid $colorInteriorBorder; - padding-top: $interiorMargin; - &.l-flex-row, - .l-flex-row { - @include align-items(center); - .flex-elem { - height: auto; - line-height: normal; - } - } - .type-icon { - font-size: 120%; - vertical-align: middle; - } - .l-time-range-input-w, - .l-time-range-inputs-elem { - margin-right: $interiorMargin; - .lbl { - color: $colorPlotLabelFg; - } - .ui-symbol.icon { - font-size: 11px; - } - } + .l-time-conductor-inputs-holder { + $inputW: 200px; + $ticksBlockerFadeW: 25px; + height: $r1H; + z-index: 1; .l-time-range-input-w { // Wraps a datetime text input field - position: relative; - input[type="text"] { - width: 200px; - &.picker-icon { - padding-right: 20px; - } + position: absolute; + width: $inputW + $ticksBlockerFadeW; + &.start-date { + @include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%)); } + + &.end-date { + @include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%)); + right: 0; + text-align: right; + } + + input[type="text"] { + width: $inputW; + } + .icon-calendar { position: absolute; - right: 5px; - top: 5px; + margin-left: -16px; + margin-top: 4px; } } } - .l-time-range-slider-holder { - height: $r2H; - .range-holder { - box-shadow: none; - background: none; - border: none; - .range { - .toi-line { - $myC: $timeControllerToiLineColor; - $myW: 8px; - @include transform(translateX(50%)); - position: absolute; - top: 0; right: 0; bottom: 0px; left: auto; - width: $myW; - height: auto; - z-index: 2; - &:before { - // Vert line - background-color: $myC; - position: absolute; - content: ""; - top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1; - width: 1px; - } - } - &:hover .toi-line { - @include toiLineHovEffects; - } - } - } - &:not(:active) { - .knob, - .range { - @include transition-property(left, right); - @include transition-duration(500ms); - @include transition-timing-function(ease-in-out); - } - } - } - - .l-time-range-ticks-holder { - height: $r3H; - .l-time-range-ticks { - border-top: 1px solid $colorTick; - .tick { - background-color: $colorTick; - border:none; - height: 5px; - width: 1px; - margin-left: -1px; - position: absolute; - &:first-child { - margin-left: 0; - } - .l-time-range-tick-label { - @include webkitProp(transform, translateX(-50%)); - color: $colorPlotLabelFg; - display: inline-block; - font-size: 0.7rem; - position: absolute; - top: 5px; - white-space: nowrap; - z-index: 2; - } - } - } - } - - .knob { - z-index: 2; - &:before { - $mTB: 2px; - $grippyW: 3px; - $mLR: ($sliderKnobW - $grippyW)/2; - @include bgStripes($c: pullForward($sliderColorKnob, 20%), $a: 1, $bgsize: 4px, $angle: 0deg); - content: ''; + .l-time-conductor-ticks { + $c: $colorTick; + height: $r1H; + margin-top: 0 !important; + mct-conductor-axis { display: block; - position: absolute; - top: $mTB; right: $mLR; bottom: $mTB; left: $mLR; + position: relative; + width: 100%; } - .range-value { - @include trans-prop-nice-fade(.25s); - font-size: 0.7rem; - position: absolute; - height: $r2H; - line-height: $r2H; - white-space: nowrap; - z-index: 1; - } - &:hover { - .range-value { - color: $sliderColorKnobHov; + + .l-axis-holder { + height: $r1H; + position: relative; + width: 100%; + svg { + stroke: $c; + width: 100%; height: 100%; + path {display: none;} + line {stroke: $c;} } - } - &.knob-l { - margin-left: $knobM; - .range-value { - text-align: right; - right: $rangeValOffset; - } - } - &.knob-r { - margin-right: $knobM; - .range-value { - left: $rangeValOffset; - } - &:hover + .range-holder .range .toi-line { - @include toiLineHovEffects; - } - } + } } + .l-data-visualization { + background: rgba($colorTick, 0.3); + height: $r2H; + } + .l-time-domain-selector { position: absolute; right: 0px; top: $interiorMargin; } +/* .super-menu.mode-selector-menu { + height: 200px; width: 400px; + .menu-item-description { + .desc-area.icon { + @include test(); + $h: 50px; + //font-size: 3em; + //height: $h; + //line-height: $h; + } + } + }*/ + } .s-time-range-val { @@ -206,18 +119,18 @@ /******************************************************************** MOBILE */ @include phoneandtablet { - .l-time-controller { + .l-time-conductor { min-width: 0; .l-time-range-slider-holder, - .l-time-range-ticks-holder { + .l-time-conductor-ticks { display: none; } } } @include phone { - .l-time-controller { - .l-time-range-inputs-holder { + .l-time-conductor { + .l-time-conductor-inputs-holder { &.l-flex-row, .l-flex-row { @include align-items(flex-start); @@ -227,7 +140,7 @@ margin-top: 3px; } } - .t-inputs-w { + .l-time-conductor-inputs-holder { @include flex-direction(column); .l-time-range-input-w:not(:first-child) { &:not(:first-child) { @@ -244,9 +157,9 @@ } @include phonePortrait { - .l-time-controller { - .l-time-range-inputs-holder { - .t-inputs-w { + .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 { diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index cd36236358..ed532029b2 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -20,10 +20,10 @@ at runtime from the About dialog for additional information. -->
-
C - + +
- .time-system .menu{ - bottom: 10px; - } - .l-data-availability { - width: 100%; - height: 20px; - background-color: #3b3b3b - } - - .l-time-range-inputs-elem { - width: 100%; - } - - .l-time-range-inputs-elem.l-flex-row { - justify-content: space-between; - } - .l-axis-holder { - height: 30px; - width: 100%; - } - - .l-axis-holder svg, .l-axis-holder svg path, - .l-axis-holder svg line { - stroke: #A0A0A0; - } - - -