From cae85f3e30c32c79ca19c5e7ebb3750e09962a3f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 9 May 2016 10:16:54 -0700 Subject: [PATCH 1/8] [Frontend] Mods to slider .range-value elems open #889 - Text smaller, line breaks; - Height adjustments - Increased with of slider area; --- .../commonUI/general/res/sass/_constants.scss | 2 +- .../general/res/sass/controls/_controls.scss | 4 +-- .../res/sass/controls/_time-controller.scss | 27 +++++++++++-------- .../themes/espresso/res/sass/_constants.scss | 3 ++- .../themes/snow/res/sass/_constants.scss | 3 ++- 5 files changed, 23 insertions(+), 16 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 659025960f..59fe5ed65c 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, 20px, 20px); +$ueTimeControlH: (33px, 23px, 15px); // Panes $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index a2bb0b73bb..7177e87abe 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -404,11 +404,11 @@ body.desktop .object-header { left: auto; } .knob-l { - @include border-left-radius($sliderKnobW); + @include border-left-radius($sliderKnobR); cursor: w-resize; } .knob-r { - @include border-right-radius($sliderKnobW); + @include border-right-radius($sliderKnobR); cursor: e-resize; } .range { diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index f6201d60cf..b9d7e26b0e 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -11,7 +11,7 @@ $knobM: ($sliderKnobW + $knobHOffset) * -1; $rangeValPad: $interiorMargin; $rangeValOffset: $sliderKnobW; - $timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset; + $timeRangeSliderLROffset: 80px + ($sliderKnobW * 2); $r1H: nth($ueTimeControlH,1); $r2H: nth($ueTimeControlH,2); $r3H: nth($ueTimeControlH,3); @@ -76,22 +76,23 @@ &:before, &:after { background-color: $myC; - content: ""; + //content: ""; position: absolute; } &:before { // Vert line + content: ""; top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1; - width: 2px; + width: 1px; } - &:after { +/* &: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; @@ -126,9 +127,9 @@ @include webkitProp(transform, translateX(-50%)); color: $colorPlotLabelFg; display: inline-block; - font-size: 0.9em; + font-size: 0.7rem; position: absolute; - top: 8px; + top: 5px; white-space: nowrap; z-index: 2; } @@ -140,14 +141,18 @@ z-index: 2; .range-value { @include trans-prop-nice-fade(.25s); + //background: rgba(red, 0.4); + font-size: 0.7rem; padding: 0 $rangeValOffset; position: absolute; height: $r2H; - line-height: $r2H; - white-space: nowrap; + line-height: $r2H/2; + z-index: 1; } - &:hover .range-value { - color: $sliderColorKnobHov; + &:hover { + .range-value { + color: $sliderColorKnobHov; + } } &.knob-l { margin-left: $knobM; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 729a813a12..a17f8040c0 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -36,7 +36,8 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6); $sliderColorKnobHov: $sliderColorBase; $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorKeyFg; -$sliderKnobW: nth($ueTimeControlH,2)/2; +$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2; +$sliderKnobR: 2px; $timeControllerToiLineColor: #00c2ff; $timeControllerToiLineColorHov: #fff; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 0d8430a7ec..fbb6cc8d87 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -36,7 +36,8 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5); $sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorBodyFg; -$sliderKnobW: nth($ueTimeControlH,2)/2; +$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2; +$sliderKnobR: 2px; $timeControllerToiLineColor: $colorBodyFg; $timeControllerToiLineColorHov: #0052b5; From 2e8604e18d7995528c9ab288b968326e9f8e828f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 9 May 2016 10:38:18 -0700 Subject: [PATCH 2/8] [Frontend] Layout and positioning fixes for TC controls open #889 --- .../general/res/sass/controls/_time-controller.scss | 12 +++++++++--- .../res/templates/controls/time-controller.html | 10 +++++----- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index b9d7e26b0e..e8051b058f 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -38,8 +38,15 @@ .l-time-range-inputs-holder { height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2); - padding-top: $interiorMargin; + //padding-top: $interiorMargin; border-top: 1px solid $colorInteriorBorder; + &.l-flex-row { + @include align-items(center); + .flex-elem { + height: auto; + line-height: normal; + } + } .type-icon { font-size: 120%; vertical-align: middle; @@ -141,7 +148,6 @@ z-index: 2; .range-value { @include trans-prop-nice-fade(.25s); - //background: rgba(red, 0.4); font-size: 0.7rem; padding: 0 $rangeValOffset; position: absolute; @@ -175,7 +181,7 @@ .l-time-domain-selector { position: absolute; right: 0px; - bottom: 46px; + bottom: 43px; } } diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index 281447e251..91fe8099ee 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 - + C + to + to - + - + - - 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; From 8788523c25019255e14b3fe8ddd42264214fe359 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 10 May 2016 14:28:23 -0700 Subject: [PATCH 4/8] [Frontend] Tweaks to slider knobs open #889 - Knob size increased; - Knob grippies added; --- platform/commonUI/general/res/sass/_mixins.scss | 11 +++++++++++ .../general/res/sass/controls/_time-controller.scss | 12 ++++++++++++ .../themes/espresso/res/sass/_constants.scss | 4 ++-- .../commonUI/themes/snow/res/sass/_constants.scss | 6 +++--- 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 663edb9762..d7fa694100 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -139,6 +139,17 @@ background-size: $d $d; } +@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) { + @include background-image(linear-gradient($angle, + rgba($c, $a) 25%, transparent 25%, + transparent 50%, rgba($c, $a) 50%, + rgba($c, $a) 75%, transparent 75%, + transparent 100% + )); + background-repeat: repeat; + background-size: $bgsize $bgsize; +} + @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) { @include background-image(linear-gradient(-90deg, rgba($c, $a) 0%, rgba($c, $a) 50%, diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index 88f79bdb1c..c8a52bdce3 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -147,6 +147,16 @@ .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: ''; + display: block; + position: absolute; + top: $mTB; right: $mLR; bottom: $mTB; left: $mLR; + } .range-value { @include trans-prop-nice-fade(.25s); font-size: 0.7rem; @@ -193,6 +203,8 @@ padding: 1px 1px 0 $interiorMargin; } +/******************************************************************** MOBILE */ + @include phoneandtablet { .l-time-controller, .l-time-range-inputs-holder { min-width: 0px; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index d1390c91a7..c6fd55e8ca 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -32,11 +32,11 @@ $sliderColorBase: $colorKey; $sliderColorRangeHolder: rgba(black, 0.1); $sliderColorRange: rgba($sliderColorBase, 0.3); $sliderColorRangeHov: rgba($sliderColorBase, 0.5); -$sliderColorKnob: rgba($sliderColorBase, 0.6); +$sliderColorKnob: pushBack($sliderColorBase, 15%); $sliderColorKnobHov: $sliderColorBase; $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorKeyFg; -$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2; +$sliderKnobW: 15px; $sliderKnobR: 2px; $timeControllerToiLineColor: #00c2ff; $timeControllerToiLineColorHov: #fff; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index bbd3a475be..f85b5c328f 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -32,11 +32,11 @@ $sliderColorBase: $colorKey; $sliderColorRangeHolder: rgba(black, 0.07); $sliderColorRange: rgba($sliderColorBase, 0.2); $sliderColorRangeHov: rgba($sliderColorBase, 0.4); -$sliderColorKnob: rgba($sliderColorBase, 0.5); +$sliderColorKnob: pushBack($sliderColorBase, 20%); $sliderColorKnobHov: rgba($sliderColorBase, 0.7); -$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); +$sliderColorRangeValHovBg: $sliderColorRange; $sliderColorRangeValHovFg: $colorBodyFg; -$sliderKnobW: 10px; +$sliderKnobW: 15px; $sliderKnobR: 2px; $timeControllerToiLineColor: $colorBodyFg; $timeControllerToiLineColorHov: #0052b5; From 7ade873365ac842a67c5873d5cdde9dc183610fd Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 10 May 2016 15:12:50 -0700 Subject: [PATCH 5/8] [Frontend] Flex; Tweaks to slider knobs open #889 - Converted TC elements to use flex layout instead of abs pos; - Knob size increased; - Knob grippies added; --- .../commonUI/general/res/sass/_constants.scss | 2 +- .../res/sass/controls/_time-controller.scss | 16 ++++++++-------- .../general/res/sass/user-environ/_layout.scss | 8 ++++---- .../res/templates/controls/time-controller.html | 8 ++++---- .../themes/espresso/res/sass/_constants.scss | 4 ++-- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index a7abd1ac8b..c36a6cb00a 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, 15px, 15px); +$ueTimeControlH: (33px, 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 c8a52bdce3..bf6568508c 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -12,23 +12,23 @@ $rangeValPad: $interiorMargin; $rangeValOffset: $sliderKnobW + $interiorMargin; $timeRangeSliderLROffset: 150px + ($sliderKnobW * 2); - $r1H: nth($ueTimeControlH,1); + $r1H: nth($ueTimeControlH,1); // Not currently used $r2H: nth($ueTimeControlH,2); $r3H: nth($ueTimeControlH,3); - display: block; - height: $r1H + $r2H + $r3H + ($interiorMargin * 2); min-width: $minW; font-size: 0.8rem; - .l-time-range-inputs-holder, .l-time-range-slider-holder, .l-time-range-ticks-holder { - @include absPosDefault(0, visible); box-sizing: border-box; - top: auto; + position: relative; + //top: auto; + &:not(:first-child) { + margin-top: $interiorMargin; + } } .l-time-range-slider, .l-time-range-ticks { @@ -37,8 +37,8 @@ } .l-time-range-inputs-holder { - height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2); border-top: 1px solid $colorInteriorBorder; + padding-top: $interiorMargin; &.l-flex-row { @include align-items(center); .flex-elem { @@ -78,7 +78,7 @@ } .l-time-range-slider-holder { - height: $r2H; bottom: $r3H + ($interiorMarginSm * 1); + height: $r2H; .range-holder { box-shadow: none; background: none; diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 99d8fb9d14..9e8e9aaae1 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -194,7 +194,7 @@ body.desktop .pane .mini-tab-icon.toggle-pane { .holder.holder-treeview-elements { top: $bodyMargin; right: 0; - bottom: $bodyMargin; + bottom: $interiorMargin; left: $bodyMargin; .create-btn-holder { &.s-status-editing { @@ -215,17 +215,17 @@ body.desktop .pane .mini-tab-icon.toggle-pane { left: 0; .holder-object { top: $bodyMargin; - bottom: $bodyMargin; + bottom: $interiorMargin; } .holder-inspector { top: $bodyMargin; - bottom: $bodyMargin; + bottom: $interiorMargin; left: $bodyMargin; right: $bodyMargin; } .holder-elements { top: 0; - bottom: $bodyMargin; + bottom: $interiorMargin; left: $bodyMargin; right: $bodyMargin; } diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index 2d617c951f..3ac4542644 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -19,8 +19,8 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
- + C @@ -54,7 +54,7 @@ -
+
@@ -85,7 +85,7 @@
-
+
Date: Tue, 10 May 2016 19:52:11 -0700 Subject: [PATCH 6/8] [Frontend] Time Conductor mobile open #889 - Major refactoring of mobile approach, leveraging flex-box layout change; --- .../res/sass/controls/_time-controller.scss | 221 +++++------------- .../templates/controls/time-controller.html | 55 ++--- 2 files changed, 83 insertions(+), 193 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index bf6568508c..ba2cf5b3ee 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -25,7 +25,6 @@ { box-sizing: border-box; position: relative; - //top: auto; &:not(:first-child) { margin-top: $interiorMargin; } @@ -39,7 +38,8 @@ .l-time-range-inputs-holder { border-top: 1px solid $colorInteriorBorder; padding-top: $interiorMargin; - &.l-flex-row { + &.l-flex-row, + .l-flex-row { @include align-items(center); .flex-elem { height: auto; @@ -192,7 +192,7 @@ .l-time-domain-selector { position: absolute; right: 0px; - bottom: $r2H + $r3H + $interiorMargin; + top: $interiorMargin; } } @@ -206,172 +206,61 @@ /******************************************************************** MOBILE */ @include phoneandtablet { - .l-time-controller, .l-time-range-inputs-holder { - min-width: 0px; - } - - .l-time-controller { - - .l-time-domain-selector { - select { - height: 25px; - margin-bottom: 0px; - } - } - - .l-time-range-slider-holder, .l-time-range-ticks-holder { - display: none; - } - - .time-range-start, .time-range-end, { - width: 100%; - } - - .l-time-range-inputs-holder { - .l-time-range-input { - display: block; - .s-btn { - padding-right: 18px; - white-space: nowrap; - input { - width: 100%; - } - } - } - .l-time-range-inputs-elem { - - } - } - } + .l-time-controller { + min-width: 0; + .l-time-range-slider-holder, + .l-time-range-ticks-holder { + display: none; + } + } } @include phone { - .l-time-controller { - height: 48px; - - .l-time-range-inputs-holder { - bottom: 24px; - } - - .l-time-domain-selector { - width: 33%; - bottom: -9px; - } - - .l-time-range-inputs-holder { - .l-time-range-input { - margin-bottom: 5px; - .s-btn { - width: 66%; - } - } - .l-time-range-inputs-elem { - &.ui-symbol { - display: none; - } - - &.lbl { - width: 33%; - right: 0px; - top: 5px; - display: block; - height: 25px; - margin: 0; - line-height: 25px; - position: absolute; - } - } - } - } + .l-time-controller { + .l-time-range-inputs-holder { + &.l-flex-row, + .l-flex-row { + @include align-items(flex-start); + } + .l-time-range-inputs-elem { + &.type-icon { + margin-top: 3px; + } + } + .t-inputs-w { + @include flex-direction(column); + .l-time-range-input-w:not(:first-child) { + &:not(:first-child) { + margin-top: $interiorMargin; + } + margin-right: 0; + } + .l-time-range-inputs-elem { + &.lbl { display: none; } + } + } + } + } } -@include tablet { - .l-time-controller { - height: 17px; - - .l-time-range-inputs-holder { - bottom: -7px; - left: -5px; - } - - .l-time-domain-selector { - width: 23%; - right: -4px; - bottom: -10px; - } - - .l-time-range-inputs-holder { - .l-time-range-input { - float: left; - .s-btn { - width: 100%; - padding-left: 4px; - } - } - } - } -} - -@include tabletLandscape { - .l-time-controller { - height: 17px; - - .l-time-range-inputs-holder { - bottom: -7px; - } - - .l-time-domain-selector { - width: 23%; - right: auto; - bottom: -10px; - left: 391px; - } - - .l-time-range-inputs-holder { - .l-time-range-inputs-elem { - &.ui-symbol, &.lbl { - display: block; - float: left; - line-height: 25px; - } - } - } - } - - .pane-tree-hidden .l-time-controller { - .l-time-domain-selector { - left: 667px; - } - .l-time-range-inputs-holder { - padding-left: 277px; - } - } -} -@include tabletPortrait { - .l-time-controller { - height: 17px; - - .l-time-range-inputs-holder { - bottom: -7px; - left: -5px; - } - - .l-time-domain-selector { - width: 23%; - right: -4px; - bottom: -10px; - } - - .l-time-range-inputs-holder { - .l-time-range-input { - width: 38%; - float: left; - } - .l-time-range-inputs-elem { - &.ui-symbol, &.lbl { - display: none; - } - } - } - } +@include phonePortrait { + .l-time-controller { + .l-time-range-inputs-holder { + .t-inputs-w { + @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%; + } + } + } + } + .l-time-domain-selector { + right: auto; + left: 20px; + } } diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index 3ac4542644..cd36236358 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -23,34 +23,35 @@
C - - - + + + + + + + to + + + + + - - to - - - - - - From 73c2c01def9b063ca444bf2b1be42a2d7386fede Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 11 May 2016 11:32:39 -0700 Subject: [PATCH 7/8] [Frontend] Layout and styling of Time Conductor open #889 open #298 Fixes for mobile; Moved popup z-index def into sass; Datetime picker compressed for better fit in mobile phone; Removed hours selector from datetime picker to enable better fit in mobile; --- .../commonUI/general/res/sass/_archetypes.scss | 5 +++++ .../general/res/sass/controls/_controls.scss | 14 +++++++++++++- .../res/templates/controls/datetime-field.html | 3 +-- .../commonUI/general/src/directives/MCTPopup.js | 5 +---- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index 84045c2520..4abad717ea 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -145,3 +145,8 @@ .flex-justify-end { @include justify-content(flex-end); } + +/********************************************* POPUPS */ +.t-popup { + z-index: 75; +} diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 6374efaaa0..51f35b505e 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -434,7 +434,6 @@ body.desktop .object-header { @include user-select(none); font-size: 0.8rem; padding: $interiorMarginLg !important; - width: 230px; .l-month-year-pager { $pagerW: 20px; height: $r1H; @@ -526,6 +525,19 @@ body.desktop .object-header { } } +@include phone { + .l-datetime-picker { + padding: $interiorMargin !important; + } + .l-calendar { + ul.l-cal-row { + li { + padding: 2px $interiorMargin; + } + } + } +} + /******************************************************** TEXTAREA */ textarea { @include nice-textarea($colorInputBg, $colorInputFg); diff --git a/platform/commonUI/general/res/templates/controls/datetime-field.html b/platform/commonUI/general/res/templates/controls/datetime-field.html index e890843754..47551fa25b 100644 --- a/platform/commonUI/general/res/templates/controls/datetime-field.html +++ b/platform/commonUI/general/res/templates/controls/datetime-field.html @@ -37,8 +37,7 @@
+ field="'value'">
diff --git a/platform/commonUI/general/src/directives/MCTPopup.js b/platform/commonUI/general/src/directives/MCTPopup.js index e96c1c0327..f1c6ca79d6 100644 --- a/platform/commonUI/general/src/directives/MCTPopup.js +++ b/platform/commonUI/general/src/directives/MCTPopup.js @@ -49,10 +49,7 @@ define( position = [ rect.left, rect.top ], popup = popupService.display(div, position); - // TODO: Handle in CSS; - // https://github.com/nasa/openmctweb/issues/298 - div.css('z-index', 75); - + div.addClass('t-popup'); transclude(function (clone) { div.append(clone); }); From 3d891073dab9b1f109c105294a7d51274b658952 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 11 May 2016 14:25:23 -0700 Subject: [PATCH 8/8] [Popup] Add method to jqlite mocks ...to resolve build failure preventing merge, https://github.com/nasa/openmct/pull/922#issuecomment-218588876 --- .../commonUI/general/test/directives/MCTPopupSpec.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/platform/commonUI/general/test/directives/MCTPopupSpec.js b/platform/commonUI/general/test/directives/MCTPopupSpec.js index bfe6b469cb..9893e85b30 100644 --- a/platform/commonUI/general/test/directives/MCTPopupSpec.js +++ b/platform/commonUI/general/test/directives/MCTPopupSpec.js @@ -24,7 +24,15 @@ define( ["../../src/directives/MCTPopup"], function (MCTPopup) { - var JQLITE_METHODS = [ "on", "off", "find", "parent", "css", "append" ]; + var JQLITE_METHODS = [ + "on", + "off", + "find", + "parent", + "css", + "addClass", + "append" + ]; describe("The mct-popup directive", function () { var mockCompile,