[Frontend] Styling for Time Conductor v2

Fixes #993
In-progress; class renaming continued,
cleanups in markup file, in-page styles
ported to scss

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

@@ -121,17 +121,18 @@
 .l-flex-row {
     @include flex-direction(row);
     &.flex-elem { @include flex(1 1 auto); }
-    .flex-elem {
+    > .flex-elem {
         height: inherit;
         line-height: inherit;
         min-width: 0;
+        &.holder:not(:last-child) { margin-right: $interiorMargin; }
     }
     .flex-container { @include flex-direction(row); }
 }
 
 .l-flex-col {
     @include flex-direction(column);
-    .flex-elem {
+    > .flex-elem {
         min-height: 0;
         &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
     }

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

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

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -5,196 +5,109 @@
 	}
 }
 
-.l-time-controller {
+.l-time-conductor {
 	$minW: 500px;
 	$knobHOffset: 0px;
-	$knobM: ($sliderKnobW + $knobHOffset) * -1;
 	$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);
 
+    border-top: 1px solid $colorInteriorBorder;
+    padding-top: $interiorMargin;
     min-width: $minW;
     font-size: 0.8rem;
+    position: relative;
 
-	.l-time-range-inputs-holder,
+	>.l-row-elem {
-	.l-time-range-slider-holder,
+        // First order row elements
-	.l-time-range-ticks-holder
-	{
 		box-sizing: border-box;
+        width: 100%;
         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 {
+	.l-time-conductor-inputs-holder {
-		border-top: 1px solid $colorInteriorBorder;
+        $inputW: 200px;
-        padding-top: $interiorMargin;
+        $ticksBlockerFadeW: 25px;
-        &.l-flex-row,
+        height: $r1H;
-        .l-flex-row {
+        z-index: 1;
-            @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;
+            position: absolute;
-            input[type="text"] {
+            width: $inputW + $ticksBlockerFadeW;
-                width: 200px;
+            &.start-date {
-                &.picker-icon {
+                @include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
-                    padding-right: 20px;
-                }
             }
+
+            &.end-date {
+                @include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
+                right: 0;
+                text-align: right;
+            }
+
+            input[type="text"] {
+                width: $inputW;
+            }
+
             .icon-calendar {
                 position: absolute;
-                right: 5px;
+                margin-left: -16px;
-                top: 5px;
+                margin-top: 4px;
             }
         }
 	}
 
-	.l-time-range-slider-holder {
+	.l-time-conductor-ticks {
-		height: $r2H;
+        $c: $colorTick;
-		.range-holder {
+		height: $r1H;
-			box-shadow: none;
+        margin-top: 0 !important;
-			background: none;
+        mct-conductor-axis {
-			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;
+            position: relative;
-            top: $mTB; right: $mLR; bottom: $mTB; left: $mLR;
+            width: 100%;
         }
-		.range-value {
+
-			@include trans-prop-nice-fade(.25s);
+        .l-axis-holder {
-            font-size: 0.7rem;
+            height: $r1H;
-			position: absolute;
+            position: relative;
-			height: $r2H;
+            width: 100%;
-			line-height: $r2H;
+            svg {
-            white-space: nowrap;
+                stroke: $c;
-            z-index: 1;
+                width: 100%; height: 100%;
-		}
+                path {display: none;}
-		&:hover {
+                line {stroke: $c;}
-            .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-data-visualization {
+        background: rgba($colorTick, 0.3);
+        height: $r2H;
+    }
+
 	.l-time-domain-selector {
 		position: absolute;
 		right: 0px;
 		top: $interiorMargin;
 	}
 
+/*    .super-menu.mode-selector-menu {
+        height: 200px; width: 400px;
+        .menu-item-description {
+            .desc-area.icon {
+                @include test();
+                $h: 50px;
+                //font-size: 3em;
+                //height: $h;
+                //line-height: $h;
+            }
+        }
+    }*/
+
 }
 
 .s-time-range-val {
@@ -206,18 +119,18 @@
 /******************************************************************** MOBILE */
 
 @include phoneandtablet {
-    .l-time-controller {
+    .l-time-conductor {
         min-width: 0;
         .l-time-range-slider-holder,
-        .l-time-range-ticks-holder {
+        .l-time-conductor-ticks {
             display: none;
         }
     }
 }
 
 @include phone {
-    .l-time-controller {
+    .l-time-conductor {
-        .l-time-range-inputs-holder {
+        .l-time-conductor-inputs-holder {
             &.l-flex-row,
             .l-flex-row {
                 @include align-items(flex-start);
@@ -227,7 +140,7 @@
                     margin-top: 3px;
                 }
             }
-            .t-inputs-w {
+            .l-time-conductor-inputs-holder {
                 @include flex-direction(column);
                 .l-time-range-input-w:not(:first-child) {
                     &:not(:first-child) {
@@ -244,9 +157,9 @@
 }
 
 @include phonePortrait {
-    .l-time-controller {
+    .l-time-conductor {
-        .l-time-range-inputs-holder {
+        .l-time-conductor-inputs-holder {
-            .t-inputs-w {
+            .l-time-conductor-inputs-holder {
                 @include flex(1 1 auto);
                 padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
                 .flex-elem {

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

@@ -20,10 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
-    <form class="l-time-range-inputs-holder l-flex-row flex-elem"
+    <form class="l-time-conductor-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 t-inputs-w l-flex-row flex-elem">
+        <span class="l-time-range-inputs-elem l-flex-row flex-elem">
             <span class="l-time-range-input-w flex-elem">
                 <mct-control key="'datetime-field'"
                              structure="{
@@ -86,7 +86,7 @@
         </div>
     </div>
 
-    <div class="l-time-range-ticks-holder flex-elem">
+    <div class="l-time-conductor-ticks flex-elem">
         <div class="l-time-range-ticks">
             <div
                 ng-repeat="tick in ticks track by $index"

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -52,7 +52,7 @@ $colorGridLines: rgba(#fff, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
-$colorTick: rgba(white, 0.2);
+$colorTick: pullForward($colorBodyBg, 20%);
 
 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);

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

@@ -1,91 +1,62 @@
-<style>
-    .time-system .menu{
-        bottom: 10px;
-    }
-    .l-data-availability {
-        width: 100%;
-        height: 20px;
-        background-color: #3b3b3b
-    }
-
-    .l-time-range-inputs-elem {
-        width: 100%;
-    }
-
-    .l-time-range-inputs-elem.l-flex-row {
-        justify-content: space-between;
-    }
-    .l-axis-holder {
-        height: 30px;
-        width: 100%;
-    }
-
-    .l-axis-holder svg, .l-axis-holder svg path,
-    .l-axis-holder svg line  {
-        stroke: #A0A0A0;
-    }
-
-</style>
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
-<div class="follow-mode"
+<div class="l-time-conductor follow-mode"
      ng-controller="TimeConductorController as tcController" class="l-flex-col">
     <!-- Holds date selectors and ticks -->
-    <div class="l-conductor-dates">
+
-        <form class="l-time-range-inputs-holder l-flex-row flex-elem"
+    <!-- Holds 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-inputs-elem t-inputs-w l-flex-row flex-elem">
+        <span class="l-time-range-input-w start-date">
-                <span class="l-time-range-input-w flex-elem start-date">
+            <mct-control key="'datetime-field'"
-                    <mct-control key="'datetime-field'"
+                         structure="{
-                                 structure="{
+                             format: 'utc',
-                                     format: 'utc',
+                             validate: tcController.validateStart
-                                     validate: tcController.validateStart
+                         }"
-                                 }"
+                         ng-model="formModel"
-                                 ng-model="formModel"
+                         ng-blur="tcController.updateBoundsFromForm(formModel)"
-                                 ng-blur="tcController.updateBoundsFromForm(formModel)"
+                         field="'start'"
-                                 field="'start'"
+                         class="time-range-start">
-                                 class="time-range-start">
+            </mct-control>
-                    </mct-control>
+        </span>
-                </span>
+        <span class="l-time-range-input-w end-date"
-                <span class="l-time-range-input-w flex-elem end-date"
+              ng-controller="ToggleController as t2">
-                      ng-controller="ToggleController as t2">
+            <mct-control key="'datetime-field'"
-                    <mct-control key="'datetime-field'"
+                         structure="{
-                                 structure="{
+                             format: 'utc',
-                                     format: 'utc',
+                             validate: tcController.validateEnd
-                                     validate: tcController.validateEnd
+                         }"
-                                 }"
+                         ng-model="formModel"
-                                 ng-model="formModel"
+                         ng-blur="tcController.updateBoundsFromForm(formModel)"
-                                 ng-blur="tcController.updateBoundsFromForm(formModel)"
+                         field="'end'"
-                                 field="'end'"
+                         class="time-range-end">
-                                 class="time-range-end">
+            </mct-control>
-                    </mct-control>
+        </span>
-                </span>
-            </span>
             <input type="submit" class="hidden">
         </form>
-
-    </div>
-    <div class="l-conductor-ticks">
         <mct-conductor-axis></mct-conductor-axis>
     </div>
+
     <!-- Holds data availability, time of interest -->
-    <div class="l-data-availability"></div>
+    <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-system-zoom">
+    <div class="l-time-system-zoom l-row-elem l-flex-row flex-elem">
         <mct-representation
             key="'mode-selector'"
             mct-object="domainObject"
-            class="holder flex-elem">
+            class="holder flex-elem menus-up mode-selector">
         </mct-representation>
         <mct-control
                 key="'menu-button'"
-                class="time-system"
+                class="holder flex-elem menus-up time-system"
                 ng-model="conductorModel.timeSystem"
                 structure="{
-                    text: 'utc',
+                    text: 'UTC',
                     options: [
-                        {name: 'utc', key:'utc', glyph:'\u0043'},
+                        {name: 'UTC', key:'utc', glyph:'\u0043'},
-                        {name: 'scet', key:'scet', glyph:'\u0043'},
+                        {name: 'SCET', key:'scet', glyph:'\u0043'},
-                        {name: 'sclk', key:'sclk', glyph:'\u0043'}
+                        {name: 'SCLK', key:'sclk', glyph:'\u0043'}
                 ]}">
         </mct-control>
     </div>