From c301523156f31569ed6b57cc998a4e631eb53808 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 9 May 2016 17:56:50 -0700 Subject: [PATCH] [Frontend] Layout and positioning fixes for TC controls open #889 IN PROGRESS - Smaller font used on range value; - More space allocated to left and right for slider range values; - Style tweaks to slider look; - Layout and style of datetime inputs fixed; - Input error colors fixed, moved to theme constants; --- .../commonUI/general/res/sass/_constants.scss | 2 +- .../commonUI/general/res/sass/_global.scss | 5 +- .../commonUI/general/res/sass/_mixins.scss | 4 +- .../general/res/sass/controls/_controls.scss | 2 +- .../res/sass/controls/_time-controller.scss | 46 +++++++++---------- .../templates/controls/datetime-field.html | 9 ++-- .../templates/controls/time-controller.html | 6 +-- .../themes/espresso/res/sass/_constants.scss | 4 +- .../themes/snow/res/sass/_constants.scss | 6 ++- 9 files changed, 44 insertions(+), 40 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 59fe5ed65c..a7abd1ac8b 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, 23px, 15px); +$ueTimeControlH: (33px, 15px, 15px); // Panes $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index be2f7014c1..f03aad1eb9 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -63,9 +63,10 @@ input, textarea { font-family: Helvetica, Arial, sans-serif; } -input[type="text"] { +input[type="text"], +input[type="search"] { vertical-align: baseline; - padding: 3px 5px !important; + padding: 3px 5px; } h1, h2, h3 { diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 02a3bb1583..663edb9762 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -322,13 +322,13 @@ color: $fg; outline: none; &.error { - background: rgba(red, 0.5); + background-color: $colorFormFieldErrorBg; + color: $colorFormFieldErrorFg; } } @mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) { @include input-base($bg, $fg); - padding: 0 $interiorMarginSm; } @mixin contextArrow() { diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 7177e87abe..6374efaaa0 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -29,7 +29,7 @@ .accordion-head { $op: 0.2; border-radius: $basicCr * 0.75; - box-sizing: "border-box"; + box-sizing: border-box; background: rgba($colorBodyFg, $op); cursor: pointer; font-size: 0.75em; diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index e8051b058f..88f79bdb1c 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -10,8 +10,8 @@ $knobHOffset: 0px; $knobM: ($sliderKnobW + $knobHOffset) * -1; $rangeValPad: $interiorMargin; - $rangeValOffset: $sliderKnobW; - $timeRangeSliderLROffset: 80px + ($sliderKnobW * 2); + $rangeValOffset: $sliderKnobW + $interiorMargin; + $timeRangeSliderLROffset: 150px + ($sliderKnobW * 2); $r1H: nth($ueTimeControlH,1); $r2H: nth($ueTimeControlH,2); $r3H: nth($ueTimeControlH,3); @@ -38,7 +38,6 @@ .l-time-range-inputs-holder { height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2); - //padding-top: $interiorMargin; border-top: 1px solid $colorInteriorBorder; &.l-flex-row { @include align-items(center); @@ -51,7 +50,7 @@ font-size: 120%; vertical-align: middle; } - .l-time-range-input, + .l-time-range-input-w, .l-time-range-inputs-elem { margin-right: $interiorMargin; .lbl { @@ -59,9 +58,23 @@ } .ui-symbol.icon { font-size: 11px; - width: 11px; } } + .l-time-range-input-w { + // Wraps a datetime text input field + position: relative; + input[type="text"] { + width: 200px; + &.picker-icon { + padding-right: 20px; + } + } + .icon-calendar { + position: absolute; + right: 5px; + top: 5px; + } + } } .l-time-range-slider-holder { @@ -80,26 +93,14 @@ width: $myW; height: auto; z-index: 2; - &:before, - &:after { - background-color: $myC; - //content: ""; - position: absolute; - } &:before { // Vert line + background-color: $myC; + position: absolute; content: ""; top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1; width: 1px; } -/* &:after { - // Circle element - border-radius: $myW; - @include transform(translateY(-50%)); - top: 50%; right: 0; bottom: auto; left: 0; - width: auto; - height: $myW; - }*/ } &:hover .toi-line { @include toiLineHovEffects; @@ -149,10 +150,10 @@ .range-value { @include trans-prop-nice-fade(.25s); font-size: 0.7rem; - padding: 0 $rangeValOffset; position: absolute; height: $r2H; - line-height: $r2H/2; + line-height: $r2H; + white-space: nowrap; z-index: 1; } &:hover { @@ -181,7 +182,7 @@ .l-time-domain-selector { position: absolute; right: 0px; - bottom: 43px; + bottom: $r2H + $r3H + $interiorMargin; } } @@ -272,7 +273,6 @@ } } - @include tablet { .l-time-controller { height: 17px; diff --git a/platform/commonUI/general/res/templates/controls/datetime-field.html b/platform/commonUI/general/res/templates/controls/datetime-field.html index 18eb9ec46d..e890843754 100644 --- a/platform/commonUI/general/res/templates/controls/datetime-field.html +++ b/platform/commonUI/general/res/templates/controls/datetime-field.html @@ -19,18 +19,17 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> - + - - diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index 91fe8099ee..2d617c951f 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -23,7 +23,7 @@
C - + to - + -   + diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index a17f8040c0..d1390c91a7 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -70,8 +70,10 @@ $colorCreateMenuText: $colorMenuFg; $colorCheck: $colorKey; $colorFormRequired: $colorAlt1; $colorFormValid: #33cc33; -$colorFormError: #cc0000; +$colorFormError: #990000; $colorFormInvalid: #ff3300; +$colorFormFieldErrorBg: $colorFormError; +$colorFormFieldErrorFg: rgba(#fff, 0.6); $colorFormLines: rgba(#fff, 0.1); $colorFormSectionHeader: rgba(#fff, 0.1); $colorInputBg: rgba(#000, 0.1); diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index fbb6cc8d87..bbd3a475be 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -36,7 +36,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5); $sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorBodyFg; -$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2; +$sliderKnobW: 10px; $sliderKnobR: 2px; $timeControllerToiLineColor: $colorBodyFg; $timeControllerToiLineColorHov: #0052b5; @@ -70,8 +70,10 @@ $colorCreateMenuText: $colorBodyFg; $colorCheck: $colorKey; $colorFormRequired: $colorKey; $colorFormValid: #33cc33; -$colorFormError: #cc0000; +$colorFormError: #990000; $colorFormInvalid: #ff2200; +$colorFormFieldErrorBg: $colorFormError; +$colorFormFieldErrorFg: rgba(#fff, 0.6); $colorFormLines: rgba(#000, 0.1); $colorFormSectionHeader: rgba(#000, 0.05); $colorInputBg: $colorGenBg;