From ff1678435eb135c4ef92c7fa9656a679a2c12751 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 20 Jul 2016 11:43:40 -0700
Subject: [PATCH] [Frontend] Time Conductor v2 styling

Fixes #933
Changed desktop and mobile RT UI to display
end datetime and hide start;
WIP: mobile styling for main UI of TC;
---
 .../conductor-v2/res/sass/time-conductor.scss | 109 +++++++++---------
 .../res/templates/time-conductor.html         |  33 +++---
 2 files changed, 74 insertions(+), 68 deletions(-)

diff --git a/platform/features/conductor-v2/res/sass/time-conductor.scss b/platform/features/conductor-v2/res/sass/time-conductor.scss
index f345919cd6..69e0e6f2de 100644
--- a/platform/features/conductor-v2/res/sass/time-conductor.scss
+++ b/platform/features/conductor-v2/res/sass/time-conductor.scss
@@ -152,7 +152,7 @@ $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;
     }
@@ -165,6 +165,8 @@ $ueTimeConductorH: (25px, 6px, 20px);
         $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
@@ -195,7 +197,7 @@ $ueTimeConductorH: (25px, 6px, 20px);
         }
     }
 
-    .l-time-conductor-ticks {
+    .l-time-conductor-inputs-and-ticks {
         $c: $colorTick;
         height: $r1H;
         mct-conductor-axis {
@@ -286,15 +288,20 @@ $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: $colorTimeCondKeyBg;
+                        margin-right: $interiorMargin;
+                        text-align: right;
+                    }
+                }
             }
         }
 
@@ -346,64 +353,62 @@ $ueTimeConductorH: (25px, 6px, 20px);
 
 /******************************************************************** MOBILE */
 
-@include phoneandtablet {
-    .l-time-conductor {
-        min-width: 0;
-        .l-time-range-slider-holder,
-        .l-time-conductor-ticks {
-            display: none;
-        }
-    }
-}
+//@include phoneandtablet {}
 
 @include phone {
     .l-time-conductor {
-        .l-time-conductor-inputs-holder {
-            &.l-flex-row,
-            .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-input-w:not(:first-child) {
-                    &:not(:first-child) {
-                        margin-top: $interiorMargin;
-                    }
-                    margin-right: 0;
-                }
-                .l-time-range-inputs-elem {
-                    &.lbl {
-                        display: none;
-                    }
-                }
-            }
-        }
+        min-width: 0;
+        .l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; }
+        //TODO: mode menu smaller, hide right side
     }
 }
 
 @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);
-                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
-                .flex-elem {
-                    @include flex(1 1 auto);
-                    width: 100%;
+                position: relative;
+                height: auto !important;
+
+                .l-time-range-w {
+                    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%;
+            }
+        }
+
+        // Realtime, latest modes
+        &.realtime-mode,
+        &.latest-mode {
+            // TODO: hide all of start-w
+            .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;
-    }
 }
diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html
index 74c51971a6..de718efd90 100644
--- a/platform/features/conductor-v2/res/templates/time-conductor.html
+++ b/platform/features/conductor-v2/res/templates/time-conductor.html
@@ -9,8 +9,8 @@
 
     <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"
+        <div class="l-time-conductor-inputs-and-ticks l-row-elem l-flex-row flex-elem no-margin">
+            <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">
@@ -28,6 +28,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,20 +42,6 @@
                     </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'"
@@ -69,6 +56,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">