# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1474924395 -7200
# Node ID 29b4252340943efdf86d7baa054c2fa582274487
# Parent  8f533ccc7e07447b9b52795234318a8a76a37672
Transcript icon in tool container + Toggle transcript action on click

diff -r 8f533ccc7e07 -r 29b425234094 cms/app-client/app/components/playlist-component.js
--- a/cms/app-client/app/components/playlist-component.js	Mon Sep 26 21:41:19 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Mon Sep 26 23:13:15 2016 +0200
@@ -66,6 +66,10 @@
             this.get('player').pause();
         },
 
+        displayTranscript: function() {
+            this.get('player').displayAdditionalInformation('transcript');
+        },
+
         displayNotice: function(id) {
             if(this.get('player').get('item') === id) {
                 this.get('player').displayMetadata('notice');
diff -r 8f533ccc7e07 -r 29b425234094 cms/app-client/app/styles/components/playlist-component.scss
--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Sep 26 21:41:19 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Mon Sep 26 23:13:15 2016 +0200
@@ -34,7 +34,6 @@
 
 .playlist-component ul li:not(.playing) {
     cursor: pointer;
-
 }
 
 .playlist-component ul li.playing {
@@ -44,13 +43,10 @@
     pointer-events: none;
 }
 
-.playlist-component ul li.notice {
-    background-color: $medium-white;
-    color: $dark-grey;
-}
-
 .playlist-component ul li .tools {
     float: right;
+    text-align: right;
+    font-size: 0px;
 }
 
 .playlist-component ul li .tools button,
@@ -85,27 +81,23 @@
     color: $light-blue;
 }
 
-.playlist-component ul li.notice .tools button.active {
-    background-color: $dark-grey;
-    color: $light-white;
-}
-
-.playlist-component ul li.notice:not(.playing) .tools button.active:hover {
-    color: $light-white;
-}
-
-.playlist-component ul li.notice .tools .fa:hover {
-    background-color: $light-white;
-    color: $dark-grey;
-}
-
 .playlist-component ul li.playing .tools button:hover,
 .playlist-component ul li.playing .tools .fa:hover {
     color: $light-blue;
 }
 
-.playlist-component ul li.notice .tools button:hover {
-    color: $dark-grey;
+.playlist-component ul li:not(.playing) .fa-bars {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+}
+
+.playlist-component ul li .meta {
+    padding-right: 78px;
+}
+
+.playlist-component ul li .meta p {
+    margin: 0;
 }
 
 .playlist-component ul li .tools button {
@@ -114,14 +106,8 @@
     line-height: 20px;
     padding: 0 10px;
     margin-top: 10px;
-    float: right;
-    width: 80px;
-}
-
-.playlist-component ul li .tools .time {
     display: block;
-    line-height: 24px;
-    font-weight: bold;
+    width: 68px;
 }
 
 .playlist-component ul li .tools .fa {
@@ -130,8 +116,7 @@
     width: 24px;
     height: 24px;
     line-height: 20px;
-    float: right;
-    margin-left: 15px;
+    margin-left: 10px;
     display: inline-block;
 }
 
@@ -146,11 +131,18 @@
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
-    padding-right: 30px;
 }
 .playlist-component ul li .title {
     font-weight: bold;
     line-height: 24px;
+    padding-right: 10px;
+}
+
+.playlist-component ul li .time {
+    display: block;
+    font-weight: bold;
+    line-height: 24px;
+    float: right;
 }
 
 .playlist-component ul li .title .fa-bars {
diff -r 8f533ccc7e07 -r 29b425234094 cms/app-client/app/templates/components/playlist-component.hbs
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Mon Sep 26 21:41:19 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Mon Sep 26 23:13:15 2016 +0200
@@ -3,24 +3,24 @@
     {{#each documents as |document| }}
     <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}{{if (eq document.id notice) 'notice'}}" {{action 'select' document.id}}>
         <div class="tools">
-            <span class="time">
+            {{#if document.transcript_url}}
+                <i title="Transcript" class="fa fa-bars{{if (ifOr (eq player.window 'transcript') (eq player.item document.id)) ' active'}}"{{action 'displayTranscript'}}>Transcript</i>
+            {{/if}}
             {{#if (ifAnd (eq player.playing true) (eq player.item document.id))}}
                 <i class="fa fa-pause" {{ action 'pause' }}>Pause</i>
             {{else}}
                 <i class="fa fa-play" {{ action 'play' document.id }}>Play</i>
             {{/if}}
-                {{ to-minutes document.duration }}
-            </span>
             <button{{action 'displayNotice' document.id bubbles=false}} class="{{if (ifOr (ifAnd (eq player.window 'notice') (eq player.item document.id)) (eq document.id notice)) 'active'}}">Notice</button>
         </div>
-        <span class="title">
-            {{#if document.transcript_url}}
-                <i title="Transcript" class="fa fa-bars">Transcript</i>
-            {{/if}}
-            {{ document.title }}
-        </span>
-        <span class="author">{{document.publishers_disp}}</span>
-        {{doc-language class="language" url=document.language}}
+        <div class="meta">
+            <p class="head">
+                <span class="time">{{ to-minutes document.duration }}</span>
+                <span class="title">{{ document.title }}</span>
+            </p>
+            <span class="author">{{document.publishers_disp}}</span>
+            {{doc-language class="language" url=document.language}}
+        </div>
     </li>
     {{/each}}
 </ul>