[Frontend] Renew support for Time Conductor v1

Fixes #933
Time Conductors v1 and v2 now build and load their
own isolated CSS files. All previous styling for TCv1
should be re-enabled. Note that Conductor v2 mobile
is not complete yet.

platform/commonUI/general/res/sass/_constants.scss

@@ -48,7 +48,6 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (25px, 6px, 20px);
 /*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;

platform/commonUI/general/res/sass/_main.scss

@@ -41,7 +41,6 @@
 @import "controls/lists";
 @import "controls/menus";
 @import "controls/messages";
-@import "controls/time-conductor";
 @import "mobile/controls/menus";
 
 /********************************* FORMS */

platform/commonUI/general/res/templates/controls/time-controller.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
-    <form class="l-time-conductor-inputs-holder l-flex-row flex-elem"
+    <form class="l-time-range-inputs-holder l-flex-row flex-elem"
           ng-submit="trCtrl.updateBoundsFromForm()">
         <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
         <span class="l-time-range-inputs-elem l-flex-row flex-elem">
@@ -86,7 +86,7 @@
         </div>
     </div>
 
-    <div class="l-time-conductor-ticks flex-elem">
+    <div class="l-time-range-ticks-holder flex-elem">
         <div class="l-time-range-ticks">
             <div
                 ng-repeat="tick in ticks track by $index"

platform/features/conductor-v2/bundle.js

@@ -68,6 +68,11 @@ define([
                     ]
                 }
             ],
+            "stylesheets": [
+                {
+                    "stylesheetUrl": "css/time-conductor.css"
+                }
+            ],
             "representations": [
                 {
                     "key": "time-conductor",

platform/features/conductor-v2/res/sass/time-conductor.scss

@@ -1,3 +1,36 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * 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";
+@import "../../../../commonUI/general/res/sass/mobile/mixins";
+@import "../../../../commonUI/themes/espresso/res/sass/constants";
+@import "../../../../commonUI/themes/espresso/res/sass/mixins";
+@import "../../../../commonUI/general/res/sass/icons";
+
+$ueTimeConductorH: (25px, 6px, 20px);
+
 @mixin toiLineHovEffects() {
     &:before,
     &:after {
@@ -20,7 +53,7 @@
     height: $d !important;
     width: $d;
     position: relative;
-    
+
     // Icon shape: brackets
     &:before,
     &:after {
@@ -87,9 +120,9 @@
     $knobHOffset: 0px;
     $rangeValPad: $interiorMargin;
     $rangeValOffset: $sliderKnobW + $interiorMargin;
-    $r1H: nth($ueTimeControlH, 1);
+    $r1H: nth($ueTimeConductorH, 1);
-    $r2H: nth($ueTimeControlH, 2);
+    $r2H: nth($ueTimeConductorH, 2);
-    $r3H: nth($ueTimeControlH, 3);
+    $r3H: nth($ueTimeConductorH, 3);
 
     // Glyphs Todo: replace with refactored CSS approach when that is merged into master
     $glyphIconFixed: '\e604';

platform/features/conductor/bundle.js

@@ -47,6 +47,11 @@ define([
                     ]
                 }
             ],
+            "stylesheets": [
+                {
+                    "stylesheetUrl": "css/time-conductor.css"
+                }
+            ],
             "components": [
                 {
                     "type": "decorator",

platform/features/conductor/res/sass/time-conductor.scss

@@ -0,0 +1,298 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * 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";
+@import "../../../../commonUI/general/res/sass/mobile/mixins";
+@import "../../../../commonUI/themes/espresso/res/sass/constants";
+@import "../../../../commonUI/themes/espresso/res/sass/mixins";
+
+$ueTimeConductorH: (33px, 18px, 20px);
+
+@mixin toiLineHovEffects() {
+    &:before,
+    &:after {
+        background-color: $timeControllerToiLineColorHov;
+    }
+}
+
+.l-time-controller {
+    $minW: 500px;
+    $knobHOffset: 0px;
+    $knobM: ($sliderKnobW + $knobHOffset) * -1;
+    $rangeValPad: $interiorMargin;
+    $rangeValOffset: $sliderKnobW + $interiorMargin;
+    $timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
+    $r1H: nth($ueTimeConductorH,1);
+    $r2H: nth($ueTimeConductorH,2);
+    $r3H: nth($ueTimeConductorH,3);
+
+    min-width: $minW;
+    font-size: 0.8rem;
+
+    .l-time-range-inputs-holder,
+    .l-time-range-slider-holder,
+    .l-time-range-ticks-holder
+    {
+        box-sizing: border-box;
+        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-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 {
+        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: '';
+            display: block;
+            position: absolute;
+            top: $mTB; right: $mLR; bottom: $mTB; left: $mLR;
+        }
+        .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;
+            }
+        }
+        &.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-time-domain-selector {
+        position: absolute;
+        right: 0px;
+        top: $interiorMargin;
+    }
+
+}
+
+.s-time-range-val {
+    border-radius: $controlCr;
+    background-color: $colorInputBg;
+    padding: 1px 1px 0 $interiorMargin;
+}
+
+/******************************************************************** MOBILE */
+
+@include phoneandtablet {
+    .l-time-controller {
+        min-width: 0;
+        .l-time-range-slider-holder,
+        .l-time-range-ticks-holder {
+            display: none;
+        }
+    }
+}
+
+@include phone {
+    .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 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;
+    }
+}