Merged open933-frontend

2024-12-19 05:07:52 +00:00 · 2016-07-18 14:25:02 -07:00 · 2016-07-18 14:25:02 -07:00 · 334ca64551
commit 334ca64551
parent 0af49efe06 4087b9cdde
15 changed files with 492 additions and 167 deletions
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@ -62,6 +62,6 @@
    <!-- put time conductor in here? -->
    <mct-representation mct-object="domainObject"
                        key="'time-conductor'"
-                        class="abs holder flex-elem flex-fixed l-time-conductor-holder">
+                        class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder">
    </mct-representation>
 </div>
--- a/platform/commonUI/general/res/sass/_animations.scss
+++ b/platform/commonUI/general/res/sass/_animations.scss
@ -0,0 +1,91 @@
+@include keyframes(rotation) {
+    100% { @include transform(rotate(360deg)); }
+}
+
+@include keyframes(rotation-centered) {
+    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
+}
+
+@include keyframes(clock-hands) {
+    0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg));  }
+}
+
+@include keyframes(clock-hands-sticky) {
+    0% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    7% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    8% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    15% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    16% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    24% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    25% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    32% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    33% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    40% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    41% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    49% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    50% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    57% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    58% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    65% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    66% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    74% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    75% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    82% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    83% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    90% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    91% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    99% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    100% {
+        @include transform(translate(-50%, -50%) rotate(360deg));
+    }
+}
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@ -108,6 +108,9 @@
        &.grows {
            @include flex(1 1 auto);
        }
+        &.contents-align-right {
+            text-align: right;
+        }
    }
    .flex-container {
        // Apply to wrapping elements, mct-includes, etc.
--- 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, 6px, 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;
--- 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 {
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@ -21,6 +21,7 @@
 *****************************************************************************/
@import "effects";
@import "global";
+@import "animations";
@import "archetypes";
@import "about";
@import "text";
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@ -185,21 +185,15 @@
 }

@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    //$b: 1px solid lighten($bg, 30%);
    border-radius: 2px;
    box-sizing: border-box;
    @include boxIncised(0.7);
    background-color: $bg;
-    //border-bottom: $b;
-    //border-right: $b;
 }

@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    //&:before {
-    //@include trans-prop-nice("border-color", 25ms);
    content: '';
    display: block;
-    //height: auto;
    pointer-events: none;
    position: absolute;
    z-index: 2;
@ -305,7 +299,6 @@
 	border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
-	display: inline-block;
 }

@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@ -33,6 +33,7 @@ $pad: $interiorMargin * $baseRatio;

 .s-btn {
    box-sizing: border-box;
+    display: inline-block;
    padding: 0 $pad;
    font-size: 0.7rem;
    vertical-align: top;
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@ -420,6 +420,63 @@ input[type="search"] {
    }
 }

+@mixin sliderKnob() {
+    $h: 16px;
+    cursor: pointer;
+    width: floor($h/1.75);
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    //border-radius: 50% !important;
+}
+
+@mixin sliderKnobRound() {
+    $h: 12px;
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    border-radius: 50% !important;
+}
+
+input[type="range"] {
+    // HTML5 range inputs
+
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
+    &:focus {
+        outline: none; /* Removes the blue border. */
+    }
+
+    // Thumb
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include sliderKnobRound();
+    }
+    &::-moz-range-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+    &::-ms-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+
+    // Track
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+}
+
 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
    $r1H: 15px;
--- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@ -1,80 +1,171 @@
@mixin toiLineHovEffects() {
-	&:before,
-	&:after {
-		background-color: $timeControllerToiLineColorHov;
-	}
+    &:before,
+    &:after {
+        background-color: $timeControllerToiLineColorHov;
+    }
+}
+
+.l-time-conductor-holder {
+    $minW: 500px;
+    border-top: 1px solid $colorInteriorBorder;
+    min-width: $minW;
+    padding-top: $interiorMargin;
+}
+
+.time-conductor-icon {
+    $c: $colorObjHdrIc;
+    $d: 20px;
+    background: $c;
+    border-radius: 4px;
+    height: $d !important;
+    width: $d;
+    position: relative;
+    
+    // Icon shape: brackets
+    &:before,
+    &:after {
+        content: '';
+        background: $colorBodyBg;
+        position: absolute;
+    }
+    &:before {
+        $in: 7px;
+        left: $in;
+        top: 0;
+        right: $in;
+        bottom: 0;
+
+    }
+    &:after {
+        $in: 4px;
+        left: $in;
+        top: $in;
+        right: $in;
+        bottom: $in;
+    }
+
+    // Clock hands
+    div[class*="hand"] {
+        $handW: 2px;
+        $handH: 8px;
+        @include transform(translate(-50%, -50%));
+        @include animation-iteration-count(infinite);
+        @include animation-timing-function(linear);
+        position: absolute;
+        height: $handW;
+        width: $handW;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        &:before {
+            background-color: $c;
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            bottom: -1px;
+        }
+        &.hand-little {
+            z-index: 2;
+            @include animation-duration(12s);
+            &:before {
+                //background: red;
+                height: ceil($handH * 0.7);
+            }
+        }
+        &.hand-big {
+            z-index: 1;
+            @include animation-duration(1s);
+            &:before {
+                height: $handH;
+            }
+        }
+    }
 }

 .l-time-conductor {
-	$minW: 500px;
-	$knobHOffset: 0px;
-	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW + $interiorMargin;
-	$r1H: nth($ueTimeControlH,1);
-	$r2H: nth($ueTimeControlH,2);
-	$r3H: nth($ueTimeControlH,3);
+    $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';
    $glyphIconRealtime: '\43';
    $glyphIconLatest: '\44';

-    border-top: 1px solid $colorInteriorBorder;
-    padding-top: $interiorMargin;
-    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;
        }
-	}
+    }
+
+    .time-delta {
+        &:before {
+            color: $colorTimeCondKeyBg;
+        }
+    }

    .l-time-conductor-inputs-holder,
-    .l-time-conductor-ticks {
+    .l-time-conductor-ticks,
+    .l-time-conductor-zoom-w {
        font-size: 0.8rem;
    }

-	.l-time-conductor-inputs-holder {
-        $inputW: 180px;
-        $ticksBlockerFadeW: 25px;
+    .l-time-conductor-inputs-holder {
+        $trInputW: 180px;
+        $hmInputW: 60px;
+        $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));
            display: block;
            position: relative;
            width: 100%;
@ -85,39 +176,85 @@
            width: 100%;
            svg {
                text-rendering: geometricPrecision;
-                color: transparent;
-                fill: $c !important; // Todo: figure out why this isn't working
-                width: 100%; height: 100%;
+                width: 100%;
+                height: 100%;
                > g {
                    font-size: 0.9em;
                }
-                path {display: none;}
-                line {stroke: $c;}
+                path {
+                    // Line beneath ticks
+                    display: none;
+                }
+                line {
+                    // Tick marks
+                    stroke: $c;
+                }
+                text {
+                    // Tick labels
+                    fill: $c;
+                }
            }
        }
-	}
+    }
    .l-data-visualization {
-        background: rgba($colorTick, 0.3);
+        background: $colorTimeCondDataVisBg;
        height: $r2H;
    }

-    .mode-selector .s-menu-btn {
-        &:before {
-            @extend .ui-symbol;
-            margin-right: $interiorMarginSm;
-            content: $glyphIconFixed;
+    .l-time-conductor-controls {
+        align-items: center;
+        margin-top: $interiorMargin;
+        .l-time-conductor-zoom-w {
+            @include justify-content(flex-end);
+            .time-conductor-zoom {
+                height: $r3H;
+                min-width: 100px;
+                width: 20%;
+            }
+            .time-conductor-zoom-current-range {
+                color: $colorTick;
+            }
+        }
+
+    }
+    // Fixed
+    &.fixed-mode {
+        .time-conductor-icon div[class*="hand"] {
+            &.hand-little {
+                @include transform(rotate(120deg));
+            }
        }
    }

    // Realtime, latest modes
    &.realtime-mode,
    &.latest-mode {
+        .time-conductor-icon {
+            background: $colorTimeCondKeyBg;
+            div[class*="hand"] {
+                @include animation-name(clock-hands);
+                &:before {
+                    background: $colorTimeCondKeyBg;
+                }
+            }
+        }
+
        .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,
+                    &:focus {
+                        @include nice-input();
+                        padding: $inputTextP;
+                    }
+                }
+                &.start-date {
+                    pointer-events: none;
                }
                .icon-calendar {
                    display: none;
@ -128,22 +265,50 @@
            }
        }

+        &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
+        &.latest-mode .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands-sticky);
+            &.hand-big { @include animation-duration(5s); }
+            &.hand-little { @include animation-duration(60s); }
+        }
+
        .l-data-visualization {
-            background: rgba($colorTimeCondKey, 0.5) !important
+            background: $colorTimeCondDataVisRtBg !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 */
@ -179,7 +344,9 @@
                    margin-right: 0;
                }
                .l-time-range-inputs-elem {
-                    &.lbl { display: none; }
+                    &.lbl {
+                        display: none;
+                    }
                }
            }
        }
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@ -19,15 +19,6 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@include keyframes(rotation) {
-    100% { @include transform(rotate(360deg)); }
-}
-
-@include keyframes(rotation-centered) {
-    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
-    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
-}
-
@mixin  spinner($b: 5px, $c: $colorKey) {
    @include transform-origin(center);
    @include animation-name(rotation-centered);
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@ -129,6 +129,8 @@
    }

    .primary-pane {
+        // Clip element that have min-widths
+        overflow: hidden;
        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
        z-index: 4;
    }
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@ -210,4 +210,7 @@ $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorBodyFg, 0.2);

 // Time Conductor
-$colorTimeCondKey: #1d7a96;
+$colorTimeCondKeyBg: #4e70dc;
+$colorTimeCondKeyFg: #fff;
+$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
+$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@ -210,4 +210,7 @@ $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);

 // Time Conductor
-$colorTimeCondKey: #0092b3;
+$colorTimeCondKeyBg: #6178dc;
+$colorTimeCondKeyFg: #fff;
+$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
+$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
--- a/platform/features/conductor-v2/res/templates/time-conductor.html
+++ b/platform/features/conductor-v2/res/templates/time-conductor.html
@ -1,95 +1,107 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
-<style>
-    .start-delta {
-        left: 180px;
-    }
-    .end-delta {
-        right: 0;
-    }
-</style>
 <div ng-controller="TimeConductorController as tcController"
-     class="l-time-conductor l-flex-col {{modeModel.selected.metadata.key}}-mode {{timeSystemModel.selected.metadata.key}}-time-system">
-    <!-- Holds inputs and ticks -->
-    <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
-        <form class="abs l-time-conductor-inputs-holder"
-              ng-submit="tcController.updateBoundsFromForm(formModel)">
-        <span class="l-time-range-input-w start-date">
-            <mct-control key="'datetime-field'"
-                         structure="{
-                             format: 'utc',
-                             validate: tcController.validation.validateStart
-                         }"
-                         ng-model="formModel"
-                         ng-mouseup="changing['start'] = true"
-                         ng-blur="changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
-                         field="'start'"
-                         class="time-range-start">
-            </mct-control>
-        </span>
-        <span class="l-time-range-input-w start-delta"
-              ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
-            <mct-control key="'datetime-field'"
-                         structure="{
-                            format: 'duration',
-                            validate: tcController.validation.validateStartDelta
-                         }"
-                         ng-model="formModel"
-                         ng-blur="tcController.updateDeltasFromForm(formModel)"
-                         field="'startDelta'"
-                         class="time-delta-start">
-            </mct-control>
-        </span>
-        <span class="l-time-range-input-w end-delta"
-              ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
-            <mct-control key="'datetime-field'"
-                         structure="{
-                            format: 'duration',
-                            validate: tcController.validation.validateEndDelta
-                         }"
-                         ng-model="formModel"
-                         ng-blur="tcController.updateDeltasFromForm(formModel)"
-                         field="'endDelta'"
-                         class="time-delta-end">
-            </mct-control>
-        </span>
-        <span class="l-time-range-input-w end-date"
-              ng-controller="ToggleController as t2">
-            <mct-control key="'datetime-field'"
-                         structure="{
-                             format: 'utc',
-                             validate: tcController.validation.validateEnd
-                         }"
-                         ng-model="formModel"
-                         ng-mouseup="changing['end'] = true"
-                         ng-blur="changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
-                         field="'end'"
-                         class="time-range-end">
-            </mct-control>
-        </span>
-        <input type="submit" class="hidden">
-        </form>
-        <mct-conductor-axis></mct-conductor-axis>
+    class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected.metadata.key}}-mode {{timeSystemModel.selected.metadata.key}}-time-system">
+
+    <div class="flex-elem holder time-conductor-icon">
+        <div class="hand-little"></div>
+        <div class="hand-big"></div>
    </div>

-    <!-- Holds data availability, time of interest -->
-    <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+    <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
+        <!-- Holds inputs and ticks -->
+        <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
+            <form class="abs l-time-conductor-inputs-holder"
+                  ng-submit="tcController.updateBoundsFromForm(formModel)">
+                <span class="l-time-range-w start-w">
+                    <span class="l-time-range-input-w start-date">
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                         format: 'utc',
+                                         validate: tcController.validation.validateStart
+                                     }"
+                                     ng-model="formModel"
+                                     ng-mouseup="changing['start'] = true"
+                                     ng-blur="changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
+                                     field="'start'"
+                                     class="time-range-input">
+                        </mct-control>
+                    </span>
+                        <span class="l-time-range-input-w time-delta start-delta"
+                          ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                        format: 'duration',
+                                        validate: tcController.validation.validateStartDelta
+                                     }"
+                                     ng-model="formModel"
+                                     ng-blur="tcController.updateDeltasFromForm(formModel)"
+                                     field="'startDelta'"
+                                     class="hrs-min-input">
+                        </mct-control>
+                    </span>
+                </span>
+                <span class="l-time-range-w end-w">
+                    <span class="l-time-range-input-w time-delta end-delta"
+                          ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                        format: 'duration',
+                                        validate: tcController.validation.validateEndDelta
+                                     }"
+                                     ng-model="formModel"
+                                     ng-blur="tcController.updateDeltasFromForm(formModel)"
+                                     field="'endDelta'"
+                                     class="hrs-min-input">
+                        </mct-control>
+                    </span>
+                    <span class="l-time-range-input-w end-date"
+                          ng-controller="ToggleController as t2">
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                         format: 'utc',
+                                         validate: tcController.validation.validateEnd
+                                     }"
+                                     ng-model="formModel"
+                                     ng-mouseup="changing['end'] = true"
+                                     ng-blur="changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
+                                     field="'end'"
+                                     class="time-range-input">
+                        </mct-control>
+                    </span>
+                </span>
+
+                <input type="submit" class="hidden">
+            </form>
+            <mct-conductor-axis></mct-conductor-axis>
+        </div>
+
+        <!-- Holds data availability, time of interest -->
+        <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+
+        <!-- Holds time system and session selectors, and zoom control -->
+        <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
+            <mct-representation
+                key="'mode-selector'"
+                mct-object="domainObject"
+                ng-model="modeModel"
+                class="holder flex-elem menus-up mode-selector">
+            </mct-representation>
+            <mct-control
+                    key="'menu-button'"
+                    class="holder flex-elem menus-up time-system"
+                    structure="{
+                        text: timeSystemModel.selected.metadata.name,
+                        click: tcController.selectTimeSystem,
+                        options: timeSystemModel.options
+                    }">
+            </mct-control>
+            <!-- Zoom control -->
+            <div class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
+                <span class="time-conductor-zoom-current-range flex-elem flex-fixed holder">Mars Minutes</span>
+                <input class="time-conductor-zoom flex-elem" type="range" />
+            </div>
+        </div>

-    <!-- Holds time system and session selectors, and zoom control -->
-    <div class="l-time-system-zoom l-row-elem l-flex-row flex-elem">
-        <mct-representation
-            key="'mode-selector'"
-            mct-object="domainObject"
-            ng-model="modeModel"
-            class="holder flex-elem menus-up mode-selector">
-        </mct-representation>
-        <mct-control
-                key="'menu-button'"
-                class="holder flex-elem menus-up time-system"
-                structure="{
-                    text: timeSystemModel.selected.metadata.name,
-                    click: tcController.selectTimeSystem,
-                    options: timeSystemModel.options
-                }">
-        </mct-control>
    </div>
 </div>