External notice .active:hover state color + Cancel bubble up event for external notice
authorChloe Laisne <chloe.laisne@gmail.com>
Wed, 24 Aug 2016 18:32:41 +0200
changeset 268 19313f7c04ab
parent 267 a2872152f568
child 269 9659e91242e1
External notice .active:hover state color + Cancel bubble up event for external notice
cms/app-client/app/styles/components/playlist-component.scss
cms/app-client/app/templates/components/playlist-component.hbs
--- a/cms/app-client/app/styles/components/playlist-component.scss	Wed Aug 24 17:56:21 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Wed Aug 24 18:32:41 2016 +0200
@@ -82,6 +82,7 @@
 .playlist-component ul li.playing .tools button:hover,
 .playlist-component ul li.playing .tools .fa:hover {
     background-color: $medium-blue;
+    color: $light-blue;
 }
 
 .playlist-component ul li.notice .tools button.active {
@@ -89,8 +90,8 @@
     color: $light-white;
 }
 
-.playlist-component ul li.notice .tools button:hover {
-    background-color: $medium-white;
+.playlist-component ul li.notice:not(.playing) .tools button.active:hover {
+    color: $light-white;
 }
 
 .playlist-component ul li.notice .tools .fa:hover {
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Wed Aug 24 17:56:21 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Wed Aug 24 18:32:41 2016 +0200
@@ -12,7 +12,7 @@
             {{/if}}
                 {{ to-minutes document.duration }}
             </span>
-            <button{{action 'displayNotice' document.id}} class="{{if (ifOr (ifAnd (eq player.window 'notice') (eq player.item document.id)) (eq document.id notice)) 'active'}}">Notice</button>
+            <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">{{ document.title }}</span>
         <span class="author">{{document.publishers_disp}}</span>