[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
This commit is contained in:
Charles Hacskaylo
2017-01-26 11:57:08 -08:00
parent 8750bdd778
commit 4072b91808
3 changed files with 53 additions and 19 deletions

View File

@@ -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() || "--:--:--"}}

View File

@@ -73,7 +73,7 @@ define(
}
function updateTimerState(timerState) {
relativeTimerState = timerState;
self.timerState = relativeTimerState = timerState;
}
function updateActions(actionCapability, actionKey) {