Merge branch 'open933-frontend-b' into open933

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -101,5 +101,6 @@
 <glyph unicode="&#xe621;" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
 <glyph unicode="&#xe622;" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
 <glyph unicode="&#xe623;" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
+<glyph unicode="&#xe624;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>

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

@@ -30,6 +30,7 @@
 
 .ui-symbol {
     font-family: 'symbolsfont';
+    -webkit-font-smoothing: antialiased;
 	&.type-icon {
 		color: $colorObjHdrIc;
 	}

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

@@ -0,0 +1,3 @@
+$ueTimeConductorH: (25px, 15px, 20px);
+$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
+$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00

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

@@ -20,7 +20,6 @@
  * 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";
@@ -28,8 +27,7 @@
 @import "../../../../commonUI/themes/espresso/res/sass/constants";
 @import "../../../../commonUI/themes/espresso/res/sass/mixins";
 @import "../../../../commonUI/general/res/sass/icons";
-
+@import "constants";
-$ueTimeConductorH: (25px, 6px, 20px);
 
 @mixin toiLineHovEffects() {
     &:before,
@@ -47,40 +45,27 @@ $ueTimeConductorH: (25px, 6px, 20px);
 
 .time-conductor-icon {
     $c: $colorObjHdrIc;
-    $d: 20px;
+    $d: 18px;
-    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;
+        @extend .ui-symbol;
-        left: $in;
+        color: $c;
-        top: 0;
+        content: '\e624';
-        right: $in;
+        font-size: $d;
-        bottom: 0;
+        line-height: normal;
-
+        display: block;
-    }
+        width: 100%;
-    &:after {
+        height: 100%;
-        $in: 4px;
+        z-index: 1;
-        left: $in;
-        top: $in;
-        right: $in;
-        bottom: $in;
     }
 
     // Clock hands
     div[class*="hand"] {
         $handW: 2px;
-        $handH: 8px;
+        $handH: $d * 0.4; //8px;
         @include transform(translate(-50%, -50%));
         @include animation-iteration-count(infinite);
         @include animation-timing-function(linear);
@@ -152,42 +137,54 @@ $ueTimeConductorH: (25px, 6px, 20px);
     }
 
     .l-time-conductor-inputs-holder,
-    .l-time-conductor-ticks,
+    .l-time-conductor-inputs-and-ticks,
     .l-time-conductor-zoom-w {
         font-size: 0.8rem;
     }
 
     .l-time-conductor-inputs-holder {
-        $trInputW: 180px;
-        $hmInputW: 60px;
         $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
 
         height: $r1H;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         z-index: 1;
         .l-time-range-w {
             // Wraps a datetime text input field
             height: 100%;
             position: absolute;
+            .title {
+                display: inline-block;
+                margin-right: $interiorMarginSm;
+            }
             &.start-w {
                 @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
                 padding-right: $ticksBlockerFadeW;
+                .title:before {
+                    content: 'Start';
+                }
             }
             &.end-w {
                 @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
                 padding-left: $ticksBlockerFadeW;
                 right: 0;
-                text-align: right;
+                .title:before {
+                    content: 'End';
+                }
             }
             input[type="text"] {
                 @include trans-prop-nice(padding, 250ms);
             }
-            .time-range-input input {
+            .time-range-input input[type="text"] {
-                width: $trInputW;
+                width: $timeCondInputTimeSysDefW;
             }
-            .hrs-min-input input {
+            .hrs-min-input input[type="text"] {
-                width: $hmInputW;
+                width: $timeCondInputDeltaDefW;
             }
             .icon-calendar {
                 margin-top: 4px;
@@ -195,7 +192,7 @@ $ueTimeConductorH: (25px, 6px, 20px);
         }
     }
 
-    .l-time-conductor-ticks {
+    .l-time-conductor-inputs-and-ticks {
         $c: $colorTick;
         height: $r1H;
         mct-conductor-axis {
@@ -248,22 +245,13 @@ $ueTimeConductorH: (25px, 6px, 20px);
                 color: $colorTick;
             }
         }
-
-    }
-    // Fixed
-    &.fixed-mode {
-        .time-conductor-icon div[class*="hand"] {
-            &.hand-little {
-                @include transform(rotate(120deg));
-            }
-        }
     }
 
-    // Realtime, latest modes
+    // Real-time, latest modes
     &.realtime-mode,
     &.latest-mode {
         .time-conductor-icon {
-            background: $colorTimeCondKeyBg;
+            &:before { color: $colorTimeCondKeyBg; }
             div[class*="hand"] {
                 @include animation-name(clock-hands);
                 &:before {
@@ -286,71 +274,94 @@ $ueTimeConductorH: (25px, 6px, 20px);
                         padding: $inputTextP;
                     }
                 }
-                &.start-date {
-                    pointer-events: none;
-                }
                 .icon-calendar {
                     display: none;
                 }
-                &.end-date {
+                &.start-date {
                     display: none;
                 }
+                &.end-date {
+                    pointer-events: none;
+                    input[type="text"] {
+                        color: pullForward($colorTimeCondKeyBg, 5%);
+                        margin-right: $interiorMargin;
+                        tab-index: -1;
+                    }
+                }
             }
         }
 
-        &.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: $colorTimeCondDataVisRtBg !important
         }
+
         .mode-selector .s-menu-btn {
             @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
         }
     }
+
+    // Fixed mode
     &.fixed-mode {
         $i: $glyphIconFixed;
+        .time-conductor-icon div[class*="hand"] {
+            &.hand-little {
+                @include transform(rotate(120deg));
+            }
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
+
+    // Realtime mode
     &.realtime-mode {
         $i: $glyphIconRealtime;
+        .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands);
+        }
         .time-delta:before {
             content: $i;
         }
+        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
+            content: 'Now';
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
+
+    // LAD mode
     &.latest-mode {
         $i: $glyphIconLatest;
+        .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands-sticky);
+            &.hand-big {
+                @include animation-duration(5s);
+            }
+            &.hand-little {
+                @include animation-duration(60s);
+            }
+        }
         .time-delta:before {
             content: $i;
         }
+        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
+            content: 'LAD';
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
 }
 
-.s-time-range-val {
-    border-radius: $controlCr;
-    background-color: $colorInputBg;
-    padding: 1px 1px 0 $interiorMargin;
-}
-
 /******************************************************************** MOBILE */
 
 @include phoneandtablet {
-    .l-time-conductor {
+    .l-time-conductor-holder { min-width: 0 !important; }
-        min-width: 0;
+    .super-menu.mini {
-        .l-time-range-slider-holder,
+        width: 200px;
-        .l-time-conductor-ticks {
+        height: 100px;
+        .pane.menu-item-description {
             display: none;
         }
     }
@@ -358,52 +369,76 @@ $ueTimeConductorH: (25px, 6px, 20px);
 
 @include phone {
     .l-time-conductor {
-        .l-time-conductor-inputs-holder {
+        min-width: 0;
-            &.l-flex-row,
+        .l-time-conductor-inputs-and-ticks {
-            .l-flex-row {
-                @include align-items(flex-start);
-            }
-            .l-time-range-inputs-elem {
-                &.type-icon {
-                    margin-top: 3px;
-                }
-            }
             .l-time-conductor-inputs-holder {
-                @include flex-direction(column);
+                .l-time-range-w {
-                .l-time-range-input-w:not(:first-child) {
+                    background-image: none !important;
-                    &:not(:first-child) {
-                        margin-top: $interiorMargin;
-                    }
-                    margin-right: 0;
-                }
-                .l-time-range-inputs-elem {
-                    &.lbl {
-                        display: none;
-                    }
                 }
             }
+            mct-conductor-axis {
+                display: none;
+            }
         }
     }
 }
 
 @include phonePortrait {
     .l-time-conductor {
-        .l-time-conductor-inputs-holder {
+        .l-data-visualization,
+        .l-time-conductor-zoom-w,
+        .time-delta {
+            display: none;
+        }
+
+        .l-time-conductor-inputs-and-ticks {
+            height: auto !important;
             .l-time-conductor-inputs-holder {
-                @include flex(1 1 auto);
+                position: relative;
-                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
+                height: auto !important;
-                .flex-elem {
+
-                    @include flex(1 1 auto);
+                .l-time-range-w {
-                    width: 100%;
+                    background-image: none !important;
+                    display: block;
+                    height: auto !important;
+                    padding: 0 !important;
+                    position: relative;
+                    text-align: left;
+                    &:not(:first-child) {
+                        margin-top: $interiorMargin;
+                    }
                 }
-                input[type="text"] {
+            }
-                    width: 100%;
+        }
+
+        // Fixed mode
+        &.fixed-mode {
+            .l-time-conductor-inputs-and-ticks {
+                .l-time-range-w {
+                    .title {
+                        width: 30px;
+                    }
+                }
+            }
+        }
+
+        // Real-time, latest modes
+        &.realtime-mode,
+        &.latest-mode {
+            .l-time-conductor-inputs-and-ticks {
+                .l-time-range-w {
+                    &.start-w {
+                        display: none;
+                    }
+                    &.end-w {
+                        margin-top: 0;
+                        .end-date input[type="text"] {
+                            margin: 0;
+                            text-align: left;
+                        }
+                    }
                 }
             }
         }
     }
-    .l-time-domain-selector {
-        right: auto;
-        left: 20px;
-    }
 }

platform/features/conductor-v2/res/templates/time-conductor.html

@@ -9,11 +9,12 @@
 
     <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">
+        <div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
-            <form class="abs l-time-conductor-inputs-holder"
+            <form class="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">
+                        <span class="title"></span>
                         <mct-control key="'datetime-field'"
                                      structure="{
                                          format: timeSystemModel.format,
@@ -28,6 +29,7 @@
                     </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',
@@ -41,22 +43,9 @@
                     </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">
+                        <span class="title"></span>
                         <mct-control key="'datetime-field'"
                                      structure="{
                                          format: timeSystemModel.format,
@@ -69,6 +58,20 @@
                                      class="time-range-input">
                         </mct-control>
                     </span>
+                    <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>
 
                 <input type="submit" class="hidden">
@@ -77,7 +80,7 @@
         </div>
 
         <!-- Holds data availability, time of interest -->
-        <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+        <div class="l-data-visualization l-row-elem 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">

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

@@ -259,7 +259,8 @@ $ueTimeConductorH: (33px, 18px, 20px);
                     margin-top: 3px;
                 }
             }
-            .t-inputs-w {
+            .t-inputs-w,
+            .l-time-range-inputs-elem {
                 @include flex-direction(column);
                 .l-time-range-input-w:not(:first-child) {
                     &:not(:first-child) {
@@ -278,7 +279,8 @@ $ueTimeConductorH: (33px, 18px, 20px);
 @include phonePortrait {
     .l-time-controller {
         .l-time-range-inputs-holder {
-            .t-inputs-w {
+            .t-inputs-w,
+            .l-time-range-inputs-elem {
                 @include flex(1 1 auto);
                 padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
                 .flex-elem {