Timeline: updated livePreview to timeline play. Hide canvas and draw red outline

- Changed the play button to a toggle button
- livePreview code in stage activated via bindings
- Draw a red outline of the canvas when in play

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

1 files changed, 18 insertions, 8 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
index d2d813bb..cf6df347 100644
--- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -148,20 +148,30 @@ POSSIBILITY OF SUCH DAMAGE.
     padding-right: 5px;
 }
 .playbutton{
-    background-image: url('../images/play.png');
-    background-repeat: no-repeat;
+    background: transparent url("../images/play.png") no-repeat;
     height: 18px;
     width: 18px;
     float: left;
     padding-right: 5px;
+
+    border: none;
+    margin: 0;
+    min-width: 0;
+    opacity: 0.8;
+}
+.playbutton:hover {
+    background-color: #474747;
+    opacity: 1;
+}
+.playbutton.active:hover {
+    background-color: #474747;
+    opacity: 1;
+}
+.playbutton:focus {
+    -webkit-box-shadow: none;
 }
 .pausebutton{
-    background-image: url('../images/pause.png');
-    background-repeat: no-repeat;
-    height: 18px;
-    width: 18px;
-    float: left;
-    padding-right: 5px;
+    background-image: url("../images/pause.png");
 }
 .forwardbutton{
     background-image: url('../images/play_next.png');