R&I Clock timer fixes (#2254)

* Clocks and timers styling WIP

- Markup, new styles;
- Renamed _legacy-plots.scss > _legacy;
- New $colorBodyFgEm constants - theme files all updated;

* Clocks and timers styling complete

* Styles clean up

- Moved legacy styles out of _global into _legacy.scss;

platform/features/clock/res/templates/clock.html

@@ -19,16 +19,14 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-time-display l-digital l-clock s-clock" ng-controller="ClockController as clock">
-	<div class="l-elem-wrapper">
-	    <span class="l-elem timezone">
+<div class="c-clock l-time-display" ng-controller="ClockController as clock">
+	<div class="c-clock__timezone">
 		{{clock.zone()}}
-	    </span>
-	    <span class="l-elem value active">
+	</div>
+	<div class="c-clock__value">
 		{{clock.text()}}
-	    </span>
-	    <span class="l-elem ampm">
+	</div>
+	<div class="c-clock__ampm">
 		{{clock.ampm()}}
-	    </span>
 	</div>
 </div>

platform/features/clock/res/templates/timer.html

@@ -19,21 +19,19 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-time-display l-digital l-timer s-timer s-state-{{timer.timerState}}" ng-controller="TimerController as timer">
-	<div class="l-elem-wrapper l-flex-row">
-        <div class="l-elem-wrapper l-flex-row controls">
-            <a ng-click="timer.clickStopButton()"
-               title="Stop"
-               class="flex-elem s-icon-button t-btn-stop icon-box"></a>
-            <a ng-click="timer.clickButton()"
+<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
+    <div class="c-timer__controls">
+        <button ng-click="timer.clickStopButton()"
+                ng-hide="timer.timerState == 'stopped'"
+                title="Reset"
+                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
+        <button ng-click="timer.clickButton()"
                 title="{{timer.buttonText()}}"
-               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
+                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
     </div>
-	    <span class="flex-elem l-value {{timer.signClass()}}">
-	        <span class="value"
-		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
-            </span>
-	    </span>
-	    <span ng-controller="RefreshingController"></span>
+    <div class="c-timer__direction {{timer.signClass()}}"
+        ng-hide="!timer.signClass()"></div>
+	<div class="c-timer__value">{{timer.text() || "--:--:--"}}
 	</div>
+	<span class="c-timer__ng-controller u-contents" ng-controller="RefreshingController"></span>
 </div>

src/styles-new/_constants-espresso.scss

@@ -56,6 +56,7 @@ $basicCr: 4px;
 // Base colors
 $colorBodyBg: #393939;
 $colorBodyFg: #aaa;
+$colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;

src/styles-new/_constants-maelstrom.scss

@@ -60,6 +60,7 @@ $basicCr: 4px;
 // Base colors
 $colorBodyBg: #393939;
 $colorBodyFg: #ccc;
+$colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;

src/styles-new/_constants-snow.scss

@@ -56,6 +56,7 @@ $basicCr: 4px;
 // Base colors
 $colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
+$colorBodyFgEm: #333;
 $colorGenBg: #fff;
 $colorHeadBg: #eee;
 $colorHeadFg: $colorBodyFg;

src/styles-new/_global.scss

@@ -508,42 +508,3 @@ a.disabled {
         }
     }
 }
-
-/************************** TEMP LEGACY FIXES */
-.overlay {
-    .outer-holder {
-        background: $colorMenuBg;
-        color: $colorMenuFg !important;
-    }
-}
-
-.form .form-row {
-    .label {
-        color: $colorMenuFg !important;
-    }
-    .selector-list {
-        @include reactive-input();
-        background: $colorInputBg !important;
-        color: $colorInputFg !important;
-    }
-}
-
-.ui-symbol.view-control {
-    display: block;
-    transform-origin: center center;
-
-    &:before { content: $glyph-icon-arrow-right-equilateral; }
-
-    &.expanded {
-        transform: rotate(90deg);
-    }
-}
-
-.t-imagery {
-    display: contents;
-}
-
-.t-frame-outer {
-    min-width: 200px;
-    min-height: 200px;
-}

src/styles-new/_legacy.scss

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/********************************************************************* PLOTS */
 mct-plot {
     display: contents;
 }
@@ -502,3 +503,112 @@ mct-plot {
         }
     }
 }
+/********************************************************* CLOCKS AND TIMERS */
+.c-clock,
+.c-timer {
+    display: flex;
+    align-items: center;
+    font-size: 1.25em;
+
+    > * {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+    }
+
+    &__value {
+        color: $colorBodyFgEm;
+    }
+}
+
+.c-clock {
+    > * + * { margin-left: $interiorMargin; }
+}
+
+.c-timer {
+    $ctrlW: 22px;
+
+    &__controls {
+        margin-right: 0;
+        min-width: 0;
+        overflow: hidden;
+        transition: $transOut;
+        width: 0;
+
+        .c-click-icon:before { font-size: 1em; }
+    }
+
+    &__direction {
+        font-size: 0.9em;
+        margin-right: $interiorMargin;
+    }
+
+    &__ng-controller {
+        font-size: 0;
+        width: 0;
+    }
+
+    &:hover {
+        .c-timer__controls {
+            transition: $transOut; // On purpose: want this to take a bit longer
+            margin-right: $interiorMargin;
+            width: $ctrlW * 2;
+        }
+
+        &.is-stopped .c-timer__controls { width: $ctrlW; }
+    }
+
+    &__direction,
+    &__value {
+        opacity: 0.5;
+    }
+
+    &.is-started {
+        .c-timer {
+            &__direction,
+            &__value {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+/******************************************************************* VARIOUS */
+.overlay {
+    .outer-holder {
+        background: $colorMenuBg;
+        color: $colorMenuFg !important;
+    }
+}
+
+.form .form-row {
+    .label {
+        color: $colorMenuFg !important;
+    }
+    .selector-list {
+        @include reactive-input();
+        background: $colorInputBg !important;
+        color: $colorInputFg !important;
+    }
+}
+
+.ui-symbol.view-control {
+    display: block;
+    transform-origin: center center;
+
+    &:before { content: $glyph-icon-arrow-right-equilateral; }
+
+    &.expanded {
+        transform: rotate(90deg);
+    }
+}
+
+.t-imagery {
+    display: contents;
+}
+
+.t-frame-outer {
+    min-width: 200px;
+    min-height: 200px;
+}
+

src/styles-new/core.scss

@@ -29,7 +29,7 @@
 @import "status";
 @import "controls";
 @import "table";
-@import "legacy-plots";
+@import "legacy";
 
 /******************** LEGACY CSS */
 $output-bourbon-deprecation-warnings: false;

src/styles-new/legacy-styles.scss

@@ -69,7 +69,7 @@
 //!********************************* TO BE MOVED *!
 @import "../styles/autoflow";
 @import "../styles/features/imagery";
-@import "../styles/features/time-display";
+//@import "../styles/features/time-display";
 @import "../styles/widgets";
 //
 //!********************************* APP STARTUP *!