From 4072b91808a67c8d602c6b498a61048365a0ad33 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 26 Jan 2017 11:57:08 -0800
Subject: [PATCH] [Frontend] Styling for Timer

Fixes #623
Mod to code to allow timerState to be accessible
to markup; CSS for stop button and paused/stopped states
---
 .../res/sass/features/_time-display.scss      | 53 +++++++++++++++----
 .../features/clock/res/templates/timer.html   | 17 +++---
 .../clock/src/controllers/TimerController.js  |  2 +-
 3 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/general/res/sass/features/_time-display.scss b/platform/commonUI/general/res/sass/features/_time-display.scss
index 94f64f9bb7..8c019860ad 100644
--- a/platform/commonUI/general/res/sass/features/_time-display.scss
+++ b/platform/commonUI/general/res/sass/features/_time-display.scss
@@ -1,33 +1,36 @@
 .l-time-display {
 	$transTime: 200ms;
+    $controlSize: 14px;
+    $control1ControlW: $controlSize + $interiorMargin;
+    $control2ControlW: $control1ControlW * 2;
     line-height: 140%;
 	&:hover {
-		.l-btn.control {
+		.l-btn.controls {
 			opacity: 1;
 		}
 	}
 
 	&.l-timer {
-        .l-value:before,
-        .control {
-            font-size: 0.8em;
-        }
-
         .l-value:before {
             // Direction +/- element
+            font-size: $controlSize;
             margin-right: $interiorMarginSm;
+
         }
-        .control {
+        .controls {
             @include trans-prop-nice((width, opacity), $transTime);
+            font-size: $controlSize;
             line-height: inherit;
             margin-right: 0;
             opacity: 0;
             width: 0;
+            .flex-elem {
+                margin-right: $interiorMargin;
+            }
         }
-		&:hover .control {
-            margin-right: $interiorMargin;
+		&:hover .controls {
             opacity: 1;
-			width: 1em;
+			width: $control2ControlW;
 		}
 	}
 
@@ -35,4 +38,34 @@
         color: pullForward($colorBodyFg, 50%);
         font-weight: 400;
     }
+
+    // States
+    &.s-state-stopped,
+    &.s-state-paused {
+        .l-value {
+            opacity: 0.4;
+        }
+    }
+
+    &.s-state-started {
+        .l-value {
+            opacity: 1;
+        }
+    }
+
+    &.s-state-stopped {
+        // Hide Stop button, 1controlW
+        .t-btn-stop {
+            display: none;
+        }
+        &:hover .controls {  width: $control1ControlW;  }
+
+    }
+
+    &.s-state-paused {
+        // Paused, do something visual
+        .l-value {
+            &:before { @extend .pulse; }
+        }
+    }
 }
diff --git a/platform/features/clock/res/templates/timer.html b/platform/features/clock/res/templates/timer.html
index dea86f1d27..55f36398de 100644
--- a/platform/features/clock/res/templates/timer.html
+++ b/platform/features/clock/res/templates/timer.html
@@ -19,15 +19,16 @@
  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" ng-controller="TimerController as timer">
+<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">
-		<a ng-click="timer.clickButton()"
-		   title="{{timer.buttonText()}}"
-		   class="flex-elem control s-icon-button {{timer.buttonCssClass()}}"></a>
-		<a ng-click="timer.clickStopButton()"
-			title="{{timer.stopButtonText()}}"
-			class="{{!timer.stopButtonCssClass() || 'flex-elem control s-icon-button'}} {{timer.stopButtonCssClass()}}"></a>
-	    <span class="flex-elem l-value {{timer.stateClass()}}"></span>
+        <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()"
+               title="{{timer.buttonText()}}"
+               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
+        </div>
 	    <span class="flex-elem l-value {{timer.signClass()}}">
 	        <span class="value"
 		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
diff --git a/platform/features/clock/src/controllers/TimerController.js b/platform/features/clock/src/controllers/TimerController.js
index 5252f67f00..e08e8b6daa 100644
--- a/platform/features/clock/src/controllers/TimerController.js
+++ b/platform/features/clock/src/controllers/TimerController.js
@@ -73,7 +73,7 @@ define(
             }
 
             function updateTimerState(timerState) {
-                relativeTimerState = timerState;
+                self.timerState = relativeTimerState = timerState;
             }
 
             function updateActions(actionCapability, actionKey) {